/* ============================================================
   ROOT VARIABLES — XoHub Solutions Brand Colors
   ============================================================ */
:root {
    /* Official Brand Colors from Requirements/Content.txt */
    --color-lime: #81c752;
    --color-lime-dark: #6ba845;
    --color-purple: #7c50cc;
    --color-purple-dark: #6640a8;
    --color-purple-light: #9670d9;
    --color-charcoal: #1A1A2E;
    --color-white: #FFFFFF;
    --color-off-white: #F8F9FA;
    --color-gray-light: #E8ECF0;
    --color-gray-mid: #9BA3B5;

    /* Typography */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --container-max-width: 1200px;
    --top-bar-height: 42px;
    --nav-height: 80px;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Shadows */
    --shadow-soft: 0 4px 24px rgba(26, 26, 46, 0.06);
    --shadow-medium: 0 8px 40px rgba(26, 26, 46, 0.10);
    --shadow-dropdown: 0 16px 48px rgba(26, 26, 46, 0.12);
    --shadow-card: 0 20px 60px rgba(26, 26, 46, 0.08);
    --shadow-card-hover: 0 32px 80px rgba(124, 80, 204, 0.12);
    --shadow-glass: 0 8px 32px rgba(26, 26, 46, 0.06);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    background: var(--color-white);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

ul {
    list-style: none;
}

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

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   XOHUB SOLUTIONS HEADER — Sticky wrapper with enhanced behavior
   ============================================================ */
#XoHubSolutions-MainHeader,
.XoHubSolutions-MainHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--color-white);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Glassmorphism effect ONLY when scrolled */
#XoHubSolutions-MainHeader.scrolled,
.XoHubSolutions-MainHeader.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 24px rgba(26, 26, 46, 0.08);
    border-bottom: 1px solid rgba(26, 26, 46, 0.05);
}

/* Reduce navbar height when scrolled */
#XoHubSolutions-MainHeader.scrolled .XoHubSolutions-MainNav,
.XoHubSolutions-MainHeader.scrolled .XoHubSolutions-MainNav {
    height: 70px;
}

/* Scale down logo when scrolled */
#XoHubSolutions-MainHeader.scrolled .XoHubSolutions-LogoImage,
.XoHubSolutions-MainHeader.scrolled .XoHubSolutions-LogoImage {
    width: 150px;
    height: 150px;
}

/* Reduce nav link padding when scrolled */
#XoHubSolutions-MainHeader.scrolled .XoHubSolutions-NavLink,
.XoHubSolutions-MainHeader.scrolled .XoHubSolutions-NavLink {
    padding: 5px 12px;
}

/* Top Bar smooth hide on scroll */
#XoHubSolutions-MainHeader.scrolled #XoHubSolutions-TopBar,
.XoHubSolutions-MainHeader.scrolled .XoHubSolutions-TopBar {
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border-bottom: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   XOHUB SOLUTIONS TOP ANNOUNCEMENT BAR
   ============================================================ */
#XoHubSolutions-TopBar,
.XoHubSolutions-TopBar {
    height: var(--top-bar-height);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-light);
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                margin 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                padding 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    opacity: 1;
    pointer-events: all;
}

/* Top Bar Hidden State - triggered by scroll */
#XoHubSolutions-TopBar.hidden,
.XoHubSolutions-TopBar.hidden {
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.XoHubSolutions-TopBarInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.XoHubSolutions-TopBarLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.XoHubSolutions-TopBarIcon {
    color: var(--color-purple);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.XoHubSolutions-TopBarText {
    font-weight: var(--font-weight-regular);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    color: var(--color-charcoal);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

/* XoHub Solutions Text Rotator */
.XoHubSolutions-TextRotator {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    min-height: 1.2em;
    overflow: visible;
}

.XoHubSolutions-RotatorMessage {
    display: inline-block;
    white-space: nowrap;
    will-change: opacity, transform;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .XoHubSolutions-RotatorMessage {
        transition: none !important;
    }
}

.XoHubSolutions-HighlightGreen {
    color: var(--color-lime);
    font-weight: var(--font-weight-semibold);
    position: relative;
    white-space: nowrap;
}

.XoHubSolutions-TopBarRight {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.XoHubSolutions-TopBarNav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.XoHubSolutions-TopBarLink {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    letter-spacing: 0.02em;
    position: relative;
    padding: 2px 0;
    transition: var(--transition-smooth);
}

.XoHubSolutions-TopBarLink::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--color-purple);
    transition: var(--transition-smooth);
}

.XoHubSolutions-TopBarLink:hover::after {
    width: 100%;
}

.XoHubSolutions-TopBarLink:hover {
    color: var(--color-purple);
}

.XoHubSolutions-TopBarSocials {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 16px;
    border-left: 1px solid var(--color-gray-light);
}

.XoHubSolutions-SocialIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    color: var(--color-charcoal);
    border-radius: 50%;
    transition: var(--transition-smooth);
}

.XoHubSolutions-SocialIcon:hover {
    color: var(--color-white);
    background: var(--color-purple);
    transform: translateY(-2px);
}

.XoHubSolutions-SocialIcon:focus-visible {
    outline: 2px solid var(--color-lime);
    outline-offset: 2px;
}

/* ============================================================
   TOP BAR — ANIMATED TEXT ROTATOR (FIXED)
   ============================================================ */

/* Rotator container — wraps the animated text */
.text-rotator {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    height: 1.5em;
    line-height: 1.5em;
    min-width: 40px;
    max-width: 100%;
    flex: 1;
}

/* Individual text items — FIXED: allow full text display */
.rotator-item {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
    backface-visibility: hidden;
    padding-right: 4px;
}

/* Current visible item — normal position */
.rotator-item.current {
    transform: translateY(0);
    opacity: 1;
    z-index: 2;
    position: relative;
}

/* Current item sliding out (up) */
.rotator-item.slide-out {
    transform: translateY(-100%);
    opacity: 0;
    z-index: 1;
}

/* Next item coming in (from below) */
.rotator-item.slide-in {
    transform: translateY(100%);
    opacity: 0;
    z-index: 0;
}

/* Next item becomes visible (slides up to normal) */
.rotator-item.slide-in.active {
    transform: translateY(0);
    opacity: 1;
    z-index: 2;
}

/* Reduced motion preference — disable animation */
@media (prefers-reduced-motion: reduce) {
    .rotator-item {
        transition: none !important;
        animation: none !important;
    }

    .text-rotator {
        height: auto !important;
        overflow: visible !important;
    }

    .rotator-item {
        position: relative !important;
        display: none !important;
    }

    .rotator-item.current {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        position: relative !important;
    }

    .rotator-item.slide-out,
    .rotator-item.slide-in,
    .rotator-item.slide-in.active {
        display: none !important;
        opacity: 0 !important;
        transform: none !important;
    }
}

/* Mobile adjustments for the rotator */
@media (max-width: 768px) {
    .logo__image {
        width: 150px;
        height: 150px;
    }

    .text-rotator {
        height: 1.4em;
        line-height: 1.4em;
        min-width: 30px;
    }

    .rotator-item {
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .logo__image {
        width: 150px;
        height: 150px;
    }

    .text-rotator {
        height: 1.3em;
        line-height: 1.3em;
        min-width: 20px;
        max-width: 180px;
    }

    .rotator-item {
        font-size: 0.65rem;
        white-space: normal;
    }
}

@media (max-width: 425px) {
    .logo__image {
        width: 150px;
        height: 150px;
    }

    .text-rotator {
        height: 1.2em;
        line-height: 1.2em;
        max-width: 120px;
        min-width: 10px;
    }

    .rotator-item {
        font-size: 0.6rem;
    }
}

/* ============================================================
   XOHUB SOLUTIONS MAIN NAVIGATION
   ============================================================ */
.XoHubSolutions-MainNav {
    height: var(--nav-height);
    display: flex;
    align-items: center;
    background: transparent;
    transition: var(--transition-smooth);
}

#XoHubSolutions-MainHeader.scrolled .XoHubSolutions-MainNav,
.XoHubSolutions-MainHeader.scrolled .XoHubSolutions-MainNav {
    background: transparent;
}

.XoHubSolutions-MainNavInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

/* Logo — FIXED: proper image styling */
.XoHubSolutions-Logo a {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Logo — Responsive sizing for high-res screens */
.XoHubSolutions-LogoImage {
    width: 180px;
    height: 180px;
    border-radius: 10px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.XoHubSolutions-LogoIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.XoHubSolutions-LogoText {
    font-size: 1.35rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    white-space: nowrap;
}

.XoHubSolutions-LogoHighlight {
    color: var(--color-purple);
    font-weight: var(--font-weight-bold);
}

/* Nav Links */
.XoHubSolutions-NavLinks {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
}

.XoHubSolutions-NavLinks > li {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.XoHubSolutions-NavLink {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    padding: 6px 14px;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
}

/* Enhanced hover background effect */
.XoHubSolutions-NavLink::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-off-white);
    border-radius: 6px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
}

.XoHubSolutions-NavLink:hover::before {
    transform: scaleX(1);
}

/* Animated underline */
.XoHubSolutions-NavLink::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--color-purple);
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.XoHubSolutions-NavLink:hover::after {
    width: 60%;
}

.XoHubSolutions-NavLink:hover {
    color: var(--color-purple);
}

/* Active page indicator */
.XoHubSolutions-NavLink.active {
    color: var(--color-purple);
    font-weight: var(--font-weight-semibold);
}

.XoHubSolutions-NavLink.active::before {
    transform: scaleX(1);
    background: linear-gradient(135deg, rgba(129, 199, 82, 0.1) 0%, rgba(124, 80, 204, 0.1) 100%);
}

.XoHubSolutions-NavLink.active::after {
    width: 60%;
    background: var(--color-lime);
    height: 3px;
}

/* Dropdown icon animation */
.XoHubSolutions-NavLink .XoHubSolutions-DropdownIcon,
.XoHubSolutions-DropdownIcon {
    font-size: 0.6rem;
    color: var(--color-gray-mid);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-left: 2px;
}

.XoHubSolutions-NavLink:hover .XoHubSolutions-DropdownIcon {
    color: var(--color-purple);
    transform: rotate(180deg) translateY(-1px);
}

.XoHubSolutions-Dropdown:hover .XoHubSolutions-DropdownIcon {
    transform: rotate(180deg) translateY(-1px);
}

/* Dropdown Menus — Enhanced with smooth animations */
.XoHubSolutions-DropdownMenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px;
    background: var(--color-white);
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: var(--shadow-dropdown);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                visibility 0.25s ease;
    border: 1px solid var(--color-gray-light);
    z-index: 100;
}

/* Pseudo-element bridge to eliminate hover gap */
.XoHubSolutions-Dropdown::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
    z-index: 10;
    pointer-events: none;
}

.XoHubSolutions-Dropdown:hover .XoHubSolutions-DropdownMenu {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

/* Staggered fade-in animation for dropdown items */
.XoHubSolutions-DropdownMenu li {
    padding: 0 8px;
    opacity: 0;
    transform: translateY(-5px);
    animation: dropdownFadeIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.XoHubSolutions-Dropdown:hover .XoHubSolutions-DropdownMenu li:nth-child(1) { animation-delay: 0.05s; }
.XoHubSolutions-Dropdown:hover .XoHubSolutions-DropdownMenu li:nth-child(2) { animation-delay: 0.08s; }
.XoHubSolutions-Dropdown:hover .XoHubSolutions-DropdownMenu li:nth-child(3) { animation-delay: 0.11s; }
.XoHubSolutions-Dropdown:hover .XoHubSolutions-DropdownMenu li:nth-child(4) { animation-delay: 0.14s; }
.XoHubSolutions-Dropdown:hover .XoHubSolutions-DropdownMenu li:nth-child(5) { animation-delay: 0.17s; }

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

.XoHubSolutions-DropdownLink {
    display: block;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

/* Animated background slide effect */
.XoHubSolutions-DropdownLink::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--color-lime);
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0 3px 3px 0;
}

.XoHubSolutions-DropdownLink:hover {
    background: var(--color-off-white);
    color: var(--color-purple);
    padding-left: 24px;
}

.XoHubSolutions-DropdownLink:hover::before {
    transform: scaleY(1);
}

/* Active dropdown link */
.XoHubSolutions-DropdownLink.active {
    background: linear-gradient(135deg, rgba(129, 199, 82, 0.1) 0%, rgba(124, 80, 204, 0.1) 100%);
    color: var(--color-purple);
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   MEGA MENU STYLES — Enhanced Animations
   ============================================================ */

/* Mega Menu Container */
.XoHubSolutions-MegaMenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 800px;
    max-width: 1000px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-white);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(26, 26, 46, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                visibility 0.3s ease;
    border: 1px solid var(--color-gray-light);
    z-index: 100;
}

/* Smooth scrollbar for mega menu */
.XoHubSolutions-MegaMenu::-webkit-scrollbar {
    width: 8px;
}

.XoHubSolutions-MegaMenu::-webkit-scrollbar-track {
    background: var(--color-off-white);
    border-radius: 10px;
}

.XoHubSolutions-MegaMenu::-webkit-scrollbar-thumb {
    background: var(--color-purple);
    border-radius: 10px;
}

.XoHubSolutions-MegaMenu::-webkit-scrollbar-thumb:hover {
    background: var(--color-purple-dark);
}

.XoHubSolutions-MegaDropdown::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
    z-index: 10;
    pointer-events: none;
}

.XoHubSolutions-MegaDropdown:hover .XoHubSolutions-MegaMenu {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

/* Mega Menu Inner Grid */
.XoHubSolutions-MegaMenuInner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
}

/* Staggered fade-in for mega menu columns */
.XoHubSolutions-MegaMenuColumn {
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transform: translateY(-10px);
    animation: megaColumnFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.XoHubSolutions-MegaDropdown:hover .XoHubSolutions-MegaMenuColumn:nth-child(1) { animation-delay: 0.05s; }
.XoHubSolutions-MegaDropdown:hover .XoHubSolutions-MegaMenuColumn:nth-child(2) { animation-delay: 0.1s; }
.XoHubSolutions-MegaDropdown:hover .XoHubSolutions-MegaMenuColumn:nth-child(3) { animation-delay: 0.15s; }
.XoHubSolutions-MegaDropdown:hover .XoHubSolutions-MegaMenuColumn:nth-child(4) { animation-delay: 0.2s; }
.XoHubSolutions-MegaDropdown:hover .XoHubSolutions-MegaMenuColumn:nth-child(5) { animation-delay: 0.25s; }

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

/* Mega Menu Category Header */
.XoHubSolutions-MegaMenuCategory {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-light);
}

.XoHubSolutions-MegaCategoryIcon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: 4px;
    box-shadow: 0 4px 12px rgba(124, 80, 204, 0.2);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.XoHubSolutions-MegaMenuColumn:hover .XoHubSolutions-MegaCategoryIcon {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 16px rgba(124, 80, 204, 0.3);
}

.XoHubSolutions-MegaCategoryTitle {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.XoHubSolutions-MegaMenuColumn:hover .XoHubSolutions-MegaCategoryTitle {
    color: var(--color-purple);
}

.XoHubSolutions-MegaCategoryDesc {
    font-size: 0.72rem;
    color: var(--color-gray-mid);
    margin: 0;
    line-height: 1.4;
}

/* Mega Menu Links */
.XoHubSolutions-MegaMenuLinks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.XoHubSolutions-MegaLink {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

/* Animated indicator bar */
.XoHubSolutions-MegaLink::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: var(--color-lime);
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animated background */
.XoHubSolutions-MegaLink::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-off-white) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.XoHubSolutions-MegaLink:hover {
    background: var(--color-off-white);
    color: var(--color-purple);
    padding-left: 24px;
    transform: translateX(4px);
}

.XoHubSolutions-MegaLink:hover::before {
    width: 12px;
    left: 8px;
}

.XoHubSolutions-MegaLink:hover::after {
    opacity: 1;
}

/* Active page indicator for mega links */
.XoHubSolutions-MegaLink.active {
    background: linear-gradient(135deg, rgba(129, 199, 82, 0.1) 0%, rgba(124, 80, 204, 0.1) 100%);
    color: var(--color-purple);
    font-weight: var(--font-weight-semibold);
    padding-left: 24px;
}

.XoHubSolutions-MegaLink.active::before {
    width: 12px;
    left: 8px;
    background: var(--color-lime);
    height: 3px;
}

/* Keyboard focus states */
.XoHubSolutions-NavLink:focus-visible,
.XoHubSolutions-MegaLink:focus-visible,
.XoHubSolutions-DropdownLink:focus-visible {
    outline: 2px solid var(--color-lime);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Focus-visible for better keyboard navigation */
.XoHubSolutions-NavLink:focus-visible {
    box-shadow: 0 0 0 3px rgba(129, 199, 82, 0.2);
}

.XoHubSolutions-MegaLink:focus-visible,
.XoHubSolutions-DropdownLink:focus-visible {
    background: var(--color-off-white);
    color: var(--color-purple);
}

/* Nav Actions */
.XoHubSolutions-NavActions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.XoHubSolutions-SearchBtn {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: var(--color-charcoal);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.XoHubSolutions-SearchBtn:hover {
    background: var(--color-off-white);
    color: var(--color-purple);
    transform: scale(1.05);
}

/* Primary CTA Button */
.XoHubSolutions-BtnPrimary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: var(--color-purple);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    letter-spacing: 0.01em;
    box-shadow: 0 4px 16px rgba(124, 80, 204, 0.25);
}

.XoHubSolutions-BtnPrimary:hover {
    background: var(--color-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 80, 204, 0.35);
}

.XoHubSolutions-BtnPrimary i {
    font-size: 0.75rem;
    transition: var(--transition-smooth);
}

.XoHubSolutions-BtnPrimary:hover i {
    transform: translateX(4px);
}

/* Hamburger */
.XoHubSolutions-Hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    z-index: 1100;
}

.XoHubSolutions-HamburgerLine {
    display: block;
    width: 26px;
    height: 2.5px;
    background: var(--color-charcoal);
    border-radius: 4px;
    transition: var(--transition-smooth);
    transform-origin: center;
}

.XoHubSolutions-Hamburger.active .XoHubSolutions-HamburgerLine:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.XoHubSolutions-Hamburger.active .XoHubSolutions-HamburgerLine:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.XoHubSolutions-Hamburger.active .XoHubSolutions-HamburgerLine:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================================
   MOBILE OVERLAY & MENU
   ============================================================ */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 380px;
    height: 100%;
    background: var(--color-white);
    z-index: 1060;
    padding: 32px 28px;
    overflow-y: auto;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-medium);
}

.mobile-menu.open {
    right: 0;
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-gray-light);
    margin-bottom: 24px;
}

.mobile-menu__logo {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

.mobile-menu__logo .logo__highlight {
    color: var(--color-purple);
}

.mobile-menu__close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--color-charcoal);
    cursor: pointer;
    padding: 4px 8px;
    transition: var(--transition-smooth);
}

.mobile-menu__close:hover {
    color: var(--color-purple);
    transform: rotate(90deg);
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    border-radius: 8px;
    transition: var(--transition-smooth);
}

.mobile-menu__link:hover {
    background: var(--color-off-white);
    color: var(--color-purple);
}

.mobile-menu__link i {
    font-size: 0.7rem;
    color: var(--color-gray-mid);
    transition: var(--transition-smooth);
}

.mobile-menu__link.active i {
    transform: rotate(180deg);
}

.mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
    padding-left: 16px;
}

.mobile-dropdown.open {
    max-height: 300px;
    opacity: 1;
}

.mobile-sub-link {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    border-radius: 6px;
    transition: var(--transition-smooth);
}

.mobile-sub-link:hover {
    background: var(--color-off-white);
    color: var(--color-purple);
    padding-left: 24px;
}

.mobile-menu__footer {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--color-gray-light);
}

.mobile-cta {
    width: 100%;
    justify-content: center;
    margin-bottom: 18px;
}

.mobile-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.mobile-socials a {
    font-size: 1.1rem;
    color: var(--color-charcoal);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-smooth);
    border: 1px solid var(--color-gray-light);
}

.mobile-socials a:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
}

/* ============================================================
   ENHANCED MOBILE MENU STYLES
   ============================================================ */

/* Mobile overlay enhanced */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 46, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                visibility 0.3s ease,
                backdrop-filter 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile menu enhanced with smooth slide */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 400px;
    height: 100%;
    background: var(--color-white);
    z-index: 1060;
    padding: 32px 28px;
    overflow-y: auto;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(26, 26, 46, 0.2);
}

.mobile-menu.open {
    right: 0;
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--color-gray-light);
    margin-bottom: 24px;
}

.mobile-menu__logo {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

.mobile-menu__logo .logo__highlight {
    color: var(--color-purple);
}

.mobile-menu__close {
    background: var(--color-off-white);
    border: none;
    font-size: 1.3rem;
    color: var(--color-charcoal);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.mobile-menu__close:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: rotate(90deg);
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Mobile menu enhanced with proper touch targets */
.mobile-menu__link {
    min-height: 48px; /* Enhanced touch target size */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Animated background for mobile links */
.mobile-menu__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--color-lime);
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0 4px 4px 0;
}

.mobile-menu__link:hover,
.mobile-menu__link:active {
    background: var(--color-off-white);
    color: var(--color-purple);
    padding-left: 20px;
}

.mobile-menu__link:hover::before,
.mobile-menu__link:active::before {
    transform: scaleY(1);
}

.mobile-menu__link i {
    font-size: 0.7rem;
    color: var(--color-gray-mid);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-menu__link.active i {
    transform: rotate(180deg);
    color: var(--color-purple);
}

/* Mobile dropdown enhanced */
.mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.3s ease,
                padding 0.3s ease;
    opacity: 0;
    padding-left: 0;
}

.mobile-dropdown.open {
    max-height: 800px;
    opacity: 1;
    padding: 8px 0 8px 16px;
}

/* Mobile Mega Menu Categories */
.mobile-mega-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.3s ease;
    opacity: 0;
    padding-left: 0;
}

.mobile-mega-dropdown.open {
    max-height: 1200px;
    opacity: 1;
}

.mobile-mega-category {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-gray-light);
}

.mobile-mega-category:last-child {
    border-bottom: none;
}

.mobile-mega-category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    padding: 10px 16px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(129, 199, 82, 0.05) 0%, rgba(124, 80, 204, 0.05) 100%);
    border-radius: 8px;
}

.mobile-mega-category-title i {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}

.mobile-mega-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 16px;
}

.mobile-sub-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.mobile-sub-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: var(--color-lime);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.mobile-sub-link:hover,
.mobile-sub-link:active {
    background: var(--color-off-white);
    color: var(--color-purple);
    padding-left: 28px;
}

.mobile-sub-link:hover::before,
.mobile-sub-link:active::before {
    width: 16px;
    left: 8px;
}

/* Mobile menu footer enhanced */
.mobile-menu__footer {
    margin-top: auto;
    padding-top: 24px;
    border-top: 2px solid var(--color-gray-light);
}

.mobile-cta {
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
    min-height: 48px;
}

.mobile-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mobile-socials a {
    font-size: 1.1rem;
    color: var(--color-charcoal);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid var(--color-gray-light);
    background: var(--color-white);
}

.mobile-socials a:hover,
.mobile-socials a:active {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 6px 20px rgba(124, 80, 204, 0.3);
}

/* Mobile menu scroll locking */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* ============================================================
   ============================================================
   HERO SECTION — Phase 2
   ============================================================
   ============================================================ */

/* ----- Hero Container ----- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--top-bar-height) + var(--nav-height) + 40px) 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.hero__inner {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* ----- Left Column ----- */
.hero__content {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 28px;
    animation: fadeUp 0.8s ease forwards;
}

/* Premium Badge — Always active with lime border + shadow */
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px 6px 16px;
    background: var(--color-off-white);
    border: 1px solid var(--color-lime);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    box-shadow: 0 4px 16px rgba(129, 199, 82, 0.2);
    width: fit-content;
    transition: var(--transition-smooth);
}

/* Optional: subtle hover if you want any interaction */
.hero__badge:hover {
    border-color: var(--color-lime-dark);
    box-shadow: 0 4px 20px rgba(129, 199, 82, 0.35);
}

/* Headline */
.hero__title {
    font-size: 3.8rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-charcoal);
    max-width: 15ch;
}

.hero__title .XoHubSolutions-HighlightGreen,
.hero__title .highlight-lime {
    position: relative;
    display: inline-block;
}

.hero__title .XoHubSolutions-HighlightGreen::after,
.hero__title .highlight-lime::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(129, 199, 82, 0.25);
    border-radius: 4px;
    z-index: -1;
}

/* Description */
.hero__description {
    font-size: 1.1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 46ch;
}

/* CTA Group */
.hero__cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-large {
    padding: 14px 36px;
    font-size: 0.95rem;
    border-radius: 50px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: transparent;
    color: var(--color-charcoal);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-secondary:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 80, 204, 0.08);
}

.btn-secondary i {
    font-size: 0.7rem;
    transition: var(--transition-smooth);
}

.btn-secondary:hover i {
    transform: translateX(4px);
}

/* Trust Section */
.hero__trust {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
}

.trust-avatars {
    display: flex;
    align-items: center;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    border: 2px solid var(--color-white);
    margin-right: -10px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    cursor: help;
}

.avatar:hover {
    transform: translateY(-3px) scale(1.05);
    z-index: 10;
    box-shadow: 0 6px 20px rgba(26, 26, 46, 0.15);
}

.avatar:last-child {
    margin-right: 0;
}

.trust-text {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.5;
}

.trust-text strong {
    color: var(--color-purple);
    font-weight: var(--font-weight-bold);
}

/* ============================================================
   Right Column — Premium Visual
   ============================================================ */
.hero__visual {
    flex: 1 1 50%;
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Glow Orbs */
.visual-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
}

.visual-glow--purple {
    width: 400px;
    height: 400px;
    background: var(--color-purple);
    top: -60px;
    right: -80px;
    animation: pulseGlow 6s ease-in-out infinite alternate;
}

.visual-glow--lime {
    width: 300px;
    height: 300px;
    background: var(--color-lime);
    bottom: -40px;
    left: -60px;
    animation: pulseGlow 8s ease-in-out infinite alternate-reverse;
}

/* ----- Orbit Network ----- */
.orbit-container {
    position: relative;
    width: 340px;
    height: 340px;
    transition: transform 0.1s ease-out;
}

.orbit-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 50%;
}

.orbit-circle--1 {
    width: 280px;
    height: 280px;
    animation: orbitSpin 20s linear infinite;
}

.orbit-circle--2 {
    width: 200px;
    height: 200px;
    animation: orbitSpin 14s linear infinite reverse;
}

/* Orbit Nodes */
.orbit-node {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--color-purple);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
    animation: nodePulse 2.5s ease-in-out infinite;
}

.orbit-node--1 {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.orbit-node--2 {
    bottom: 10%;
    right: 15%;
    animation-delay: 0.6s;
}

.orbit-node--3 {
    top: 30%;
    left: 8%;
    animation-delay: 1.2s;
}

.orbit-node--4 {
    bottom: 30%;
    right: 8%;
    animation-delay: 1.8s;
}

.orbit-center-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, var(--color-lime) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.4;
    animation: pulseGlow 3s ease-in-out infinite;
}

/* ----- Floating Glassmorphism Cards — FIXED: refined positioning ----- */
.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--transition-smooth);
    min-width: 140px;
    animation: floatCard 4s ease-in-out infinite;
    z-index: 5;
}

.floating-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-purple-light);
}

.floating-card .card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.floating-card .card-content h4 {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.floating-card .card-content p {
    font-size: 0.68rem;
    color: var(--color-gray-mid);
    margin: 0;
}

/* Individual card positions — FIXED: better alignment */
.floating-card--1 {
    top: 5%;
    right: 2%;
    animation-delay: 0s;
}

.floating-card--2 {
    bottom: 15%;
    left: -4%;
    animation-delay: 1.2s;
}

.floating-card--3 {
    bottom: 2%;
    right: 15%;
    animation-delay: 2.4s;
}

.floating-card--4 {
    top: 22%;
    left: -2%;
    animation-delay: 0.6s;
}

/* ----- Circuit Lines (decorative) ----- */
.circuit-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image:
        linear-gradient(45deg, transparent 65%, rgba(192, 227, 74, 0.04) 70%, transparent 75%),
        linear-gradient(-45deg, transparent 65%, rgba(124, 58, 237, 0.04) 70%, transparent 75%),
        linear-gradient(90deg, transparent 80%, rgba(192, 227, 74, 0.03) 85%, transparent 90%),
        linear-gradient(180deg, transparent 80%, rgba(124, 58, 237, 0.03) 85%, transparent 90%);
    background-size: 60px 60px;
    opacity: 0.5;
}

/* ============================================================
   ============================================================
   TRUST SECTION — Phase 3
   ============================================================
   ============================================================ */

#trust-section {
    padding: 80px 0;
    background: var(--color-white);
    position: relative;
}

/* ----- Section Badge (shared) ----- */
.trusted-by__badge,
.stats__badge,
.features__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.trusted-by__badge::before,
.stats__badge::before,
.features__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

/* ============================================================
   PART 1: TRUSTED BY
   ============================================================ */
.trusted-by {
    text-align: center;
    padding: 40px 0 60px;
    border-bottom: 1px solid var(--color-gray-light);
}

.trusted-by__header {
    margin-bottom: 48px;
}

.trusted-by__title {
    font-size: 2.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.trusted-by__subtitle {
    font-size: 1rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    max-width: 48ch;
    margin: 0 auto;
}

.trusted-by__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px 48px;
    max-width: 900px;
    margin: 0 auto;
}

/* ==================== CLIENT CARDS GRID ==================== */
.client-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin: 48px 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ==================== CLIENT CARD ==================== */
.client-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    transition: var(--transition-smooth);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.client-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary);
}

/* ==================== CLIENT CARD HEADER ==================== */
.client-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.client-card__company {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.client-card__logo {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.client-card__logo i {
    font-size: 1.5rem;
    color: var(--color-white);
}

.client-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.client-card__name {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
    line-height: 1.3;
}

.client-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--color-gray-mid);
}

.client-card__location i {
    font-size: 0.75rem;
    color: var(--color-primary);
}

/* ==================== CLIENT BADGE ==================== */
.client-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--border-radius-full);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    flex-shrink: 0;
}

.client-badge--repeat {
    background: linear-gradient(135deg, #10b981, #059669);
    color: var(--color-white);
}

.client-badge--repeat i {
    font-size: 0.7rem;
}

/* ==================== CLIENT CARD DETAILS ==================== */
.client-card__details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.client-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.client-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-background);
    border-radius: var(--border-radius-md);
    font-size: 0.8125rem;
    color: var(--color-charcoal);
    font-weight: var(--font-weight-medium);
}

.client-meta__item i {
    font-size: 0.75rem;
    color: var(--color-primary);
}

/* ==================== CLIENT RATING ==================== */
.client-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.client-card__rating i {
    font-size: 0.875rem;
    color: #fbbf24;
}

.client-card__rating .rating-text {
    margin-left: 4px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

/* ==================== CLIENT FEEDBACK ==================== */
.client-card__feedback {
    margin: 0;
    padding: 16px;
    background: var(--color-background);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-gray-dark);
    font-style: italic;
}

/* ==================== XOHUBSOLUTIONS TOP STATISTICS ==================== */
.XoHubSolutions-TopStats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--color-gray-light);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.XoHubSolutions-TopStatCard {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-lg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100px;
}

.XoHubSolutions-TopStatCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary);
}

.XoHubSolutions-TopStatIcon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.XoHubSolutions-TopStatCard:hover .XoHubSolutions-TopStatIcon {
    transform: scale(1.08);
}

.XoHubSolutions-TopStatIcon i {
    font-size: 1.375rem;
    color: var(--color-white);
}

.XoHubSolutions-TopStatContent {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.XoHubSolutions-TopStatValue {
    font-size: 1.625rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.XoHubSolutions-TopStatLabel {
    font-size: 0.8125rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
}

/* Old styles kept for backwards compatibility */
.trusted-by__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--color-gray-light);
}

.trust-metric {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-smooth);
}

.trust-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: var(--color-primary);
}

.trust-metric__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
}

.trust-metric__icon i {
    font-size: 1.25rem;
    color: var(--color-white);
}

.trust-metric__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trust-metric__value {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.trust-metric__label {
    font-size: 0.8125rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-medium);
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: default;
}

.logo-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-4px);
}

.partner-logo {
    width: 48px;
    height: 48px;
    display: block;
}

/* ============================================================
   PART 2: OUR IMPACT (XoHubSolutions Statistics)
   ============================================================ */
.XoHubSolutions-ImpactSection {
    text-align: center;
    padding: 60px 0;
    border-bottom: 1px solid var(--color-gray-light);
}

.XoHubSolutions-ImpactHeader {
    text-align: center;
    margin-bottom: 48px;
}

.XoHubSolutions-ImpactBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-full);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: 16px;
    transition: var(--transition-smooth);
}

.XoHubSolutions-ImpactBadge i {
    font-size: 0.75rem;
}

.XoHubSolutions-ImpactTitle {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    line-height: 1.2;
}

.XoHubSolutions-ImpactSubtitle {
    font-size: 1.0625rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.6;
}

.XoHubSolutions-ImpactGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

.XoHubSolutions-ImpactCard {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    position: relative;
    /* Removed overflow: hidden to prevent icon clipping */
}

.XoHubSolutions-ImpactCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 20px 20px 0 0;
}

.XoHubSolutions-ImpactCard:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 16px 40px rgba(129, 199, 82, 0.15);
    z-index: 10;
}

.XoHubSolutions-ImpactCard:hover::before {
    opacity: 1;
}

.XoHubSolutions-ImpactIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(129, 199, 82, 0.1), rgba(124, 80, 204, 0.1));
    color: var(--color-primary);
    font-size: 1.6rem;
    margin: 0 auto 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.XoHubSolutions-ImpactCard:hover .XoHubSolutions-ImpactIcon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-purple-light);
    transform: scale(1.08) rotate(5deg);
}

.XoHubSolutions-ImpactNumber {
    font-size: 3.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 8px;
}

.XoHubSolutions-AnimatedCounter {
    display: inline-block;
}

.XoHubSolutions-CounterSuffix {
    font-size: 2.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-left: 4px;
}

.XoHubSolutions-ImpactLabel {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
}

.XoHubSolutions-ImpactDescription {
    font-size: 0.8125rem;
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   PART 3: OUR SERVICES
   ============================================================ */
.services-section {
    padding: 80px 0;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-gray-light);
}

.services-section__header {
    text-align: center;
    margin-bottom: 56px;
}

.services__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-full);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: 16px;
    transition: var(--transition-smooth);
}

.services__badge i {
    font-size: 0.75rem;
}

.services__title {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    line-height: 1.2;
}

.services__subtitle {
    font-size: 1.0625rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ==================== SERVICE CARD ==================== */
.service-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-lg);
    padding: 32px 28px;
    transition: var(--transition-smooth);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.service-card__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.75rem;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.service-card:hover .service-card__icon {
    transform: scale(1.05) rotate(5deg);
}

.service-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-badge--popular {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: var(--color-white);
}

.service-badge--trending {
    background: linear-gradient(135deg, #10b981, #059669);
    color: var(--color-white);
}

.service-card__title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
    line-height: 1.3;
}

.service-card__description {
    font-size: 0.9375rem;
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.service-card__tech {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-card__tech li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-gray-dark);
    font-weight: var(--font-weight-medium);
}

.service-card__tech i {
    font-size: 0.7rem;
    color: var(--color-primary);
}

.service-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    color: var(--color-primary);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: var(--transition-smooth);
    margin-top: auto;
}

.service-card__button i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.service-card__button:hover {
    background: var(--color-primary);
    color: var(--color-purple-dark);
}

.service-card__button:hover i {
    transform: translateX(4px);
}

.service-card:hover .service-card__button {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(129, 199, 82, 0.2);
}

/* ==================== XoHubSolutions SERVICES CTA ==================== */
.XoHubSolutions-ServicesCTA {
    margin-top: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 48px 56px;
    background: linear-gradient(135deg, rgba(129, 199, 82, 0.08), rgba(124, 80, 204, 0.08));
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-lg);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(129, 199, 82, 0.08);
}

.XoHubSolutions-ServicesCTA:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 12px 40px rgba(129, 199, 82, 0.15);
    background: linear-gradient(135deg, rgba(129, 199, 82, 0.12), rgba(124, 80, 204, 0.12));
}

.XoHubSolutions-CTAContent {
    flex: 1;
    text-align: left;
}

.XoHubSolutions-CTATitle {
    font-size: 2.125rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 10px 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.XoHubSolutions-CTADescription {
    font-size: 1.0625rem;
    color: var(--color-gray-mid);
    margin: 0;
    max-width: 48ch;
    line-height: 1.6;
}

.XoHubSolutions-PrimaryCTA {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-purple-dark);
    font-size: 1.0625rem;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    border: 2px solid transparent;
    box-shadow: 0 8px 28px rgba(129, 199, 82, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 240px;
    flex-shrink: 0;
}

.XoHubSolutions-PrimaryCTA::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
}

.XoHubSolutions-PrimaryCTA:hover::before {
    left: 100%;
}

.XoHubSolutions-PrimaryCTA:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(129, 199, 82, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.XoHubSolutions-PrimaryCTA:active {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(129, 199, 82, 0.35), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.XoHubSolutions-PrimaryCTA:focus {
    outline: 3px solid rgba(129, 199, 82, 0.5);
    outline-offset: 4px;
}

.XoHubSolutions-CTAText {
    position: relative;
    z-index: 1;
}

.XoHubSolutions-CTAIcon {
    font-size: 0.875rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.XoHubSolutions-PrimaryCTA:hover .XoHubSolutions-CTAIcon {
    transform: translateX(6px);
}

/* ============================================================
   PART 4: FEATURES
   ============================================================ */
.features-section {
    text-align: center;
    padding: 60px 0 20px;
}

.features__title {
    font-size: 2.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.features__subtitle {
    font-size: 1rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    max-width: 48ch;
    margin: 0 auto 48px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 32px 24px 28px;
    text-align: left;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-glass);
    position: relative;
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-purple-light);
    box-shadow: var(--shadow-card-hover);
}

.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(192, 227, 74, 0.12);
    color: var(--color-lime-dark);
    font-size: 1.2rem;
    margin-bottom: 16px;
    transition: var(--transition-smooth);
}

.feature-card:hover .feature-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.05) rotate(-3deg);
}

.feature-card__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

.feature-card__description {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

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

/* Fade Up */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Float Cards */
@keyframes floatCard {

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

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

/* Orbit Spin */
@keyframes orbitSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Node Pulse */
@keyframes nodePulse {

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

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

/* Glow Pulse */
@keyframes pulseGlow {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }

    100% {
        opacity: 0.4;
        transform: scale(1.1);
    }
}

/* ============================================================
   FOCUS STATES — Accessibility
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 2px;
}

/* ============================================================
   UTILITY HELPERS
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* ============================================================
   SERVICES SECTION — Phase 4
   ============================================================ */
#services {
    padding: 100px 0 80px;
    background: var(--color-white);
    position: relative;
}

/* ----- Section Header ----- */
.services__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.services__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.services__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.services__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.services__subtitle {
    font-size: 1.05rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
}

/* ----- Services Grid ----- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1140px;
    margin: 0 auto;
}

/* ----- Service Card ----- */
.service-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

/* Subtle gradient border on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(124, 58, 237, 0.15);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.08), 0 8px 24px rgba(192, 227, 74, 0.06);
}

.service-card:hover::before {
    opacity: 1;
}

/* ----- Card Icon ----- */
.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.4rem;
    margin-bottom: 18px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.service-card:hover .service-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.08);
}

/* ----- Card Title ----- */
.service-card__title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 10px;
}

/* ----- Card Description ----- */
.service-card__description {
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 18px;
}

/* ----- Card Link ----- */
.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    transition: all 0.3s ease;
    text-decoration: none;
    width: fit-content;
}

.service-card__link i {
    font-size: 0.65rem;
    transition: transform 0.3s ease;
}

.service-card__link:hover {
    color: var(--color-purple-dark);
}

.service-card__link:hover i {
    transform: translateX(4px);
}

/* Focus state for accessibility */
.service-card__link:focus-visible {
    outline: 2px solid var(--color-lime);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ============================================================
   WHY CHOOSE US SECTION — Phase 5
   ============================================================ */
#why-choose-us {
    padding: 100px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.why-choose-us__inner {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ----- Section Header (Right Side) ----- */
.why-choose-us__content {
    flex: 1 1 55%;
}

.why-choose-us__header {
    margin-bottom: 40px;
}

.why-choose-us__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.why-choose-us__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.why-choose-us__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.why-choose-us__subtitle {
    font-size: 1.05rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
    max-width: 52ch;
}

/* ----- Feature Grid ----- */
.why-choose-us__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

/* ----- Feature Card ----- */
.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px 20px 20px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    box-shadow: var(--shadow-glass);
}

/* Left accent border */
.feature-card::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    bottom: 16px;
    width: 3px;
    background: var(--color-lime);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.12);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06), 0 4px 16px rgba(192, 227, 74, 0.06);
}

.feature-card:hover::before {
    opacity: 1;
}

/* ----- Feature Card Icon ----- */
.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.1rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover .feature-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* ----- Feature Card Content ----- */
.feature-card__content {
    flex: 1;
    min-width: 0;
}

.feature-card__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 4px;
}

.feature-card__description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   Left Column — Premium Illustration
   ============================================================ */
.why-choose-us__visual {
    flex: 1 1 45%;
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Network Container ----- */
.network-container {
    position: relative;
    width: 380px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Orbiting rings */
.network-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, 0.08);
}

.network-ring--1 {
    width: 320px;
    height: 320px;
    animation: orbitSpin 25s linear infinite;
    border-color: rgba(124, 58, 237, 0.06);
}

.network-ring--2 {
    width: 240px;
    height: 240px;
    animation: orbitSpin 18s linear infinite reverse;
    border-color: rgba(192, 227, 74, 0.08);
}

.network-ring--3 {
    width: 160px;
    height: 160px;
    animation: orbitSpin 12s linear infinite;
    border-color: rgba(124, 58, 237, 0.04);
    border-width: 1px;
}

/* ----- Network Center ----- */
.network-center {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.network-center__glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 227, 74, 0.15) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
}

.network-center__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.5rem;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3);
    z-index: 2;
}

/* ----- Network Nodes ----- */
.network-node {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple);
    font-size: 0.95rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.4s ease;
    z-index: 3;
    animation: floatNode 4s ease-in-out infinite;
}

.network-node:hover {
    transform: scale(1.12);
    border-color: var(--color-lime);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.15);
}

/* Node positions */
.network-node--1 {
    top: 5%;
    right: 5%;
    animation-delay: 0s;
}

.network-node--2 {
    bottom: 5%;
    right: 20%;
    animation-delay: 0.6s;
}

.network-node--3 {
    bottom: 30%;
    left: 0%;
    animation-delay: 1.2s;
}

.network-node--4 {
    top: 20%;
    left: 2%;
    animation-delay: 1.8s;
}

.network-node--5 {
    top: 40%;
    right: 0%;
    animation-delay: 2.4s;
}

.network-node--6 {
    bottom: 10%;
    left: 25%;
    animation-delay: 3s;
}

/* Network lines SVG */
.network-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ----- Floating Cards in Illustration ----- */
.why-choose-us__visual .floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: floatCard 4s ease-in-out infinite;
    z-index: 4;
    min-width: 120px;
}

.why-choose-us__visual .floating-card .card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.why-choose-us__visual .floating-card .card-content h4 {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.why-choose-us__visual .floating-card .card-content p {
    font-size: 0.6rem;
    color: var(--color-gray-mid);
    margin: 0;
}

.floating-card--ai {
    top: 2%;
    right: 10%;
    animation-delay: 0s;
}

.floating-card--secure {
    bottom: 8%;
    left: 5%;
    animation-delay: 1.5s;
}

.floating-card--cloud {
    bottom: 25%;
    right: 2%;
    animation-delay: 0.8s;
}

/* ============================================================
   FEATURED PRODUCTS SECTION — Phase 6
   ============================================================ */
#featured-products {
    padding: 100px 0 80px;
    background: var(--color-white);
    position: relative;
}

/* ----- Section Header ----- */
.featured-products__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.featured-products__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.featured-products__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.featured-products__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.featured-products__subtitle {
    font-size: 1.05rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
}

/* ----- Products Grid ----- */
.featured-products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1140px;
    margin: 0 auto;
}

/* ----- Product Card ----- */
.product-card {
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 32px 26px 28px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(124, 58, 237, 0.12);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.06), 0 8px 24px rgba(192, 227, 74, 0.05);
}

/* ----- Featured Product Card ----- */
.product-card--featured {
    border-color: var(--color-lime);
    background: linear-gradient(145deg, var(--color-white), var(--color-off-white));
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.08), var(--shadow-glass);
}

.product-card--featured::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(192, 227, 74, 0.2), rgba(124, 58, 237, 0.1));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.product-card--featured:hover::after {
    opacity: 1;
}

.product-card--featured .product-card__link {
    color: var(--color-lime-dark);
}

.product-card--featured .product-card__link:hover {
    color: var(--color-purple);
}

/* ----- Featured Badge ----- */
.product-card__badge--featured {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px 3px 10px;
    background: rgba(192, 227, 74, 0.15);
    border: 1px solid rgba(192, 227, 74, 0.2);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-dark);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 12px;
    width: fit-content;
}

/* ----- Product Card Icon ----- */
.product-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.4rem;
    margin-bottom: 14px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.product-card:hover .product-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.08) rotate(-3deg);
}

/* ----- Product Category ----- */
.product-card__category {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

/* ----- Product Title ----- */
.product-card__title {
    font-size: 1.15rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

/* ----- Product Description ----- */
.product-card__description {
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 16px;
}

/* ----- Product Features ----- */
.product-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-card__features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
}

.product-card__features li i {
    font-size: 0.6rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

/* ----- Product Card Link ----- */
.product-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    transition: all 0.3s ease;
    text-decoration: none;
    width: fit-content;
    margin-top: auto;
}

.product-card__link i {
    font-size: 0.65rem;
    transition: transform 0.3s ease;
}

.product-card__link:hover {
    color: var(--color-purple-dark);
}

.product-card__link:hover i {
    transform: translateX(4px);
}

/* Focus state for accessibility */
.product-card__link:focus-visible {
    outline: 2px solid var(--color-lime);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ============================================================
   DEVELOPMENT PROCESS SECTION — Phase 7
   ============================================================ */
#development-process {
    padding: 100px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Section Header ----- */
.development-process__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.development-process__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.development-process__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.development-process__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.development-process__subtitle {
    font-size: 1.05rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
}

/* ----- Process Timeline ----- */
.process-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 20px;
}

/* ----- Timeline Progress Line ----- */
.process-timeline__line {
    position: absolute;
    top: 62px;
    left: 60px;
    right: 60px;
    height: 3px;
    background: var(--color-gray-light);
    border-radius: 4px;
    z-index: 1;
    overflow: hidden;
}

.process-timeline__line-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 4px;
    transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.process-timeline__line-fill.animated {
    width: 100%;
}

/* ----- Process Step ----- */
.process-step {
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* ----- Step Connector (visible dot on timeline) ----- */
.process-step__connector {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-gray-light);
    position: relative;
    z-index: 3;
    margin-bottom: 20px;
    transition: all 0.6s ease;
    flex-shrink: 0;
}

.process-step.active .process-step__connector {
    border-color: var(--color-lime);
    background: var(--color-lime);
    box-shadow: 0 0 0 6px rgba(192, 227, 74, 0.2);
}

/* ----- Step Card ----- */
.process-step__card {
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 24px 18px 22px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    width: 100%;
    position: relative;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process-step__card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.12);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06), 0 4px 16px rgba(192, 227, 74, 0.05);
}

/* Subtle top accent gradient on hover */
.process-step__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 0 0 4px 4px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-step__card:hover::before {
    opacity: 1;
}

/* ----- Step Number ----- */
.process-step__number {
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    opacity: 0.6;
    transition: all 0.4s ease;
}

.process-step__card:hover .process-step__number {
    opacity: 1;
    transform: scale(1.05);
}

/* ----- Step Icon ----- */
.process-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.2rem;
    margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.process-step__card:hover .process-step__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.08);
}

/* ----- Step Title ----- */
.process-step__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 6px;
    line-height: 1.3;
}

/* ----- Step Description ----- */
.process-step__description {
    font-size: 0.8rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

/* ----- Active Step Highlight ----- */
.process-step.active .process-step__card {
    border-color: rgba(192, 227, 74, 0.3);
    background: linear-gradient(145deg, var(--color-white), var(--color-off-white));
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.06);
}

.process-step.active .process-step__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.process-step.active .process-step__number {
    color: var(--color-lime-dark);
    opacity: 1;
}

/* ============================================================
   TECHNOLOGIES WE USE SECTION — Phase 8
   ============================================================ */
#technologies {
    padding: 100px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Section Header ----- */
.technologies-section__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.technologies-section__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.technologies-section__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.technologies-section__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.technologies-section__subtitle {
    font-size: 1.05rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
}

/* ----- Technology Categories Grid ----- */
.tech-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1140px;
    margin: 0 auto 60px;
}

/* ----- Category Card ----- */
.tech-category {
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 24px 22px 28px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
}

.tech-category:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.12);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* Category Header */
.tech-category__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.tech-category__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.tech-category:hover .tech-category__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.tech-category__info {
    flex: 1;
    min-width: 0;
}

.tech-category__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.tech-category__description {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ----- Technology Badges ----- */
.tech-category__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.tech-badge svg {
    flex-shrink: 0;
}

.tech-badge:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: var(--color-lime);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.12);
    background: var(--color-white);
}

/* ----- Technology Statistics ----- */
.tech-stats {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid var(--color-gray-light);
}

.tech-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.tech-stat {
    text-align: center;
    padding: 16px 12px;
}

.tech-stat__number {
    font-size: 2.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 4px;
}

.tech-stat__count {
    display: inline-block;
}

.tech-stat__suffix {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.tech-stat__label {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   INDUSTRIES WE SERVE SECTION — Phase 9
   ============================================================ */
#industries {
    padding: 100px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Section Header ----- */
.industries-section__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.industries-section__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.industries-section__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.industries-section__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.industries-section__subtitle {
    font-size: 1.05rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
}

/* ----- Industries Grid ----- */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1140px;
    margin: 0 auto;
}

/* ----- Industry Card ----- */
.industry-card {
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 32px 24px 28px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    min-height: 260px;
}

/* Gradient border on hover */
.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.industry-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.12);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06), 0 4px 16px rgba(192, 227, 74, 0.05);
}

.industry-card:hover::before {
    opacity: 1;
}

/* ----- Featured Card ----- */
.industry-card--featured {
    background: linear-gradient(145deg, var(--color-white), var(--color-off-white));
    border-color: rgba(192, 227, 74, 0.3);
}

.industry-card--featured::after {
    content: '★';
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 0.7rem;
    color: var(--color-lime);
    opacity: 0.5;
}

/* ----- Card Icon ----- */
.industry-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.4rem;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.industry-card:hover .industry-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.08) rotate(-3deg);
}

/* ----- Card Title ----- */
.industry-card__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

/* ----- Card Description ----- */
.industry-card__description {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 16px;
}

/* ----- Card Link ----- */
.industry-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    transition: all 0.3s ease;
    text-decoration: none;
    width: fit-content;
    margin-top: auto;
}

.industry-card__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.industry-card__link:hover {
    color: var(--color-purple-dark);
}

.industry-card__link:hover i {
    transform: translateX(4px);
}

/* ----- Card Footer (Reveal on Hover) ----- */
.industry-card__footer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 0;
    margin-top: 0;
}

.industry-card:hover .industry-card__footer {
    max-height: 60px;
    opacity: 1;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid var(--color-gray-light);
}

.industry-card__footer span {
    display: inline-block;
    padding: 2px 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.industry-card__footer span:hover {
    background: var(--color-lime);
    border-color: var(--color-lime);
    color: var(--color-charcoal);
}

/* Focus state for accessibility */
.industry-card__link:focus-visible {
    outline: 2px solid var(--color-lime);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ============================================================
   PORTFOLIO / CASE STUDIES SECTION — Phase 10
   ============================================================ */
#portfolio {
    padding: 100px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Section Header ----- */
.portfolio-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 48px;
}

.portfolio-section__header-left {
    flex: 1;
    max-width: 720px;
}

.portfolio-section__header-right {
    flex-shrink: 0;
    padding-top: 12px;
}

.portfolio-section__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.portfolio-section__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.portfolio-section__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.portfolio-section__subtitle {
    font-size: 1.05rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
}

/* ----- Header Button ----- */
.btn-portfolio-header {
    padding: 12px 28px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.btn-portfolio-header:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ----- Portfolio Grid ----- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1140px;
    margin: 0 auto 56px;
}

/* ----- Portfolio Card ----- */
.portfolio-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
}

.portfolio-card:hover {
    transform: translateY(-8px);
    border-color: rgba(124, 58, 237, 0.12);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.08);
}

/* ----- Card Image / Placeholder ----- */
.portfolio-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--color-off-white);
}

.portfolio-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s ease;
}

.portfolio-card:hover .portfolio-card__placeholder {
    transform: scale(1.04);
}

/* Placeholder variations */
.portfolio-card__placeholder--1 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}

.portfolio-card__placeholder--2 {
    background: linear-gradient(135deg, #0D4A6B, #0EA5E9);
}

.portfolio-card__placeholder--3 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}

.portfolio-card__placeholder--4 {
    background: linear-gradient(135deg, #4A1A2A, #F472B6);
}

.portfolio-card__placeholder--5 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}

.portfolio-card__placeholder--6 {
    background: linear-gradient(135deg, #1A1A1A, #10A37F);
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.placeholder-content i {
    font-size: 2.8rem;
    opacity: 0.8;
}

.placeholder-content span {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Placeholder decorative shapes */
.placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.shape--1 {
    width: 120px;
    height: 120px;
    top: -30px;
    right: -30px;
}

.shape--2 {
    width: 80px;
    height: 80px;
    bottom: 20px;
    left: 20px;
}

.shape--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Featured badge on image */
.featured-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
}

/* ----- Card Overlay ----- */
.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 46, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.portfolio-card:hover .portfolio-card__overlay {
    opacity: 1;
}

.overlay-icon {
    font-size: 2rem;
    color: var(--color-white);
    opacity: 0.8;
}

.overlay-text {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    letter-spacing: 0.02em;
}

.overlay-tech {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.03em;
}

/* ----- Card Content ----- */
.portfolio-card__content {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.portfolio-card__category {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.portfolio-card__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 6px;
}

.portfolio-card__description {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 12px;
}

/* ----- Technology Badges ----- */
.portfolio-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.portfolio-card__tech span {
    padding: 2px 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ----- Card Link ----- */
.portfolio-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    transition: all 0.3s ease;
    text-decoration: none;
    width: fit-content;
    margin-top: auto;
}

.portfolio-card__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.portfolio-card__link:hover {
    color: var(--color-purple-dark);
}

.portfolio-card__link:hover i {
    transform: translateX(4px);
}

/* Featured card highlight */
.portfolio-card--featured {
    border-color: rgba(192, 227, 74, 0.3);
}

/* ----- Bottom CTA ----- */
.portfolio-cta {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid var(--color-gray-light);
}

.portfolio-cta__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

.portfolio-cta__description {
    font-size: 0.95rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    margin-bottom: 24px;
}

.portfolio-cta__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-portfolio-cta {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.btn-portfolio-cta:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-portfolio-cta-secondary {
    padding: 14px 36px;
    font-size: 0.95rem;
}

/* Focus states */
.portfolio-card__link:focus-visible,
.btn-portfolio-header:focus-visible,
.btn-portfolio-cta:focus-visible,
.btn-portfolio-cta-secondary:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ============================================================
   CLIENT TESTIMONIALS SECTION — Phase 11
   ============================================================ */
#testimonials {
    padding: 100px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Section Header ----- */
.testimonials-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 48px;
}

.testimonials-section__header-left {
    flex: 1;
    max-width: 720px;
}

.testimonials-section__header-right {
    flex-shrink: 0;
    padding-top: 12px;
}

.testimonials-section__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.testimonials-section__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.testimonials-section__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.testimonials-section__subtitle {
    font-size: 1.05rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
}

/* ----- Header Button ----- */
.btn-testimonials-header {
    padding: 12px 28px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.btn-testimonials-header:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ----- Testimonials Grid ----- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1140px;
    margin: 0 auto 48px;
}

/* ----- Testimonial Card ----- */
.testimonial-card {
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.12);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06), 0 4px 16px rgba(192, 227, 74, 0.05);
}

.testimonial-card:hover::before {
    opacity: 1;
}

/* ----- Card Header ----- */
.testimonial-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

/* ----- Avatar ----- */
.testimonial-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.testimonial-card:hover .testimonial-card__avatar {
    transform: scale(1.05);
}

.testimonial-card__avatar--1 {
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
}

.testimonial-card__avatar--2 {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
}

.testimonial-card__avatar--3 {
    background: linear-gradient(135deg, #34D399, #059669);
}

/* ----- Client Info ----- */
.testimonial-card__client {
    flex: 1;
    min-width: 0;
}

.testimonial-card__name {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.testimonial-card__position {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ----- Rating ----- */
.testimonial-card__rating {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}

.testimonial-card__rating i {
    color: #F59E0B;
    font-size: 0.85rem;
}

/* ----- Quote Icon ----- */
.testimonial-card__quote {
    margin-bottom: 12px;
}

.testimonial-card__quote i {
    font-size: 1.4rem;
    color: var(--color-lime);
    opacity: 0.4;
    transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-card__quote i {
    opacity: 0.8;
    transform: scale(1.05);
}

/* ----- Review Text ----- */
.testimonial-card__review {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

/* ============================================================
   TRUST INDICATORS
   ============================================================ */
.trust-indicators {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 32px 0 28px;
    border-top: 1px solid var(--color-gray-light);
    border-bottom: 1px solid var(--color-gray-light);
}

.trust-indicators__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.trust-indicator {
    text-align: center;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.trust-indicator:hover {
    transform: translateY(-3px);
}

.trust-indicator__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 1.1rem;
    margin-bottom: 8px;
    transition: all 0.4s ease;
}

.trust-indicator:hover .trust-indicator__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.trust-indicator__number {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.trust-indicator__label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.testimonials-cta {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding-top: 8px;
}

.testimonials-cta__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

.testimonials-cta__description {
    font-size: 0.95rem;
    color: var(--color-gray-mid);
    font-weight: var(--font-weight-regular);
    margin-bottom: 24px;
}

.testimonials-cta__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-testimonials-cta {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.btn-testimonials-cta:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-testimonials-cta-secondary {
    padding: 14px 36px;
    font-size: 0.95rem;
}

/* Focus states */
.testimonial-card__link:focus-visible,
.btn-testimonials-header:focus-visible,
.btn-testimonials-cta:focus-visible,
.btn-testimonials-cta-secondary:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ============================================================
   CALL TO ACTION (CTA) SECTION — Phase 12
   ============================================================ */
#cta {
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
    background: var(--color-white);
}

/* ----- Background Decorations ----- */
.cta-section__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* Glow orbs */
.cta-bg__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    pointer-events: none;
}

.cta-bg__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.12;
}

.cta-bg__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.10;
}

.cta-bg__glow--3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 30%;
    background: var(--color-purple);
    opacity: 0.06;
}

.cta-bg__glow--4 {
    width: 250px;
    height: 250px;
    bottom: 20%;
    right: 30%;
    background: var(--color-lime);
    opacity: 0.08;
}

/* Floating orbs (animated) */
.cta-bg__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
}

.cta-bg__orb--1 {
    width: 80px;
    height: 80px;
    top: 15%;
    left: 10%;
    animation: floatOrb 8s ease-in-out infinite;
}

.cta-bg__orb--2 {
    width: 120px;
    height: 120px;
    bottom: 25%;
    right: 15%;
    animation: floatOrb 10s ease-in-out infinite reverse;
}

.cta-bg__orb--3 {
    width: 60px;
    height: 60px;
    top: 55%;
    left: 65%;
    animation: floatOrb 6s ease-in-out infinite 1s;
}

/* Decorative shapes */
.cta-bg__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.02);
    border: 1px solid rgba(192, 227, 74, 0.03);
}

.cta-bg__shape--1 {
    width: 200px;
    height: 200px;
    top: 10%;
    right: 25%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.cta-bg__shape--2 {
    width: 150px;
    height: 150px;
    bottom: 15%;
    left: 20%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.cta-bg__shape--3 {
    width: 100px;
    height: 100px;
    top: 35%;
    right: 8%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

/* Grid lines SVG */
.cta-bg__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    pointer-events: none;
}

/* ----- Container ----- */
.cta-section__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ----- Left Column ----- */
.cta-section__content {
    flex: 1 1 55%;
    max-width: 620px;
}

.cta-section__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.cta-section__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.cta-section__title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
}

.cta-section__description {
    font-size: 1.1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 48ch;
}

/* ----- Benefits ----- */
.cta-section__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cta-section__benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-lime);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.benefit-text {
    line-height: 1.4;
}

/* ----- Buttons ----- */
.cta-section__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-cta-primary {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-cta-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

.btn-cta-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-cta-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-cta-secondary i {
    transition: transform 0.3s ease;
}

.btn-cta-secondary:hover i {
    transform: translateX(4px);
}

/* ============================================================
   Right Column: Floating CTA Card
   ============================================================ */
.cta-section__card-wrapper {
    flex: 1 1 45%;
    display: flex;
    justify-content: flex-end;
}

.cta-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 36px 32px 32px;
    box-shadow: 0 32px 80px rgba(26, 26, 46, 0.08), 0 8px 32px rgba(124, 58, 237, 0.04);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: floatCard 5s ease-in-out infinite;
}

.cta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 100px rgba(26, 26, 46, 0.12), 0 8px 32px rgba(124, 58, 237, 0.06);
}

/* Card glow effect */
.cta-card__glow {
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(192, 227, 74, 0.15), rgba(124, 58, 237, 0.10));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.cta-card:hover .cta-card__glow {
    opacity: 1;
}

/* ----- Card Header ----- */
.cta-card__header {
    text-align: center;
    margin-bottom: 24px;
}

.cta-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    color: var(--color-white);
    font-size: 1.4rem;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);
}

.cta-card__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

.cta-card__description {
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

/* ----- Card Features ----- */
.cta-card__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--color-gray-light);
    border-bottom: 1px solid var(--color-gray-light);
}

.cta-card__feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.cta-card__feature:hover .feature-icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.feature-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feature-label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.feature-value {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

/* ----- Card Button ----- */
.cta-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 28px;
    background: var(--color-purple);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25);
}

.cta-card__button:hover {
    background: var(--color-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.35);
}

.cta-card__button i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.cta-card__button:hover i {
    transform: translateX(4px);
}

/* Focus states */
.cta-card__button:focus-visible,
.btn-cta-primary:focus-visible,
.btn-cta-secondary:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ============================================================
   KEYFRAMES — CTA Animations
   ============================================================ */
@keyframes floatOrb {

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

    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

/* ============================================================
   PREMIUM FOOTER — Phase 13 (Final)
   ============================================================ */
.main-footer {
    position: relative;
    background: linear-gradient(180deg, #0F0E17, #1A1A2E, #16213E);
    color: rgba(255, 255, 255, 0.8);
    padding: 60px 0 0;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.footer__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.footer-bg__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    pointer-events: none;
}

.footer-bg__glow--1 {
    width: 500px;
    height: 500px;
    top: -200px;
    left: -100px;
    background: var(--color-purple);
    opacity: 0.10;
}

.footer-bg__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -150px;
    right: -50px;
    background: var(--color-lime);
    opacity: 0.08;
}

.footer-bg__glow--3 {
    width: 300px;
    height: 300px;
    top: 30%;
    right: 30%;
    background: var(--color-purple);
    opacity: 0.05;
}

.footer-bg__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.04);
}

.footer-bg__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 20%;
    animation: floatOrb 8s ease-in-out infinite;
}

.footer-bg__orb--2 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 15%;
    animation: floatOrb 10s ease-in-out infinite reverse;
}

.footer-bg__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.02);
    border: 1px solid rgba(192, 227, 74, 0.02);
}

.footer-bg__shape--1 {
    width: 180px;
    height: 180px;
    top: 15%;
    left: 40%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.footer-bg__shape--2 {
    width: 120px;
    height: 120px;
    bottom: 10%;
    right: 25%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.footer-bg__shape--3 {
    width: 80px;
    height: 80px;
    top: 45%;
    left: 10%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.footer-bg__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

/* ----- Container ----- */
.footer__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   TOP FOOTER
   ============================================================ */
.footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.5fr;
    gap: 32px 24px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ----- Brand Column ----- */
.footer__column--brand {
    grid-column: span 1;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 12px;
}

.footer__logo-image {
    width: 80%;
    height: 80%;
    border-radius: 12px;
    flex-shrink: 0;
    display: block;
}

.footer__logo-text {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    letter-spacing: -0.02em;
}

.footer__logo-highlight {
    color: var(--color-purple);
}

.footer__tagline {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.footer__description {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    max-width: 32ch;
    margin: 0;
}

/* ----- Footer Columns ----- */
.footer__column-title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin: 0 0 14px 0;
    letter-spacing: 0.02em;
}

.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__links li a {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.footer__links li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    transition: width 0.3s ease;
}

.footer__links li a:hover {
    color: var(--color-white);
}

.footer__links li a:hover::after {
    width: 100%;
}

/* ----- Contact Column ----- */
.footer__contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.footer__contact-list li a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer__contact-list li a:hover {
    color: var(--color-lime);
}

.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-lime);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ----- Social Icons ----- */
.footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.social-link:hover {
    transform: translateY(-4px) scale(1.05);
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
}

.social-link:nth-child(1):hover {
    background: #1877F2;
    border-color: #1877F2;
}

.social-link:nth-child(2):hover {
    background: #E4405F;
    border-color: #E4405F;
}

.social-link:nth-child(3):hover {
    background: #0A66C2;
    border-color: #0A66C2;
}

.social-link:nth-child(4):hover {
    background: #181717;
    border-color: #181717;
}

.social-link:nth-child(5):hover {
    background: #FF0000;
    border-color: #FF0000;
}

.social-link:nth-child(6):hover {
    background: #000000;
    border-color: #000000;
}

.social-link:nth-child(7):hover {
    background: #1769FF;
    border-color: #1769FF;
}

.social-link:nth-child(8):hover {
    background: #EA4C89;
    border-color: #EA4C89;
}

/* ============================================================
   NEWSLETTER & TRUST BADGES
   ============================================================ */
.footer__newsletter {
    padding: 40px 0 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.newsletter__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.newsletter__header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 280px;
}

.newsletter__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(192, 227, 74, 0.1);
    color: var(--color-lime);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.newsletter__title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin: 0 0 2px 0;
}

.newsletter__description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.5;
}

/* ----- Newsletter Form ----- */
.newsletter__form {
    flex: 1;
    min-width: 280px;
    max-width: 460px;
}

.newsletter__input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    padding: 4px 4px 4px 18px;
    transition: all 0.3s ease;
}

.newsletter__input-group:focus-within {
    border-color: var(--color-lime);
    box-shadow: 0 0 0 4px rgba(192, 227, 74, 0.06);
}

.newsletter__input {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-white);
    min-width: 0;
}

.newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.newsletter__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    flex-shrink: 0;
}

.newsletter__button:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.3);
}

.newsletter__button i {
    font-size: 0.65rem;
    transition: transform 0.3s ease;
}

.newsletter__button:hover i {
    transform: translateX(4px);
}

/* Form validation states */
.newsletter__error,
.newsletter__success {
    display: none;
    font-size: 0.75rem;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 8px;
}

.newsletter__error {
    color: #F87171;
    background: rgba(248, 113, 113, 0.08);
}

.newsletter__success {
    color: #34D399;
    background: rgba(52, 211, 153, 0.08);
}

.newsletter__error.visible,
.newsletter__success.visible {
    display: block;
}

/* ----- Trust Badges ----- */
.footer__trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.5);
}

.trust-badge__icon {
    color: var(--color-lime);
    font-size: 0.85rem;
}

.trust-badge__text {
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   BOTTOM FOOTER
   ============================================================ */
.footer__bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 16px 0;
    margin-top: 0;
}

.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer__copyright p,
.footer__credit p {
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

.credit-heart {
    color: #EF4444;
    display: inline-block;
    animation: heartBeat 1.5s ease-in-out infinite;
}

.footer__bottom-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer__bottom-links a {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer__bottom-links a:hover {
    color: var(--color-lime);
}

.footer__bottom-divider {
    color: rgba(255, 255, 255, 0.1);
    font-size: 0.6rem;
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-lime);
    color: var(--color-charcoal);
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top:hover {
    background: var(--color-lime-dark);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.back-to-top:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ============================================================
   KEYFRAMES — Footer Animations
   ============================================================ */
@keyframes heartBeat {

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

    50% {
        transform: scale(1.2);
    }
}

/* ============================================================
   ABOUT HERO — About Us Page (Phase 1)
   ============================================================ */
#about-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--top-bar-height) + var(--nav-height) + 40px) 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.about-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.about-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.2;
    pointer-events: none;
}

.about-hero__glow--1 {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.08;
}

.about-hero__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -150px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.06;
}

.about-hero__glow--3 {
    width: 300px;
    height: 300px;
    top: 30%;
    left: 40%;
    background: var(--color-purple);
    opacity: 0.04;
}

.about-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.04);
}

.about-hero__orb--1 {
    width: 120px;
    height: 120px;
    top: 10%;
    right: 20%;
    animation: floatOrb 8s ease-in-out infinite;
}

.about-hero__orb--2 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 30%;
    animation: floatOrb 6s ease-in-out infinite reverse;
}

.about-hero__orb--3 {
    width: 60px;
    height: 60px;
    top: 55%;
    right: 35%;
    animation: floatOrb 7s ease-in-out infinite 1s;
}

.about-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.02);
    border: 1px solid rgba(192, 227, 74, 0.02);
}

.about-hero__shape--1 {
    width: 180px;
    height: 180px;
    top: 15%;
    left: 15%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.about-hero__shape--2 {
    width: 130px;
    height: 130px;
    bottom: 10%;
    right: 20%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.about-hero__shape--3 {
    width: 100px;
    height: 100px;
    top: 40%;
    right: 5%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.about-hero__shape--4 {
    width: 70px;
    height: 70px;
    bottom: 35%;
    left: 5%;
    border-radius: 50% 50% 30% 70% / 50% 50% 70% 30%;
}

.about-hero__circuit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    pointer-events: none;
}

.about-hero__hexagons {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    pointer-events: none;
}

/* ----- Container ----- */
.about-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ============================================================
   LEFT COLUMN — Content
   ============================================================ */
.about-hero__content {
    flex: 1 1 55%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.about-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.about-hero__title {
    font-size: 3.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.about-hero__title .highlight-lime {
    position: relative;
    display: inline-block;
}

.about-hero__title .highlight-lime::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(192, 227, 74, 0.25);
    border-radius: 4px;
    z-index: -1;
}

.about-hero__description {
    font-size: 1.1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 46ch;
    margin: 0;
}

/* ----- Buttons ----- */
.about-hero__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-about-primary {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-about-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

.btn-about-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-about-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-about-secondary i {
    transition: transform 0.3s ease;
}

.btn-about-secondary:hover i {
    transform: translateX(4px);
}

/* ----- Breadcrumb ----- */
.about-hero__breadcrumb {
    margin-top: 8px;
}

.about-hero__breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-hero__breadcrumb li {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.about-hero__breadcrumb li a {
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: color 0.3s ease;
}

.about-hero__breadcrumb li a:hover {
    color: var(--color-purple);
}

.about-hero__breadcrumb li span[aria-current="page"] {
    color: var(--color-charcoal);
    font-weight: var(--font-weight-medium);
}

.breadcrumb-separator {
    color: var(--color-gray-light);
}

/* ============================================================
   RIGHT COLUMN — Premium Visual Composition
   ============================================================ */
.about-hero__visual {
    flex: 1 1 45%;
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Main Glass Card ----- */
.about-visual__card--main {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 24px 28px 20px;
    box-shadow: 0 32px 80px rgba(26, 26, 46, 0.08);
    z-index: 5;
    transition: all 0.4s ease;
}

.about-visual__card--main:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px rgba(26, 26, 46, 0.12);
}

/* Card header with dots */
.visual-card__header {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.visual-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.visual-card__dot--1 {
    background: #F87171;
}

.visual-card__dot--2 {
    background: #FBBF24;
}

.visual-card__dot--3 {
    background: #34D399;
}

/* Card body */
.visual-card__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.visual-card__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.visual-card__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.visual-card__value {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

/* Card footer */
.visual-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--color-gray-light);
}

.visual-card__status {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: #34D399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.visual-card__status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    animation: pulseDot 2s ease-in-out infinite;
}

.visual-card__growth {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-dark);
}

/* ============================================================
   Floating Cards
   ============================================================ */
.about-visual__card--float {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 16px 48px rgba(26, 26, 46, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: floatCard 5s ease-in-out infinite;
}

.about-visual__card--float:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 24px 64px rgba(124, 58, 237, 0.08);
}

/* Chart card */
.about-visual__card--chart {
    top: 5%;
    right: -5%;
    animation-delay: 0s;
    min-width: 140px;
}

/* AI card */
.about-visual__card--ai {
    bottom: 20%;
    left: -8%;
    animation-delay: 1.2s;
}

/* Code card */
.about-visual__card--code {
    bottom: 5%;
    right: 10%;
    animation-delay: 2.4s;
    padding: 12px 16px;
}

/* Cloud card */
.about-visual__card--cloud {
    top: 25%;
    left: -5%;
    animation-delay: 0.6s;
}

/* Float card icon */
.float-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.about-visual__card--float:hover .float-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Float card content */
.float-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.float-card__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.float-card__value {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

/* Chart inside card */
.float-card__chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 32px;
    margin-top: 6px;
}

.chart-bar {
    flex: 1;
    min-width: 12px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--color-lime), var(--color-lime-dark));
    transition: height 0.6s ease;
}

.float-card__chart .chart-bar:nth-child(1) {
    height: 30%;
}

.float-card__chart .chart-bar:nth-child(2) {
    height: 45%;
}

.float-card__chart .chart-bar:nth-child(3) {
    height: 60%;
}

.float-card__chart .chart-bar:nth-child(4) {
    height: 80%;
}

.float-card__chart .chart-bar:nth-child(5) {
    height: 100%;
}

.float-card__chart .chart-bar:nth-child(6) {
    height: 85%;
}

/* Code snippet card */
.float-card__code {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: var(--color-charcoal);
}

.code-line {
    white-space: nowrap;
}

.code-indent {
    padding-left: 12px;
}

.code-keyword {
    color: var(--color-purple);
    font-weight: 600;
}

.code-function {
    color: #0EA5E9;
}

.code-string {
    color: var(--color-lime-dark);
}

/* ----- Center Pulse Orb ----- */
.about-visual__orb {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 227, 74, 0.15) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   KEYFRAMES — About Hero Animations
   ============================================================ */
@keyframes pulseDot {

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

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

/* ============================================================
   WHO WE ARE SECTION — About Us Page (Phase 2)
   ============================================================ */
#who-we-are {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.who-we-are__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.who-we-are__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    pointer-events: none;
}

.who-we-are__glow--1 {
    width: 400px;
    height: 400px;
    top: -150px;
    right: -50px;
    background: var(--color-purple);
    opacity: 0.08;
}

.who-we-are__glow--2 {
    width: 350px;
    height: 350px;
    bottom: -100px;
    left: -50px;
    background: var(--color-lime);
    opacity: 0.06;
}

.who-we-are__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    right: 30%;
    background: var(--color-purple);
    opacity: 0.04;
}

.who-we-are__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.who-we-are__orb--1 {
    width: 100px;
    height: 100px;
    top: 15%;
    right: 15%;
    animation-delay: 0s;
}

.who-we-are__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 25%;
    animation-delay: 2s;
}

.who-we-are__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.02);
    border: 1px solid rgba(192, 227, 74, 0.02);
}

.who-we-are__shape--1 {
    width: 150px;
    height: 150px;
    top: 10%;
    left: 5%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.who-we-are__shape--2 {
    width: 100px;
    height: 100px;
    bottom: 30%;
    right: 5%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.who-we-are__shape--3 {
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.who-we-are__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

/* ----- Container ----- */
.who-we-are__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ============================================================
   LEFT COLUMN — Content
   ============================================================ */
.who-we-are__content {
    flex: 1 1 55%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.who-we-are__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.who-we-are__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.who-we-are__title {
    font-size: 2.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.who-we-are__description {
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0;
}

/* ----- Expertise Grid ----- */
.who-we-are__expertise {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    padding: 4px 0;
}

.expertise-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    word-break: break-word;
}

.expertise-item__icon {
    color: var(--color-lime);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.expertise-item__text {
    line-height: 1.4;
}

/* ----- Vision & Mission ----- */
.who-we-are__vision-mission {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 4px;
}

.vision-mission__item {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.vision-mission__item:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.12);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.vision-mission__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.vision-mission__item:hover .vision-mission__icon {
    background: var(--color-purple);
    color: var(--color-white);
}

.vision-mission__content {
    flex: 1;
    min-width: 0;
}

.vision-mission__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 2px 0;
}

.vision-mission__text {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   RIGHT COLUMN — Premium Visual Composition
   ============================================================ */
.who-we-are__visual {
    flex: 1 1 45%;
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Main Glass Dashboard Card ----- */
.who-visual__card--main {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 22px 24px 20px;
    box-shadow: 0 32px 80px rgba(26, 26, 46, 0.08);
    z-index: 5;
    transition: all 0.4s ease;
}

.who-visual__card--main:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px rgba(26, 26, 46, 0.12);
}

/* Card Header */
.who-visual__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.who-visual__card-dots {
    display: flex;
    gap: 5px;
}

.who-visual__card-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gray-light);
}

.who-visual__card-dots .dot:nth-child(1) {
    background: #F87171;
}

.who-visual__card-dots .dot:nth-child(2) {
    background: #FBBF24;
}

.who-visual__card-dots .dot:nth-child(3) {
    background: #34D399;
}

.who-visual__card-title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    letter-spacing: 0.03em;
}

/* Stats Row */
.who-visual__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray-light);
}

.who-visual__stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

.stat-label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Growth Chart */
.who-visual__chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 60px;
    padding: 6px 0;
}

.who-visual__chart .chart-bar {
    flex: 1;
    min-width: 10px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--color-lime), var(--color-lime-dark));
    transition: height 0.6s ease;
}

/* Card Footer */
.who-visual__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--color-gray-light);
}

.growth-indicator {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-dark);
}

.active-status {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: #34D399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.active-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    animation: pulseDot 2s ease-in-out infinite;
}

/* ============================================================
   Floating Cards
   ============================================================ */
.who-visual__card--float {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 16px 48px rgba(26, 26, 46, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: floatCard 5s ease-in-out infinite;
    max-width: 180px;
}

.who-visual__card--float:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 24px 64px rgba(124, 58, 237, 0.08);
}

/* Individual Float Cards */
.who-visual__card--innovation {
    top: 5%;
    right: 0%;
    animation-delay: 0s;
}

.who-visual__card--secure {
    bottom: 20%;
    left: -8%;
    animation-delay: 1.2s;
}

.who-visual__card--ai {
    bottom: 5%;
    right: 12%;
    animation-delay: 2.4s;
}

.who-visual__card--cloud {
    top: 22%;
    left: -5%;
    animation-delay: 0.6s;
}

/* Float Card Styles */
.float-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.who-visual__card--float:hover .float-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.float-card__label {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.float-card__value {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

/* ----- Center Pulse Orb ----- */
.who-visual__orb {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   FEATURE HIGHLIGHTS GRID
   ============================================================ */
.who-we-are__features {
    position: relative;
    z-index: 2;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--color-gray-light);
}

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

.feature-card {
    padding: 28px 22px 24px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.12);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.3rem;
    margin-bottom: 14px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover .feature-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05) rotate(-3deg);
}

.feature-card__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

.feature-card__description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
    word-break: break-word;
}

/* ============================================================
   OUR STORY SECTION — About Us Page (Phase 3)
   ============================================================ */
#our-story {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.our-story__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.our-story__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.10;
    pointer-events: none;
}

.our-story__glow--1 {
    width: 400px;
    height: 400px;
    top: -120px;
    right: -60px;
    background: var(--color-purple);
    opacity: 0.06;
}

.our-story__glow--2 {
    width: 350px;
    height: 350px;
    bottom: -100px;
    left: -50px;
    background: var(--color-lime);
    opacity: 0.05;
}

.our-story__glow--3 {
    width: 250px;
    height: 250px;
    top: 35%;
    right: 25%;
    background: var(--color-purple);
    opacity: 0.04;
}

.our-story__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.our-story__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 12%;
    animation-delay: 0s;
}

.our-story__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 15%;
    left: 20%;
    animation-delay: 2s;
}

.our-story__orb--3 {
    width: 50px;
    height: 50px;
    top: 45%;
    left: 10%;
    animation-delay: 4s;
}

.our-story__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.our-story__shape--1 {
    width: 180px;
    height: 180px;
    top: 5%;
    left: 5%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.our-story__shape--2 {
    width: 120px;
    height: 120px;
    bottom: 25%;
    right: 5%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.our-story__shape--3 {
    width: 80px;
    height: 80px;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.our-story__network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

.our-story__hexagons {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    pointer-events: none;
}

/* ----- Container ----- */
.our-story__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.our-story__header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 56px;
}

.our-story__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.our-story__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.our-story__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.our-story__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   GRID LAYOUT
   ============================================================ */
.our-story__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 60px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN — Story Chapters
   ============================================================ */
.our-story__chapters {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.story-chapter {
    display: flex;
    gap: 20px;
    padding: 24px 28px 24px 24px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.story-chapter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.story-chapter:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.05);
}

.story-chapter:hover::before {
    opacity: 1;
}

.story-chapter__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: rgba(124, 58, 237, 0.12);
    letter-spacing: -0.02em;
    line-height: 1;
    flex-shrink: 0;
    min-width: 44px;
    transition: all 0.4s ease;
}

.story-chapter:hover .story-chapter__number {
    color: var(--color-purple);
    transform: scale(1.05);
}

.story-chapter__content {
    flex: 1;
    min-width: 0;
}

.story-chapter__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

.story-chapter__description {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   RIGHT COLUMN — Interactive Timeline
   ============================================================ */
.our-story__timeline {
    position: relative;
    padding: 16px 0 16px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Timeline Line */
.timeline__line {
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 14px;
    width: 2.5px;
    background: var(--color-gray-light);
    border-radius: 4px;
    overflow: hidden;
}

.timeline__line-fill {
    height: 0%;
    width: 100%;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    border-radius: 4px;
    transition: height 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline__line-fill.animated {
    height: 100%;
}

/* Milestone */
.timeline__milestone {
    position: relative;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Node */
.timeline__node {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.timeline__node-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2.5px solid var(--color-gray-light);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}

.timeline__milestone.active .timeline__node-dot {
    border-color: var(--color-lime);
    background: var(--color-lime);
    box-shadow: 0 0 0 6px rgba(192, 227, 74, 0.15);
}

.timeline__node-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 227, 74, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.timeline__milestone.active .timeline__node-glow {
    opacity: 1;
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Timeline Card */
.timeline__card {
    flex: 1;
    min-width: 0;
    padding: 16px 20px 16px 18px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    cursor: default;
}

.timeline__card:hover {
    transform: translateX(6px) translateY(-2px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.05);
}

.timeline__milestone.active .timeline__card {
    border-color: rgba(192, 227, 74, 0.2);
    background: rgba(255, 255, 255, 0.8);
}

.timeline__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.timeline__milestone.active .timeline__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.timeline__card:hover .timeline__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.timeline__content {
    flex: 1;
    min-width: 0;
}

.timeline__title {
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 2px 0;
}

.timeline__description {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   MISSION & VISION SECTION — About Us Page (Phase 4)
   ============================================================ */
#mission-vision {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.mission-vision__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.mission-vision__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.10;
    pointer-events: none;
}

.mission-vision__glow--1 {
    width: 400px;
    height: 400px;
    top: -100px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.06;
}

.mission-vision__glow--2 {
    width: 350px;
    height: 350px;
    bottom: -80px;
    right: -60px;
    background: var(--color-purple);
    opacity: 0.06;
}

.mission-vision__glow--3 {
    width: 200px;
    height: 200px;
    top: 30%;
    left: 40%;
    background: var(--color-purple);
    opacity: 0.04;
}

.mission-vision__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.mission-vision__orb--1 {
    width: 80px;
    height: 80px;
    top: 15%;
    right: 18%;
    animation-delay: 0s;
}

.mission-vision__orb--2 {
    width: 60px;
    height: 60px;
    bottom: 20%;
    left: 15%;
    animation-delay: 2s;
}

.mission-vision__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.mission-vision__shape--1 {
    width: 150px;
    height: 150px;
    top: 5%;
    right: 5%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.mission-vision__shape--2 {
    width: 100px;
    height: 100px;
    bottom: 25%;
    left: 5%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.mission-vision__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

/* ----- Container ----- */
.mission-vision__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.mission-vision__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.mission-vision__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.mission-vision__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.mission-vision__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.mission-vision__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   CARDS GRID
   ============================================================ */
.mission-vision__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

/* ============================================================
   MISSION & VISION CARDS
   ============================================================ */
.mv-card {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 40px 36px 36px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
}

/* Gradient border glow on hover */
.mv-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.mv-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.mv-card:hover::before {
    opacity: 1;
}

.mv-card:hover::after {
    background: rgba(255, 255, 255, 0.8);
}

.mv-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 64px rgba(124, 58, 237, 0.08);
}

/* Card inner content */
.mv-card__glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 227, 74, 0.06) 0%, transparent 70%);
    z-index: 2;
    pointer-events: none;
    transition: all 0.6s ease;
}

.mv-card:hover .mv-card__glow {
    width: 280px;
    height: 280px;
    opacity: 0.6;
}

.mv-card>* {
    position: relative;
    z-index: 3;
}

/* ----- Card Icon ----- */
.mv-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.8rem;
    margin-bottom: 20px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mv-card:hover .mv-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Mission card icon - lime accent on hover */
.mv-card--mission:hover .mv-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* Vision card icon - purple accent on hover */
.mv-card--vision:hover .mv-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
}

/* ----- Card Title ----- */
.mv-card__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

/* ----- Card Description ----- */
.mv-card__description {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0 0 20px 0;
}

/* ----- Highlights ----- */
.mv-card__highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    text-align: left;
}

.mv-card__highlights li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    padding: 6px 0;
}

.highlight-icon {
    color: var(--color-lime);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.highlight-text {
    line-height: 1.3;
}

/* ============================================================
   CORE VALUES SECTION — About Us Page (Phase 5)
   ============================================================ */
#core-values {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.core-values__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.core-values__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.10;
    pointer-events: none;
}

.core-values__glow--1 {
    width: 450px;
    height: 450px;
    top: -150px;
    left: -100px;
    background: var(--color-lime);
    opacity: 0.05;
}

.core-values__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.05;
}

.core-values__glow--3 {
    width: 250px;
    height: 250px;
    top: 35%;
    left: 45%;
    background: var(--color-purple);
    opacity: 0.03;
}

.core-values__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.core-values__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.core-values__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 18%;
    left: 20%;
    animation-delay: 2s;
}

.core-values__orb--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.core-values__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.core-values__shape--1 {
    width: 180px;
    height: 180px;
    top: 5%;
    right: 5%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.core-values__shape--2 {
    width: 120px;
    height: 120px;
    bottom: 25%;
    left: 5%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.core-values__shape--3 {
    width: 80px;
    height: 80px;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.core-values__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

/* ----- Container ----- */
.core-values__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.core-values__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 52px;
}

.core-values__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.core-values__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.core-values__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.core-values__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   VALUES GRID
   ============================================================ */
.core-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ============================================================
   VALUE CARD
   ============================================================ */
.value-card {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 32px 28px 28px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
}

/* Gradient border glow on hover */
.value-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.value-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.value-card:hover::before {
    opacity: 1;
}

.value-card:hover::after {
    background: rgba(255, 255, 255, 0.85);
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.08);
}

/* Card inner content */
.value-card>* {
    position: relative;
    z-index: 3;
}

/* ----- Card Glow ----- */
.value-card__glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 227, 74, 0.06) 0%, transparent 70%);
    z-index: 2;
    pointer-events: none;
    transition: all 0.6s ease;
}

.value-card:hover .value-card__glow {
    width: 240px;
    height: 240px;
    opacity: 0.6;
}

/* ----- Card Icon ----- */
.value-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.5rem;
    margin-bottom: 16px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.value-card:hover .value-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.08) rotate(-3deg);
}

/* Different hover colors for each card using nth-child */
.value-card:nth-child(1):hover .value-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.value-card:nth-child(3):hover .value-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.value-card:nth-child(5):hover .value-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Card Title ----- */
.value-card__title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
}

/* ----- Card Description ----- */
.value-card__description {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   WHY CHOOSE XOHUB SOLUTIONS — About Us Page (Phase 6)
   ============================================================ */
#why-choose {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.why-choose__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.why-choose__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.10;
    pointer-events: none;
}

.why-choose__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.06;
}

.why-choose__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.05;
}

.why-choose__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 45%;
    background: var(--color-purple);
    opacity: 0.03;
}

.why-choose__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.why-choose__orb--1 {
    width: 90px;
    height: 90px;
    top: 12%;
    left: 10%;
    animation-delay: 0s;
}

.why-choose__orb--2 {
    width: 60px;
    height: 60px;
    bottom: 20%;
    right: 15%;
    animation-delay: 2s;
}

.why-choose__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.why-choose__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 30%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.why-choose__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 5%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.why-choose__shape--3 {
    width: 70px;
    height: 70px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.why-choose__network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

.why-choose__hexagons {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    pointer-events: none;
}

/* ----- Container ----- */
.why-choose__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.why-choose__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 52px;
}

.why-choose__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.why-choose__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.why-choose__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.why-choose__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   GRID LAYOUT
   ============================================================ */
.why-choose__grid {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 50px;
    align-items: stretch;
}

/* ============================================================
   LEFT COLUMN — Visual Composition
   ============================================================ */
.why-choose__visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Dashboard Card ----- */
.why-visual__dashboard {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 22px;
    padding: 22px 24px 20px;
    box-shadow: 0 32px 80px rgba(26, 26, 46, 0.08);
    z-index: 5;
    transition: all 0.4s ease;
}

.why-visual__dashboard:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px rgba(26, 26, 46, 0.12);
}

.dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dashboard__dots {
    display: flex;
    gap: 5px;
}

.dashboard__dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dashboard__dots .dot:nth-child(1) {
    background: #F87171;
}

.dashboard__dots .dot:nth-child(2) {
    background: #FBBF24;
}

.dashboard__dots .dot:nth-child(3) {
    background: #34D399;
}

.dashboard__title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    letter-spacing: 0.03em;
}

.dashboard__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-gray-light);
}

.dash-stat {
    text-align: center;
}

.dash-stat__value {
    display: block;
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

.dash-stat__label {
    display: block;
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dashboard__chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 50px;
    padding: 4px 0;
    margin-bottom: 14px;
}

.dashboard__chart .chart-bar {
    flex: 1;
    min-width: 8px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--color-lime), var(--color-lime-dark));
    transition: height 0.6s ease;
}

.dashboard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-light);
}

.dash-growth {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-dark);
}

.dash-status {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: #34D399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    animation: pulseDot 2s ease-in-out infinite;
}

/* ----- Floating Cards ----- */
.why-visual__float {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 16px 48px rgba(26, 26, 46, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: floatCard 5s ease-in-out infinite;
    max-width: 160px;
}

.why-visual__float:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 24px 64px rgba(124, 58, 237, 0.08);
}

.why-visual__float--1 {
    top: 2%;
    right: -8%;
    animation-delay: 0s;
}

.why-visual__float--2 {
    bottom: 18%;
    left: -10%;
    animation-delay: 1.2s;
}

.why-visual__float--3 {
    bottom: 2%;
    right: 15%;
    animation-delay: 2.4s;
}

.why-visual__float--4 {
    top: 22%;
    left: -8%;
    animation-delay: 0.6s;
}

.float-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.why-visual__float:hover .float-icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.float-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.float-label {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.float-value {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

/* ----- Center Orb ----- */
.why-visual__orb {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   RIGHT COLUMN — Feature Cards
   ============================================================ */
.why-choose__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

/* ----- Feature Card ----- */
.why-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px 18px 18px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

/* Gradient border */
.why-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.why-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.why-card:hover::before {
    opacity: 1;
}

.why-card:hover::after {
    background: rgba(255, 255, 255, 0.8);
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06);
}

.why-card>* {
    position: relative;
    z-index: 3;
}

/* ----- Featured Card ----- */
.why-card--featured {
    border-color: rgba(192, 227, 74, 0.2);
    background: rgba(255, 255, 255, 0.7);
}

.why-card--featured::after {
    background: rgba(255, 255, 255, 0.7);
}

.why-card--featured:hover::after {
    background: rgba(255, 255, 255, 0.9);
}

.why-card__badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.12);
    padding: 2px 10px;
    border-radius: 50px;
    z-index: 4;
    letter-spacing: 0.03em;
}

/* ----- Card Icon ----- */
.why-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.95rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.why-card:hover .why-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors for variety */
.why-card:nth-child(1):hover .why-card__icon,
.why-card:nth-child(4):hover .why-card__icon,
.why-card:nth-child(7):hover .why-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Card Content ----- */
.why-card__content {
    flex: 1;
    min-width: 0;
}

.why-card__title {
    font-size: 0.88rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 3px 0;
}

.why-card__description {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   MINI STATISTICS
   ============================================================ */
.why-choose__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 52px auto 0;
    padding-top: 40px;
    border-top: 1px solid var(--color-gray-light);
}

.mini-stat {
    text-align: center;
    padding: 8px 12px;
}

.mini-stat__number {
    font-size: 2.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.mini-stat__count {
    display: inline-block;
}

.mini-stat__suffix {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.mini-stat__label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   MEET OUR TEAM — About Us Page (Phase 7)
   ============================================================ */
#meet-team {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.meet-team__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.meet-team__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.08;
    pointer-events: none;
}

.meet-team__glow--1 {
    width: 450px;
    height: 450px;
    top: -150px;
    left: -100px;
    background: var(--color-lime);
    opacity: 0.04;
}

.meet-team__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.meet-team__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.meet-team__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.meet-team__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.meet-team__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.meet-team__orb--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.meet-team__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.meet-team__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.meet-team__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.meet-team__network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    pointer-events: none;
}

/* ----- Container ----- */
.meet-team__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.meet-team__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.meet-team__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.meet-team__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.meet-team__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.meet-team__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED FOUNDER CARD
   ============================================================ */
.founder-card {
    display: flex;
    align-items: center;
    gap: 48px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 40px 44px 40px 40px;
    box-shadow: var(--shadow-glass);
    margin-bottom: 52px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.founder-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}

.founder-card>* {
    position: relative;
    z-index: 2;
}

/* ----- Founder Visual ----- */
.founder-card__visual {
    flex-shrink: 0;
}

.founder-card__image-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
}

.founder-card__image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.2);
}

.founder-card__initial {
    font-size: 4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    letter-spacing: -0.02em;
}

.founder-card__glow-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spinRing 8s linear infinite;
}

/* Decorative floating shapes */
.founder-card__deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.1);
}

.founder-card__deco--1 {
    width: 30px;
    height: 30px;
    top: -10px;
    right: -10px;
    animation: floatOrb 4s ease-in-out infinite;
}

.founder-card__deco--2 {
    width: 20px;
    height: 20px;
    bottom: -5px;
    left: -5px;
    animation: floatOrb 5s ease-in-out infinite reverse;
}

.founder-card__deco--3 {
    width: 16px;
    height: 16px;
    top: 50%;
    right: -20px;
    animation: floatOrb 3s ease-in-out infinite 1s;
}

/* ----- Founder Content ----- */
.founder-card__content {
    flex: 1;
    min-width: 0;
}

.founder-card__header {
    margin-bottom: 12px;
}

.founder-card__name {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
}

.founder-card__position {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.founder-card__bio {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0 0 16px 0;
    max-width: 48ch;
}

/* Founder Tags */
.founder-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.founder-tag {
    padding: 4px 14px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    letter-spacing: 0.02em;
}

/* Founder Actions */
.founder-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.btn-founder {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-founder:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-founder-secondary {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-founder-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-founder-secondary i {
    transition: transform 0.3s ease;
}

.btn-founder-secondary:hover i {
    transform: translateX(4px);
}

/* Founder Social */
.founder-card__social {
    display: flex;
    gap: 8px;
}

.founder-card__social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-mid);
    font-size: 0.8rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.founder-card__social .social-link:hover {
    transform: translateY(-3px) scale(1.05);
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   LEADERSHIP GRID
   ============================================================ */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

/* ----- Leader Card ----- */
.leader-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 28px 24px 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.leader-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.leader-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.leader-card:hover::before {
    opacity: 1;
}

.leader-card:hover::after {
    background: rgba(255, 255, 255, 0.8);
}

.leader-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.leader-card>* {
    position: relative;
    z-index: 3;
}

/* Leader Image */
.leader-card__image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--color-purple-light), var(--color-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leader-card:hover .leader-card__image {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.2);
}

.leader-card__initial {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    letter-spacing: -0.02em;
}

/* Alternate colors for variety */
.leader-card:nth-child(2) .leader-card__image {
    background: linear-gradient(135deg, var(--color-lime), var(--color-lime-dark));
}

.leader-card:nth-child(3) .leader-card__image {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
}

/* Leader Content */
.leader-card__name {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 2px 0;
}

.leader-card__position {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 8px;
}

.leader-card__bio {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 14px 0;
}

/* Leader Social */
.leader-card__social {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.leader-card__social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-mid);
    font-size: 0.7rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.leader-card__social .social-link:hover {
    transform: translateY(-3px) scale(1.05);
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

/* ============================================================
   TEAM HIGHLIGHTS
   ============================================================ */
.team-highlights {
    text-align: center;
    margin-bottom: 48px;
    padding: 32px 0 28px;
    border-top: 1px solid var(--color-gray-light);
    border-bottom: 1px solid var(--color-gray-light);
}

.team-highlights__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    padding: 4px 16px;
    background: rgba(124, 58, 237, 0.06);
    border-radius: 50px;
}

.team-highlights__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
}

.highlight-badge {
    padding: 6px 18px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.highlight-badge:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--color-lime);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.12);
    background: var(--color-white);
}

/* ============================================================
   CULTURE QUOTE
   ============================================================ */
.culture-quote {
    max-width: 720px;
    margin: 0 auto;
}

.culture-quote__card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 36px 40px 32px;
    text-align: center;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.culture-quote__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.3;
}

.culture-quote__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.culture-quote__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 1.2rem;
    margin-bottom: 14px;
}

.culture-quote__text {
    font-size: 1.3rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.6;
    margin: 0 0 12px 0;
    font-style: italic;
}

.culture-quote__author {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    font-style: normal;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes spinRing {
    from {
        transform: rotate(0deg);
    }

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

/* ============================================================
   COMPANY TIMELINE — About Us Page (Phase 8)
   ============================================================ */
#company-timeline {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.company-timeline__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.company-timeline__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.08;
    pointer-events: none;
}

.company-timeline__glow--1 {
    width: 450px;
    height: 450px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.05;
}

.company-timeline__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.04;
}

.company-timeline__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.company-timeline__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.company-timeline__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.company-timeline__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.company-timeline__orb--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.company-timeline__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.company-timeline__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.company-timeline__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.company-timeline__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    pointer-events: none;
}

/* ----- Container ----- */
.company-timeline__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.company-timeline__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 52px;
}

.company-timeline__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.company-timeline__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.company-timeline__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.company-timeline__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0 40px;
}

/* ----- Central Line ----- */
.timeline__line {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 50%;
    width: 3px;
    background: var(--color-gray-light);
    transform: translateX(-50%);
    border-radius: 4px;
    overflow: hidden;
    z-index: 1;
}

.timeline__line-fill {
    height: 0%;
    width: 100%;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    border-radius: 4px;
    transition: height 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline__line-fill.animated {
    height: 100%;
}

/* ----- Timeline Item ----- */
.timeline__item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 48px;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Left-aligned items */
.timeline__item--left {
    flex-direction: row;
    padding-right: calc(50% + 30px);
    text-align: right;
}

.timeline__item--left .timeline__card {
    margin-left: auto;
}

/* Right-aligned items */
.timeline__item--right {
    flex-direction: row-reverse;
    padding-left: calc(50% + 30px);
    text-align: left;
}

.timeline__item--right .timeline__card {
    margin-right: auto;
}

/* ----- Timeline Node ----- */
.timeline__node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    width: 60px;
}

.timeline__node-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-gray-light);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}

.timeline__item.visible .timeline__node-dot {
    border-color: var(--color-lime);
    background: var(--color-lime);
    box-shadow: 0 0 0 6px rgba(192, 227, 74, 0.15);
}

.timeline__node-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 227, 74, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.timeline__item.visible .timeline__node-glow {
    opacity: 1;
    animation: pulseGlow 2.5s ease-in-out infinite;
}

.timeline__year {
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    margin-top: 6px;
    background: var(--color-white);
    padding: 2px 10px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    transition: all 0.4s ease;
}

.timeline__item.visible .timeline__year {
    border-color: var(--color-lime);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.05);
}

/* ----- Timeline Card ----- */
.timeline__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px 20px 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-width: 380px;
    position: relative;
    overflow: hidden;
}

.timeline__card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.timeline__card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.timeline__card:hover::before {
    opacity: 1;
}

.timeline__card:hover::after {
    background: rgba(255, 255, 255, 0.85);
}

.timeline__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.timeline__card>* {
    position: relative;
    z-index: 3;
}

/* ----- Card Icon ----- */
.timeline__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.1rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline__card:hover .timeline__card-icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors for variety */
.timeline__item:nth-child(1) .timeline__card:hover .timeline__card-icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.timeline__item:nth-child(3) .timeline__card:hover .timeline__card-icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.timeline__item:nth-child(5) .timeline__card:hover .timeline__card-icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Card Content ----- */
.timeline__card-content {
    flex: 1;
    min-width: 0;
}

.timeline__card-title {
    font-size: 0.98rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
}

.timeline__card-description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   TIMELINE PROGRESS
   ============================================================ */
.timeline__progress {
    margin-top: 40px;
    padding: 24px 32px 20px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow-glass);
}

.progress-label {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.progress-bar {
    height: 4px;
    background: var(--color-gray-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 14px;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 4px;
    transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.progress-fill.animated {
    width: 100%;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.progress-step {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: all 0.4s ease;
}

.progress-step.active {
    color: var(--color-purple);
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
}

/* ============================================================
   AWARDS, ACHIEVEMENTS & CERTIFICATIONS — About Us Page (Phase 9)
   ============================================================ */
#awards-certifications {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.awards-certifications__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.awards-certifications__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.07;
    pointer-events: none;
}

.awards-certifications__glow--1 {
    width: 450px;
    height: 450px;
    top: -150px;
    left: -100px;
    background: var(--color-lime);
    opacity: 0.04;
}

.awards-certifications__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.awards-certifications__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.awards-certifications__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.awards-certifications__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.awards-certifications__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.awards-certifications__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.awards-certifications__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.awards-certifications__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.awards-certifications__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    pointer-events: none;
}

/* ----- Container ----- */
.awards-certifications__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.awards-certifications__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.awards-certifications__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.awards-certifications__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.awards-certifications__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.awards-certifications__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   TOP STATISTICS
   ============================================================ */
.awards-certifications__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-gray-light);
}

.ac-stat {
    text-align: center;
    padding: 8px 12px;
}

.ac-stat__number {
    font-size: 2.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.ac-stat__count {
    display: inline-block;
}

.ac-stat__suffix {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.ac-stat__label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   CATEGORIES GRID
   ============================================================ */
.awards-certifications__categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 48px;
}

/* ----- Category Card ----- */
.ac-category {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 28px 24px 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.ac-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.3;
    transition: opacity 0.4s ease;
}

.ac-category:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.ac-category:hover::before {
    opacity: 1;
}

/* Category Header */
.ac-category__header {
    margin-bottom: 18px;
}

.ac-category__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.1rem;
    margin-bottom: 10px;
    transition: all 0.4s ease;
}

.ac-category:hover .ac-category__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.ac-category__title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
}

.ac-category__description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

/* ----- Category Items Container ----- */
.ac-category__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ----- Certification Badge ----- */
.ac-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.ac-badge:hover {
    transform: translateX(4px);
    border-color: rgba(192, 227, 74, 0.2);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.06);
}

.ac-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.ac-badge:hover .ac-badge__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.ac-badge__label {
    flex: 1;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.ac-badge__status {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    padding: 2px 10px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
}

.ac-badge__status:contains("Certified") {
    color: var(--color-lime-dark);
    border-color: rgba(192, 227, 74, 0.2);
    background: rgba(192, 227, 74, 0.06);
}

/* ----- Achievement Item ----- */
.ac-achievement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.ac-achievement:hover {
    transform: translateX(4px);
    border-color: rgba(124, 58, 237, 0.1);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.ac-achievement__icon {
    color: var(--color-lime);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.ac-achievement__content {
    flex: 1;
    min-width: 0;
}

.ac-achievement__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.ac-achievement__description {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0;
    line-height: 1.4;
}

/* ----- Future Badge ----- */
.ac-category__items--future {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ac-future {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.ac-future:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(192, 227, 74, 0.2);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.06);
}

.ac-future__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ac-future__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

/* ============================================================
   RECOGNITION BANNER
   ============================================================ */
.recognition-banner {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 40px 48px 36px;
    text-align: center;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.recognition-banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.1;
    pointer-events: none;
}

.recognition-banner>* {
    position: relative;
    z-index: 2;
}

.recognition-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.recognition-banner__title {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.recognition-banner__description {
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 20px;
}

.btn-recognition {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-recognition:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   OUR WORK CULTURE — About Us Page (Phase 10)
   ============================================================ */
#work-culture {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.work-culture__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.work-culture__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.work-culture__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.work-culture__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.work-culture__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.work-culture__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.work-culture__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.work-culture__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.work-culture__orb--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.work-culture__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.work-culture__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.work-culture__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.work-culture__shape--3 {
    width: 70px;
    height: 70px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.work-culture__network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* ----- Container ----- */
.work-culture__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.work-culture__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.work-culture__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.work-culture__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.work-culture__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.work-culture__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SPLIT GRID
   ============================================================ */
.work-culture__grid {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 50px;
    align-items: stretch;
    margin-bottom: 48px;
}

/* ============================================================
   LEFT COLUMN — Premium Illustration
   ============================================================ */
.work-culture__visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    border: 1px solid var(--color-gray-light);
    overflow: hidden;
    box-shadow: var(--shadow-glass);
}

/* Central Node */
.culture-visual__center {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.culture-visual__center-glow {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
}

.culture-visual__center-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.6rem;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.25);
    z-index: 2;
}

/* Orbiting Rings */
.culture-visual__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, 0.06);
    pointer-events: none;
}

.culture-visual__ring--1 {
    width: 300px;
    height: 300px;
    animation: orbitSpin 22s linear infinite;
}

.culture-visual__ring--2 {
    width: 220px;
    height: 220px;
    animation: orbitSpin 16s linear infinite reverse;
    border-color: rgba(192, 227, 74, 0.06);
}

.culture-visual__ring--3 {
    width: 150px;
    height: 150px;
    animation: orbitSpin 10s linear infinite;
    border-color: rgba(124, 58, 237, 0.04);
}

/* Orbiting Nodes */
.culture-visual__node {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple);
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.04);
    transition: all 0.4s ease;
    z-index: 5;
    animation: floatNode 4s ease-in-out infinite;
}

.culture-visual__node:hover {
    transform: scale(1.12);
    border-color: var(--color-lime);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.12);
}

.culture-visual__node--1 {
    top: 8%;
    right: 5%;
    animation-delay: 0s;
    color: var(--color-lime-dark);
}

.culture-visual__node--2 {
    bottom: 10%;
    right: 20%;
    animation-delay: 0.8s;
    color: #0EA5E9;
}

.culture-visual__node--3 {
    bottom: 25%;
    left: 2%;
    animation-delay: 1.6s;
    color: #F59E0B;
}

.culture-visual__node--4 {
    top: 20%;
    left: 5%;
    animation-delay: 2.4s;
    color: #EF4444;
}

.culture-visual__node--5 {
    top: 40%;
    right: 2%;
    animation-delay: 3.2s;
    color: #EC4899;
}

.culture-visual__node--6 {
    bottom: 8%;
    left: 20%;
    animation-delay: 4s;
    color: #34D399;
}

/* Floating Glass Cards */
.culture-visual__float {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: 0 8px 24px rgba(26, 26, 46, 0.04);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    animation: floatCard 5s ease-in-out infinite;
}

.culture-visual__float .float-emoji {
    font-size: 0.9rem;
}

.culture-visual__float .float-label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.culture-visual__float--1 {
    top: 6%;
    left: 6%;
    animation-delay: 0s;
}

.culture-visual__float--2 {
    bottom: 6%;
    right: 6%;
    animation-delay: 1.5s;
}

.culture-visual__float--3 {
    top: 30%;
    right: 4%;
    animation-delay: 0.8s;
}

.culture-visual__float--4 {
    bottom: 25%;
    left: 4%;
    animation-delay: 2.2s;
}

/* ============================================================
   RIGHT COLUMN — Content
   ============================================================ */
.work-culture__content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ----- Introduction ----- */
.work-culture__intro {
    padding: 0 4px;
}

.work-culture__intro-title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.work-culture__intro-description {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0;
}

/* ----- Culture Cards Grid ----- */
.work-culture__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ----- Culture Card ----- */
.culture-card {
    padding: 20px 18px 18px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.culture-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.culture-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.culture-card:hover::before {
    opacity: 1;
}

.culture-card:hover::after {
    background: rgba(255, 255, 255, 0.85);
}

.culture-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06);
}

.culture-card>* {
    position: relative;
    z-index: 3;
}

/* Card Icon */
.culture-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1rem;
    margin-bottom: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.culture-card:hover .culture-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors for variety */
.culture-card:nth-child(1):hover .culture-card__icon,
.culture-card:nth-child(3):hover .culture-card__icon,
.culture-card:nth-child(5):hover .culture-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* Card Title */
.culture-card__title {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
}

/* Card Description */
.culture-card__description {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   CULTURE QUOTE BANNER
   ============================================================ */
.culture-quote-banner {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.03), rgba(192, 227, 74, 0.03));
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 40px 48px 36px;
    text-align: center;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.culture-quote-banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.08;
    pointer-events: none;
}

.culture-quote-banner>* {
    position: relative;
    z-index: 2;
}

.culture-quote-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.culture-quote-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 1.2rem;
    margin-bottom: 14px;
    transition: all 0.4s ease;
}

.culture-quote-banner:hover .culture-quote-banner__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.culture-quote-banner__text {
    font-size: 1.3rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.6;
    margin: 0 0 8px 0;
    font-style: italic;
}

.culture-quote-banner__author {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    font-style: normal;
}

/* ============================================================
   KEYFRAMES — Additional Animations
   ============================================================ */
@keyframes floatNode {

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

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

/* ============================================================
   CAREERS HERO BANNER — Careers Page (Phase 1)
   ============================================================ */
#careers-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--top-bar-height) + var(--nav-height) + 40px) 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.careers-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.careers-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.08;
    pointer-events: none;
}

.careers-hero__glow--1 {
    width: 500px;
    height: 500px;
    top: -180px;
    right: -120px;
    background: var(--color-purple);
    opacity: 0.06;
}

.careers-hero__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -140px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.05;
}

.careers-hero__glow--3 {
    width: 280px;
    height: 280px;
    top: 35%;
    left: 45%;
    background: var(--color-purple);
    opacity: 0.03;
}

.careers-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.careers-hero__orb--1 {
    width: 120px;
    height: 120px;
    top: 10%;
    right: 18%;
    animation-delay: 0s;
}

.careers-hero__orb--2 {
    width: 80px;
    height: 80px;
    bottom: 15%;
    left: 22%;
    animation-delay: 2s;
}

.careers-hero__orb--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    right: 25%;
    animation-delay: 4s;
}

.careers-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.careers-hero__shape--1 {
    width: 180px;
    height: 180px;
    top: 6%;
    left: 8%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.careers-hero__shape--2 {
    width: 130px;
    height: 130px;
    bottom: 25%;
    right: 6%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.careers-hero__shape--3 {
    width: 90px;
    height: 90px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.careers-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    pointer-events: none;
}

/* ----- Floating Particles ----- */
.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

.particle--1 {
    width: 8px;
    height: 8px;
    top: 15%;
    left: 20%;
    animation-delay: 0s;
}

.particle--2 {
    width: 12px;
    height: 12px;
    top: 65%;
    left: 80%;
    animation-delay: 1.2s;
}

.particle--3 {
    width: 6px;
    height: 6px;
    top: 30%;
    left: 75%;
    animation-delay: 2.4s;
}

.particle--4 {
    width: 10px;
    height: 10px;
    top: 75%;
    left: 15%;
    animation-delay: 0.6s;
}

.particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 30%;
    animation-delay: 3s;
}

.particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 60%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.careers-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ============================================================
   LEFT COLUMN — Content
   ============================================================ */
.careers-hero__content {
    flex: 1 1 55%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.careers-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.careers-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.careers-hero__title {
    font-size: 3.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.careers-hero__title .highlight-lime {
    position: relative;
    display: inline-block;
}

.careers-hero__title .highlight-lime::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(192, 227, 74, 0.25);
    border-radius: 4px;
    z-index: -1;
}

.careers-hero__description {
    font-size: 1.1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 46ch;
    margin: 0;
}

/* ----- Buttons ----- */
.careers-hero__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-careers-primary {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-careers-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

.btn-careers-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-careers-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-careers-secondary i {
    transition: transform 0.3s ease;
}

.btn-careers-secondary:hover i {
    transform: translateX(4px);
}

/* ----- Company Highlights ----- */
.careers-hero__highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    padding-top: 8px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.highlight-item__icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.highlight-item__content {
    display: flex;
    flex-direction: column;
}

.highlight-item__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.3;
}

.highlight-item__text {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

/* ============================================================
   RIGHT COLUMN — Premium Visual Composition
   ============================================================ */
.careers-hero__visual {
    flex: 1 1 45%;
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Main Dashboard Card ----- */
.careers-visual__dashboard {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 22px 24px 20px;
    box-shadow: 0 32px 80px rgba(26, 26, 46, 0.08);
    z-index: 5;
    transition: all 0.4s ease;
}

.careers-visual__dashboard:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px rgba(26, 26, 46, 0.12);
}

/* Dashboard Header */
.dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dashboard__dots {
    display: flex;
    gap: 5px;
}

.dashboard__dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dashboard__dots .dot:nth-child(1) {
    background: #F87171;
}

.dashboard__dots .dot:nth-child(2) {
    background: #FBBF24;
}

.dashboard__dots .dot:nth-child(3) {
    background: #34D399;
}

.dashboard__title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    letter-spacing: 0.03em;
}

/* Dashboard Stats */
.dashboard__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-gray-light);
}

.dash-stat {
    text-align: center;
}

.dash-stat__value {
    display: block;
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

.dash-stat__label {
    display: block;
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Dashboard Progress */
.dashboard__progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-gray-light);
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    min-width: 60px;
}

.progress-bar {
    flex: 1;
    height: 4px;
    background: var(--color-gray-light);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
}

/* Dashboard Jobs */
.dashboard__jobs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.job-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    border: 1px solid var(--color-gray-light);
    transition: all 0.3s ease;
}

.job-item:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.2);
    transform: translateX(4px);
}

.job-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    flex-shrink: 0;
}

.job-title {
    flex: 1;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.job-tag {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime-dark);
    padding: 2px 10px;
    border-radius: 50px;
    background: rgba(192, 227, 74, 0.08);
    border: 1px solid rgba(192, 227, 74, 0.1);
}

/* Dashboard Footer */
.dashboard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--color-gray-light);
}

.dash-apply {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
}

.dash-status {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: #34D399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    animation: pulseDot 2s ease-in-out infinite;
}

/* ----- Floating Code Window ----- */
.careers-visual__code {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 16px 48px rgba(26, 26, 46, 0.06);
    z-index: 4;
    width: 200px;
    overflow: hidden;
    animation: floatCard 5s ease-in-out infinite;
    top: 5%;
    right: -8%;
}

.careers-visual__code .code-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid var(--color-gray-light);
}

.careers-visual__code .code-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.careers-visual__code .code-dot--1 {
    background: #F87171;
}

.careers-visual__code .code-dot--2 {
    background: #FBBF24;
}

.careers-visual__code .code-dot--3 {
    background: #34D399;
}

.careers-visual__code .code-title {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin-left: 4px;
}

.careers-visual__code .code-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: 'Courier New', monospace;
}

.careers-visual__code .code-line {
    font-size: 0.55rem;
    color: var(--color-charcoal);
    line-height: 1.6;
    white-space: nowrap;
}

.careers-visual__code .code-keyword {
    color: var(--color-purple);
    font-weight: 600;
}

.careers-visual__code .code-var {
    color: #0EA5E9;
}

.careers-visual__code .code-string {
    color: var(--color-lime-dark);
}

.careers-visual__code .code-key {
    color: #F59E0B;
}

.careers-visual__code .code-indent {
    padding-left: 12px;
}

/* ----- Floating Node Cards ----- */
.careers-visual__node {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 12px 36px rgba(26, 26, 46, 0.04);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: floatCard 4.5s ease-in-out infinite;
}

.careers-visual__node:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 56px rgba(124, 58, 237, 0.06);
}

.careers-visual__node i {
    font-size: 0.9rem;
    color: var(--color-purple);
}

.careers-visual__node .node-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.careers-visual__node--1 {
    bottom: 25%;
    left: -6%;
    animation-delay: 0.8s;
}

.careers-visual__node--1 i {
    color: #0EA5E9;
}

.careers-visual__node--2 {
    bottom: 5%;
    right: 12%;
    animation-delay: 2s;
}

.careers-visual__node--2 i {
    color: #EC4899;
}

.careers-visual__node--3 {
    top: 30%;
    left: -4%;
    animation-delay: 1.4s;
}

.careers-visual__node--3 i {
    color: #F59E0B;
}

/* ----- Center Pulse Orb ----- */
.careers-visual__orb {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    animation: pulseGlow 3.5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   KEYFRAMES — Additional Animations
   ============================================================ */
@keyframes floatParticle {

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

    50% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.8;
    }
}

/* ============================================================
   WHY JOIN XOHUB SOLUTIONS — Careers Page (Phase 2)
   ============================================================ */
#why-join {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.why-join__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.why-join__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.why-join__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.why-join__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.why-join__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.why-join__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.why-join__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.why-join__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.why-join__orb--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.why-join__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.why-join__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.why-join__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.why-join__shape--3 {
    width: 70px;
    height: 70px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.why-join__network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#why-join .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#why-join .particle--1 {
    width: 8px;
    height: 8px;
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

#why-join .particle--2 {
    width: 12px;
    height: 12px;
    top: 70%;
    left: 85%;
    animation-delay: 1.2s;
}

#why-join .particle--3 {
    width: 6px;
    height: 6px;
    top: 30%;
    left: 80%;
    animation-delay: 2.4s;
}

#why-join .particle--4 {
    width: 10px;
    height: 10px;
    top: 80%;
    left: 15%;
    animation-delay: 0.6s;
}

/* ----- Container ----- */
.why-join__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.why-join__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.why-join__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.why-join__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.why-join__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.why-join__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   TWO-COLUMN GRID
   ============================================================ */
.why-join__grid {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 50px;
    align-items: stretch;
    margin-bottom: 48px;
}

/* ============================================================
   LEFT COLUMN — Premium Illustration
   ============================================================ */
.why-join__visual {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    border: 1px solid var(--color-gray-light);
    overflow: hidden;
    box-shadow: var(--shadow-glass);
}

/* Central Hub */
.join-visual__center {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.join-visual__center-glow {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
}

.join-visual__center-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.6rem;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.25);
    z-index: 2;
}

/* Orbiting Rings */
.join-visual__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, 0.06);
    pointer-events: none;
}

.join-visual__ring--1 {
    width: 300px;
    height: 300px;
    animation: orbitSpin 22s linear infinite;
}

.join-visual__ring--2 {
    width: 220px;
    height: 220px;
    animation: orbitSpin 16s linear infinite reverse;
    border-color: rgba(192, 227, 74, 0.06);
}

.join-visual__ring--3 {
    width: 150px;
    height: 150px;
    animation: orbitSpin 10s linear infinite;
    border-color: rgba(124, 58, 237, 0.04);
}

/* Orbiting Nodes */
.join-visual__node {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.04);
    transition: all 0.4s ease;
    z-index: 5;
    animation: floatNode 4s ease-in-out infinite;
}

.join-visual__node:hover {
    transform: scale(1.08);
    border-color: var(--color-lime);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.12);
}

.join-visual__node i {
    font-size: 0.7rem;
    color: var(--color-purple);
}

.join-visual__node .node-label {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    white-space: nowrap;
}

.join-visual__node--1 {
    top: 8%;
    right: 4%;
    animation-delay: 0s;
}
.join-visual__node--1 i { color: #0EA5E9; }

.join-visual__node--2 {
    bottom: 10%;
    right: 18%;
    animation-delay: 0.8s;
}
.join-visual__node--2 i { color: #EC4899; }

.join-visual__node--3 {
    bottom: 28%;
    left: 2%;
    animation-delay: 1.6s;
}
.join-visual__node--3 i { color: #F59E0B; }

.join-visual__node--4 {
    top: 22%;
    left: 4%;
    animation-delay: 2.4s;
}
.join-visual__node--4 i { color: #8B5CF6; }

.join-visual__node--5 {
    top: 42%;
    right: 2%;
    animation-delay: 3.2s;
}
.join-visual__node--5 i { color: #34D399; }

.join-visual__node--6 {
    bottom: 6%;
    left: 18%;
    animation-delay: 4s;
}
.join-visual__node--6 i { color: #F472B6; }

/* Floating Glass Cards */
.join-visual__float {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 6px 14px;
    box-shadow: 0 8px 24px rgba(26, 26, 46, 0.04);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    animation: floatCard 5s ease-in-out infinite;
}

.join-visual__float .float-emoji {
    font-size: 0.9rem;
}

.join-visual__float .float-label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.join-visual__float--1 {
    top: 8%;
    left: 8%;
    animation-delay: 0s;
}

.join-visual__float--2 {
    bottom: 8%;
    right: 8%;
    animation-delay: 1.5s;
}

.join-visual__float--3 {
    top: 35%;
    right: 5%;
    animation-delay: 0.8s;
}

/* ============================================================
   RIGHT COLUMN — Feature Cards
   ============================================================ */
.why-join__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ----- Join Card ----- */
.join-card {
    padding: 20px 18px 18px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.join-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.join-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.join-card:hover::before {
    opacity: 1;
}

.join-card:hover::after {
    background: rgba(255, 255, 255, 0.85);
}

.join-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06);
}

.join-card > * {
    position: relative;
    z-index: 3;
}

/* Card Icon */
.join-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1rem;
    margin-bottom: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.join-card:hover .join-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors for variety */
.join-card:nth-child(1):hover .join-card__icon,
.join-card:nth-child(3):hover .join-card__icon,
.join-card:nth-child(5):hover .join-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* Card Title */
.join-card__title {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
}

/* Card Description */
.join-card__description {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   BOTTOM HIGHLIGHT BANNER
   ============================================================ */
.why-join__banner {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 48px 56px 44px;
    text-align: center;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.why-join__banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.08;
    pointer-events: none;
}

.why-join__banner > * {
    position: relative;
    z-index: 2;
}

.why-join__banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.banner-title {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.banner-description {
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 20px;
}

.btn-banner {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-banner:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   EMPLOYEE BENEFITS & PERKS — Careers Page (Phase 3)
   ============================================================ */
#benefits-perks {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.benefits-perks__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.benefits-perks__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.benefits-perks__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.04;
}

.benefits-perks__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -60px;
    background: var(--color-purple);
    opacity: 0.04;
}

.benefits-perks__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.benefits-perks__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.benefits-perks__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.benefits-perks__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.benefits-perks__orb--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.benefits-perks__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.benefits-perks__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.benefits-perks__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.benefits-perks__shape--3 {
    width: 70px;
    height: 70px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.benefits-perks__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#benefits-perks .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#benefits-perks .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#benefits-perks .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#benefits-perks .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#benefits-perks .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#benefits-perks .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#benefits-perks .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.benefits-perks__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.benefits-perks__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.benefits-perks__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.benefits-perks__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.benefits-perks__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.benefits-perks__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   BENEFITS GRID
   ============================================================ */
.benefits-perks__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 48px;
}

/* ============================================================
   BENEFIT CARD
   ============================================================ */
.benefit-card {
    padding: 24px 20px 20px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.benefit-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.benefit-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.benefit-card:hover::before {
    opacity: 1;
}

.benefit-card:hover::after {
    background: rgba(255, 255, 255, 0.85);
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.benefit-card > * {
    position: relative;
    z-index: 3;
}

/* ----- Card Icon ----- */
.benefit-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.2rem;
    margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.benefit-card:hover .benefit-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors for variety */
.benefit-card:nth-child(1):hover .benefit-card__icon,
.benefit-card:nth-child(3):hover .benefit-card__icon,
.benefit-card:nth-child(5):hover .benefit-card__icon,
.benefit-card:nth-child(7):hover .benefit-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Card Title ----- */
.benefit-card__title {
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

/* ----- Card Description ----- */
.benefit-card__description {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   HIGHLIGHT BANNER
   ============================================================ */
.benefits-perks__banner {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 44px 48px 40px;
    text-align: center;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    max-width: 900px;
    margin: 0 auto;
}

.benefits-perks__banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.08;
    pointer-events: none;
}

.benefits-perks__banner > * {
    position: relative;
    z-index: 2;
}

.benefits-perks__banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.banner-title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.banner-description {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 20px;
}

.btn-benefits-banner {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-benefits-banner:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   OPEN POSITIONS — Careers Page (Phase 4)
   ============================================================ */
#open-positions {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.open-positions__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.open-positions__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.open-positions__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.open-positions__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.open-positions__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.open-positions__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.open-positions__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.open-positions__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.open-positions__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.open-positions__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.open-positions__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.open-positions__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#open-positions .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#open-positions .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#open-positions .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#open-positions .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#open-positions .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

/* ----- Container ----- */
.open-positions__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.open-positions__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.open-positions__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.open-positions__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.open-positions__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.open-positions__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.open-positions__filters {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    padding: 18px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-glass);
}

.filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.filter-group {
    position: relative;
    flex: 1;
    min-width: 140px;
}

.filter-group--search {
    flex: 2;
    min-width: 180px;
}

.filter-group--search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-mid);
    font-size: 0.85rem;
    pointer-events: none;
}

.filter-input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    transition: all 0.3s ease;
    outline: none;
}

.filter-input:focus {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.filter-input::placeholder {
    color: var(--color-gray-mid);
}

.filter-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    transition: all 0.3s ease;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239BA3B5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.filter-select:focus {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.filter-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-filter-search {
    padding: 10px 20px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    border: none;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-filter-search:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.btn-filter-clear {
    padding: 10px 16px;
    background: transparent;
    color: var(--color-gray-mid);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-filter-clear:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
}

/* ============================================================
   RESULTS COUNT
   ============================================================ */
.open-positions__count {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin-bottom: 20px;
}

.open-positions__count .jobs-count {
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

/* ============================================================
   JOB CARDS GRID
   ============================================================ */
.open-positions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

/* ============================================================
   JOB CARD
   ============================================================ */
.job-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    padding: 22px 24px 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.job-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.job-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.job-card:hover::before {
    opacity: 1;
}

.job-card:hover::after {
    background: rgba(255, 255, 255, 0.85);
}

.job-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.job-card > * {
    position: relative;
    z-index: 3;
}

/* ----- Card Header ----- */
.job-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}

.job-card__title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.job-card__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.job-card__badge {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    padding: 2px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.job-card__badge--featured {
    background: rgba(192, 227, 74, 0.12);
    color: var(--color-lime-dark);
    border: 1px solid rgba(192, 227, 74, 0.15);
}

.job-card__badge--new {
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    border: 1px solid rgba(124, 58, 237, 0.1);
}

.job-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.job-card__department {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.job-card__type {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    padding: 2px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.job-card__type--fulltime {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.job-card__type--parttime {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.job-card__type--remote {
    background: rgba(14, 165, 233, 0.08);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.1);
}

.job-card__type--contract {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

/* ----- Card Description ----- */
.job-card__description {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 12px 0;
    flex: 1;
}

/* ----- Card Tags ----- */
.job-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.job-tag {
    padding: 3px 12px;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.06);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.job-card:hover .job-tag {
    background: rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.08);
}

/* ----- Card Footer ----- */
.job-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--color-gray-light);
    flex-wrap: wrap;
    gap: 10px;
}

.job-card__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.job-card__location {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.job-card__location i {
    font-size: 0.6rem;
    margin-right: 4px;
    color: var(--color-purple);
}

.job-card__level {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
}

.job-card__salary {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.job-card__date {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

/* ----- Apply Button ----- */
.btn-job-apply {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--color-purple);
    color: var(--color-white);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15);
    border: none;
    cursor: pointer;
}

.btn-job-apply:hover {
    background: var(--color-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}

.btn-job-apply i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.btn-job-apply:hover i {
    transform: translateX(4px);
}

/* ============================================================
   LOAD MORE
   ============================================================ */
.open-positions__load-more {
    text-align: center;
    margin-bottom: 48px;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-load-more:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.06);
}

.btn-load-more i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.btn-load-more:hover i {
    transform: translateX(4px);
}

/* ============================================================
   RECRUITMENT BANNER
   ============================================================ */
.open-positions__banner {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 44px 48px 40px;
    text-align: center;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    max-width: 900px;
    margin: 0 auto;
}

.open-positions__banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.08;
    pointer-events: none;
}

.open-positions__banner > * {
    position: relative;
    z-index: 2;
}

.open-positions__banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.banner-content .banner-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.banner-content .banner-description {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 20px;
}

.banner-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-banner-primary {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-banner-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-banner-secondary {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-banner-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-banner-secondary i {
    transition: transform 0.3s ease;
}

.btn-banner-secondary:hover i {
    transform: translateX(4px);
}

/* ============================================================
   HIRING PROCESS — Careers Page (Phase 5)
   ============================================================ */
#hiring-process {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.hiring-process__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.hiring-process__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.hiring-process__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.04;
}

.hiring-process__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -60px;
    background: var(--color-purple);
    opacity: 0.04;
}

.hiring-process__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.hiring-process__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.hiring-process__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.hiring-process__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.hiring-process__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.hiring-process__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.hiring-process__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.hiring-process__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#hiring-process .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#hiring-process .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#hiring-process .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#hiring-process .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#hiring-process .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

/* ----- Container ----- */
.hiring-process__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.hiring-process__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.hiring-process__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.hiring-process__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.hiring-process__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.hiring-process__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.hiring-process__timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 48px;
    padding: 20px 0 10px;
}

/* ----- Central Line ----- */
.hp-timeline__line {
    position: absolute;
    top: 50px;
    bottom: 40px;
    left: 50%;
    width: 3px;
    background: var(--color-gray-light);
    transform: translateX(-50%);
    border-radius: 4px;
    overflow: hidden;
    z-index: 1;
}

.hp-timeline__line-fill {
    height: 0%;
    width: 100%;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    border-radius: 4px;
    transition: height 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hp-timeline__line-fill.animated {
    height: 100%;
}

/* ----- Timeline Step ----- */
.hp-step {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Left-aligned steps */
.hp-step--left {
    flex-direction: row;
    padding-right: calc(50% + 36px);
    text-align: right;
}

.hp-step--left .hp-step__card {
    margin-left: auto;
}

/* Right-aligned steps */
.hp-step--right {
    flex-direction: row-reverse;
    padding-left: calc(50% + 36px);
    text-align: left;
}

.hp-step--right .hp-step__card {
    margin-right: auto;
}

/* ----- Step Node ----- */
.hp-step__node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    width: 60px;
}

.hp-step__node-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-gray-light);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}

.hp-step.visible .hp-step__node-dot {
    border-color: var(--color-lime);
    background: var(--color-lime);
    box-shadow: 0 0 0 6px rgba(192, 227, 74, 0.15);
}

.hp-step__node-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 227, 74, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hp-step.visible .hp-step__node-glow {
    opacity: 1;
    animation: pulseGlow 2.5s ease-in-out infinite;
}

.hp-step__number {
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    margin-top: 6px;
    background: var(--color-white);
    padding: 2px 10px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    transition: all 0.4s ease;
}

.hp-step.visible .hp-step__number {
    border-color: var(--color-lime);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.05);
}

/* ----- Step Card ----- */
.hp-step__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px 18px 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-width: 380px;
    position: relative;
    overflow: hidden;
}

.hp-step__card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.hp-step__card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.hp-step__card:hover::before {
    opacity: 1;
}

.hp-step__card:hover::after {
    background: rgba(255, 255, 255, 0.85);
}

.hp-step__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.hp-step__card > * {
    position: relative;
    z-index: 3;
}

/* ----- Step Icon ----- */
.hp-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hp-step__card:hover .hp-step__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors */
.hp-step:nth-child(1) .hp-step__card:hover .hp-step__icon,
.hp-step:nth-child(3) .hp-step__card:hover .hp-step__icon,
.hp-step:nth-child(5) .hp-step__card:hover .hp-step__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Step Content ----- */
.hp-step__content {
    flex: 1;
    min-width: 0;
}

.hp-step__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
}

.hp-step__description {
    font-size: 0.8rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   TIMELINE BANNER
   ============================================================ */
.hiring-process__banner {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 36px 40px 32px;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    max-width: 900px;
    margin: 0 auto 48px;
}

.hiring-process__banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.08;
    pointer-events: none;
}

.hiring-process__banner > * {
    position: relative;
    z-index: 2;
}

.hiring-process__banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.hp-banner__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.hp-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.2rem;
    transition: all 0.4s ease;
}

.hiring-process__banner:hover .hp-banner__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.hp-banner__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.hp-banner__description {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0;
}

.hp-banner__description strong {
    color: var(--color-purple);
    font-weight: var(--font-weight-semibold);
}

.hp-banner__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.hp-highlight {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hp-highlight__icon {
    color: var(--color-lime);
    font-size: 0.85rem;
}

.hp-highlight__text {
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

/* ============================================================
   CALL TO ACTION
   ============================================================ */
.hiring-process__cta {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.hp-cta__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.hp-cta__description {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0 0 24px 0;
}

.hp-cta__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-cta-primary {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-cta-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

.btn-cta-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-cta-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-cta-secondary i {
    transition: transform 0.3s ease;
}

.btn-cta-secondary:hover i {
    transform: translateX(4px);
}

/* ============================================================
   CAREERS FAQ — Careers Page (Phase 6)
   ============================================================ */
#careers-faq {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.careers-faq__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.careers-faq__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.careers-faq__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.careers-faq__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.careers-faq__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.careers-faq__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.careers-faq__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.careers-faq__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.careers-faq__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.careers-faq__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.careers-faq__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.careers-faq__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#careers-faq .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#careers-faq .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#careers-faq .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#careers-faq .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#careers-faq .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

/* ----- Container ----- */
.careers-faq__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.careers-faq__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.careers-faq__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.careers-faq__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.careers-faq__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.careers-faq__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   TWO-COLUMN GRID
   ============================================================ */
.careers-faq__grid {
    display: grid;
    grid-template-columns: 35fr 65fr;
    gap: 48px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN — Intro & Illustration
   ============================================================ */
.careers-faq__intro {
    position: sticky;
    top: calc(var(--top-bar-height) + var(--nav-height) + 30px);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.faq-intro__content {
    padding: 32px 28px 28px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    text-align: center;
}

.faq-intro__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.4rem;
    margin-bottom: 14px;
    transition: all 0.4s ease;
}

.faq-intro__icon:hover {
    transform: scale(1.05);
    background: var(--color-purple);
    color: var(--color-white);
}

.faq-intro__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.faq-intro__description {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.faq-intro__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-faq-intro {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-faq-intro:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-faq-intro-secondary {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-faq-intro-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Left Visual Decoration ----- */
.faq-intro__visual {
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--color-gray-light);
    overflow: hidden;
}

.faq-visual__orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

.faq-visual__orb--1 {
    width: 80px;
    height: 80px;
    top: -20px;
    right: -20px;
    animation-delay: 0s;
}

.faq-visual__orb--2 {
    width: 60px;
    height: 60px;
    bottom: -10px;
    left: -10px;
    animation-delay: 1.5s;
}

.faq-visual__orb--3 {
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.8s;
}

.faq-visual__node {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple);
    font-size: 0.8rem;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.04);
    animation: floatNode 4s ease-in-out infinite;
}

.faq-visual__node--1 {
    top: 15%;
    right: 18%;
    animation-delay: 0s;
}

.faq-visual__node--2 {
    bottom: 15%;
    left: 22%;
    animation-delay: 1.2s;
}

.faq-visual__node--3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 2.4s;
}

/* ============================================================
   RIGHT COLUMN — Accordion
   ============================================================ */
.careers-faq__accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ----- FAQ Item ----- */
.faq-item {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
}

.faq-item:hover {
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.faq-item--highlight {
    border-color: rgba(192, 227, 74, 0.15);
    background: rgba(255, 255, 255, 0.5);
}

.faq-item--highlight:hover {
    border-color: rgba(192, 227, 74, 0.25);
}

.faq-item.active {
    border-color: rgba(124, 58, 237, 0.12);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.04);
}

.faq-item.active--highlight {
    border-color: rgba(192, 227, 74, 0.25);
}

/* ----- Trigger Button ----- */
.faq-item__trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px 16px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.92rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.faq-item__trigger:hover {
    color: var(--color-purple);
}

.faq-item.active .faq-item__trigger {
    color: var(--color-purple);
}

.faq-item--highlight.active .faq-item__trigger {
    color: var(--color-lime-dark);
}

/* Trigger Icon */
.faq-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 0.8rem;
    transition: all 0.4s ease;
}

.faq-item__trigger:hover .faq-item__icon {
    background: rgba(124, 58, 237, 0.1);
    transform: scale(1.05);
}

.faq-item.active .faq-item__icon {
    background: var(--color-purple);
    color: var(--color-white);
}

.faq-item--highlight.active .faq-item__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* Trigger Question */
.faq-item__question {
    flex: 1;
    min-width: 0;
}

/* Trigger Indicator */
.faq-item__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-gray-mid);
    font-size: 0.75rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.faq-item__trigger:hover .faq-item__indicator {
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
}

.faq-item.active .faq-item__indicator {
    background: var(--color-purple);
    color: var(--color-white);
    transform: rotate(45deg);
}

.faq-item--highlight.active .faq-item__indicator {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Answer ----- */
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.4s ease,
                padding 0.3s ease;
    opacity: 0;
    padding: 0 20px 0 20px;
}

.faq-item.active .faq-item__answer {
    max-height: 200px;
    opacity: 1;
    padding: 0 20px 20px 20px;
}

.faq-item__answer-content {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    padding-top: 4px;
    border-top: 1px solid var(--color-gray-light);
}

.faq-item.active .faq-item__answer-content {
    border-top-color: rgba(124, 58, 237, 0.06);
}

.faq-item--highlight.active .faq-item__answer-content {
    border-top-color: rgba(192, 227, 74, 0.12);
}

/* Focus states for accessibility */
.faq-item__trigger:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: -2px;
    border-radius: 14px;
}

.btn-faq-intro:focus-visible,
.btn-faq-intro-secondary:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ============================================================
   FINAL CTA — Careers Page (Phase 7)
   ============================================================ */
#careers-cta {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.careers-cta__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.careers-cta__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.08;
    pointer-events: none;
}

.careers-cta__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.06;
}

.careers-cta__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.05;
}

.careers-cta__glow--3 {
    width: 300px;
    height: 300px;
    top: 30%;
    left: 40%;
    background: var(--color-purple);
    opacity: 0.03;
}

.careers-cta__glow--4 {
    width: 250px;
    height: 250px;
    bottom: 30%;
    right: 25%;
    background: var(--color-lime);
    opacity: 0.04;
}

.careers-cta__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 10s ease-in-out infinite;
}

.careers-cta__orb--1 {
    width: 120px;
    height: 120px;
    top: 8%;
    right: 18%;
    animation-delay: 0s;
}

.careers-cta__orb--2 {
    width: 80px;
    height: 80px;
    bottom: 15%;
    left: 22%;
    animation-delay: 2.5s;
}

.careers-cta__orb--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.careers-cta__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.careers-cta__shape--1 {
    width: 180px;
    height: 180px;
    top: 5%;
    left: 8%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.careers-cta__shape--2 {
    width: 130px;
    height: 130px;
    bottom: 25%;
    right: 6%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.careers-cta__shape--3 {
    width: 90px;
    height: 90px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.careers-cta__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#careers-cta .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 8s ease-in-out infinite;
}

#careers-cta .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 6%;
    animation-delay: 0s;
}

#careers-cta .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 90%;
    animation-delay: 1.5s;
}

#careers-cta .particle--3 {
    width: 6px;
    height: 6px;
    top: 22%;
    left: 85%;
    animation-delay: 3s;
}

#careers-cta .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.8s;
}

#careers-cta .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 3%;
    animation-delay: 2.2s;
}

#careers-cta .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 95%;
    animation-delay: 3.8s;
}

/* ----- Container ----- */
.careers-cta__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.careers-cta__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.careers-cta__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.careers-cta__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.careers-cta__title {
    font-size: 2.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 12px;
}

.careers-cta__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   MAIN BANNER
   ============================================================ */
.careers-cta__banner {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 50px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 28px;
    padding: 48px 48px 44px;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.careers-cta__banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.06;
    pointer-events: none;
}

.careers-cta__banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(124, 58, 237, 0.06);
}

.careers-cta__banner > * {
    position: relative;
    z-index: 2;
}

/* ============================================================
   LEFT CONTENT
   ============================================================ */
.careers-cta__content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ----- Career Highlights ----- */
.careers-cta__highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.cta-highlight {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.cta-highlight:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.cta-highlight__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.9rem;
    transition: all 0.4s ease;
}

.cta-highlight:hover .cta-highlight__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.cta-highlight__info {
    flex: 1;
    min-width: 0;
}

.cta-highlight__title {
    font-size: 0.88rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 2px 0;
}

.cta-highlight__description {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 0;
}

/* ----- CTA Buttons ----- */
.careers-cta__buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-cta-primary {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-cta-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

.btn-cta-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-cta-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-cta-secondary i {
    transition: transform 0.3s ease;
}

.btn-cta-secondary:hover i {
    transform: translateX(4px);
}

.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    color: var(--color-charcoal);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-cta-outline:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.08);
    background: rgba(124, 58, 237, 0.02);
}

.btn-cta-outline i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.btn-cta-outline:hover i {
    transform: translateX(4px);
}

/* ----- Note ----- */
.careers-cta__note {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0;
    padding-top: 4px;
}

.cta-note__link {
    color: var(--color-purple);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1.5px solid transparent;
}

.cta-note__link:hover {
    color: var(--color-purple-dark);
    border-bottom-color: var(--color-purple);
}

/* ============================================================
   RIGHT VISUAL
   ============================================================ */
.careers-cta__visual {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Central Node ----- */
.cta-visual__center {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.cta-visual__center-glow {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 227, 74, 0.1) 0%, transparent 70%);
    animation: pulseGlow 3s ease-in-out infinite;
}

.cta-visual__center-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-lime), var(--color-lime-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-charcoal);
    font-size: 1.6rem;
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.25);
    z-index: 2;
}

/* ----- Orbiting Rings ----- */
.cta-visual__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, 0.06);
    pointer-events: none;
}

.cta-visual__ring--1 {
    width: 300px;
    height: 300px;
    animation: orbitSpin 22s linear infinite;
}

.cta-visual__ring--2 {
    width: 220px;
    height: 220px;
    animation: orbitSpin 16s linear infinite reverse;
    border-color: rgba(192, 227, 74, 0.06);
}

.cta-visual__ring--3 {
    width: 150px;
    height: 150px;
    animation: orbitSpin 10s linear infinite;
    border-color: rgba(124, 58, 237, 0.04);
}

/* ----- Orbiting Nodes ----- */
.cta-visual__node {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple);
    font-size: 0.9rem;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.04);
    transition: all 0.4s ease;
    z-index: 5;
    animation: floatNode 4.5s ease-in-out infinite;
}

.cta-visual__node:hover {
    transform: scale(1.12);
    border-color: var(--color-lime);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.1);
}

.cta-visual__node--1 {
    top: 6%;
    right: 6%;
    animation-delay: 0s;
    color: #0EA5E9;
}
.cta-visual__node--2 {
    bottom: 8%;
    right: 22%;
    animation-delay: 0.8s;
    color: #EC4899;
}
.cta-visual__node--3 {
    bottom: 25%;
    left: 2%;
    animation-delay: 1.6s;
    color: #F59E0B;
}
.cta-visual__node--4 {
    top: 20%;
    left: 4%;
    animation-delay: 2.4s;
    color: #8B5CF6;
}
.cta-visual__node--5 {
    top: 42%;
    right: 2%;
    animation-delay: 3.2s;
    color: #34D399;
}
.cta-visual__node--6 {
    bottom: 6%;
    left: 20%;
    animation-delay: 4s;
    color: #F472B6;
}

/* ----- Floating Glass Cards ----- */
.cta-visual__float {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 6px 14px;
    box-shadow: 0 8px 24px rgba(26, 26, 46, 0.04);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    animation: floatCard 5.5s ease-in-out infinite;
}

.cta-visual__float .float-emoji {
    font-size: 0.9rem;
}

.cta-visual__float .float-label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.cta-visual__float--1 {
    top: 8%;
    left: 5%;
    animation-delay: 0s;
}

.cta-visual__float--2 {
    bottom: 8%;
    right: 5%;
    animation-delay: 1.8s;
}

.cta-visual__float--3 {
    top: 35%;
    right: 3%;
    animation-delay: 0.9s;
}

/* ----- Decorative Shapes ----- */
.cta-visual__deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.03);
    border: 1px solid rgba(192, 227, 74, 0.03);
}

.cta-visual__deco--1 {
    width: 100px;
    height: 100px;
    top: 15%;
    right: 30%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.cta-visual__deco--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 30%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.cta-visual__deco--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
    background: rgba(124, 58, 237, 0.02);
    border-color: rgba(124, 58, 237, 0.02);
}

/* ----- Focus States ----- */
.btn-cta-primary:focus-visible,
.btn-cta-secondary:focus-visible,
.btn-cta-outline:focus-visible,
.cta-note__link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================== START CSS ==================== */
/* --- CSS Custom Properties --- */

/* --- Hero Section --- */
.case-studies-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 0 80px;
  background: var(--bg-white);
  isolation: isolate;
}

/* --- Background Layers --- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(163, 230, 53, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 75% 60%, rgba(168, 85, 247, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 60% 20%, rgba(163, 230, 53, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 30% 75%, rgba(168, 85, 247, 0.06) 0%, transparent 55%);
  animation: meshShift 18s ease-in-out infinite alternate;
}

@keyframes meshShift {
  0% {
    transform: scale(1) translate(0, 0);
  }
  33% {
    transform: scale(1.04) translate(-1%, 1%);
  }
  66% {
    transform: scale(1.02) translate(1%, -0.5%);
  }
  100% {
    transform: scale(1.03) translate(0.5%, 0.5%);
  }
}

.bg-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 20%, transparent 70%);
}

.bg-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 45%, rgba(168, 85, 247, 0.03) 45%, rgba(168, 85, 247, 0.03) 46%, transparent 46%),
    linear-gradient(225deg, transparent 45%, rgba(163, 230, 53, 0.03) 45%, rgba(163, 230, 53, 0.03) 46%, transparent 46%),
    linear-gradient(315deg, transparent 48%, rgba(168, 85, 247, 0.02) 48%, rgba(168, 85, 247, 0.02) 49%, transparent 49%);
  background-size: 200px 180px, 180px 200px, 220px 190px;
  background-position: 10% 20%, 75% 50%, 40% 70%;
  animation: circuitDrift 25s linear infinite;
}

@keyframes circuitDrift {
  0% {
    background-position: 10% 20%, 75% 50%, 40% 70%;
  }
  100% {
    background-position: 12% 22%, 77% 52%, 42% 72%;
  }
}

.bg-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='80' height='90' viewBox='0 0 80 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,5 72,23 72,61 40,79 8,61 8,23' fill='none' stroke='rgba(168,85,247,0.06)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 140px 158px;
  background-position: 5% 10%;
  mask-image: radial-gradient(ellipse 65% 55% at 60% 40%, black 15%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 60% 40%, black 15%, transparent 65%);
  opacity: 0.7;
}

.bg-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  animation: glowPulse 6s ease-in-out infinite alternate;
}

.bg-radial-glow--green {
  width: 500px;
  height: 500px;
  background: var(--brand-green-glow);
  top: -15%;
  left: -10%;
  animation-delay: 0s;
}

.bg-radial-glow--purple {
  width: 450px;
  height: 450px;
  background: var(--brand-purple-glow);
  bottom: -10%;
  right: -8%;
  animation-delay: 3s;
}

@keyframes glowPulse {
  0% {
    opacity: 0.35;
    transform: scale(1);
  }
  100% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}

/* Floating Particles */
.bg-particles {
  position: absolute;
  inset: 0;
}

.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFloat linear infinite;
}

.particle--green {
  background: rgba(163, 230, 53, 0.45);
  box-shadow: 0 0 8px rgba(163, 230, 53, 0.5);
}

.particle--purple {
  background: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-110vh) translateX(40px) scale(0.3);
    opacity: 0;
  }
}

/* --- Hero Container --- */
.hero-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 70px;
}

/* --- Left Content --- */
.hero-content {
  animation: fadeUpContent 0.9s ease-out forwards;
}

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

.hero-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-purple-deep);
  background: rgba(168, 85, 247, 0.08);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 24px;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.hero-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-charcoal);
  margin: 0 0 20px 0;
  letter-spacing: -0.03em;
}

.text-gradient {
  background: linear-gradient(135deg, var(--brand-green-deep) 0%, var(--brand-purple) 60%, var(--brand-purple-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.hero-description {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 36px 0;
  max-width: 540px;
}

/* --- CTA Buttons --- */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 28px;
  border-radius: 60px;
  cursor: pointer;
  border: none;
  transition: all var(--transition-smooth);
  outline: none;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
  color: #1a1a1a;
  box-shadow: 0 6px 28px rgba(163, 230, 53, 0.35), 0 2px 8px rgba(132, 204, 22, 0.25);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(163, 230, 53, 0.5), 0 4px 14px rgba(132, 204, 22, 0.35);
}

.btn--primary:focus-visible {
  outline: 3px solid var(--brand-green);
  outline-offset: 3px;
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent);
  border-radius: 60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.btn--primary:hover::after {
  opacity: 1;
}

.btn--secondary {
  background: transparent;
  color: var(--text-charcoal);
  border: 2px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.06);
}

.btn--secondary:hover {
  border-color: var(--brand-purple);
  background: rgba(168, 85, 247, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.18);
}

.btn--secondary:focus-visible {
  outline: 3px solid var(--brand-purple);
  outline-offset: 3px;
}

.btn-icon {
  transition: transform 0.3s ease;
}

.btn:hover .btn-icon {
  transform: translateX(4px);
}

.btn--secondary:hover .btn-icon {
  transform: rotate(90deg);
}

/* --- Right Visual / Illustration --- */
.hero-visual {
  animation: fadeUpContent 0.9s ease-out 0.2s forwards;
  opacity: 0;
}

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

.illustration-container {
  position: relative;
  width: 100%;
  height: 500px;
}

/* Connection Lines SVG */
.connection-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Floating Cards */
.float-card {
  position: absolute;
  z-index: 1;
  animation: floatCard 6s ease-in-out infinite;
}

.float-card--1 {
  top: 5%;
  left: 5%;
  animation-delay: 0s;
}
.float-card--2 {
  top: 0%;
  right: 8%;
  animation-delay: 1.5s;
}
.float-card--3 {
  top: 28%;
  right: 15%;
  animation-delay: 3s;
}
.float-card--4 {
  bottom: 22%;
  left: 12%;
  animation-delay: 2s;
}
.float-card--5 {
  bottom: 30%;
  right: 5%;
  animation-delay: 4.5s;
}

@keyframes floatCard {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-12px) rotate(0.5deg);
  }
  50% {
    transform: translateY(-4px) rotate(-0.3deg);
  }
  75% {
    transform: translateY(-16px) rotate(0.2deg);
  }
}

.glass-card-inner {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: var(--glass-shadow);
  padding: 18px 20px;
  transition: all var(--transition-bounce);
}

.glass-card-inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.05);
  border-color: rgba(168, 85, 247, 0.35);
}

/* Dashboard Card */
.float-card--dashboard {
  width: 210px;
}

.dashboard-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-dots {
  display: flex;
  gap: 5px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot--red {
  background: #EF4444;
}

.dot--yellow {
  background: #F59E0B;
}

.dot--green {
  background: #10B981;
}

.dashboard-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.dashboard-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
  margin-bottom: 12px;
}

.chart-bar {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--brand-green), rgba(163, 230, 53, 0.4));
  border-radius: 4px 4px 0 0;
  animation: barRise 1.8s ease-out var(--delay) both;
}

@keyframes barRise {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--h);
    opacity: 1;
  }
}

.dashboard-stats {
  display: flex;
  gap: 16px;
}

.mini-stat-value {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-charcoal);
}

.mini-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Browser Card */
.float-card--browser {
  width: 200px;
}

.browser-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.browser-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.browser-url {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 3px 10px;
  border-radius: 6px;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.browser-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.code-line {
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.08);
}

.code-line--1 {
  width: 70%;
}

.code-line--2 {
  width: 90%;
}

.code-line--3 {
  width: 50%;
}

.code-line--4 {
  width: 75%;
}

.code-snippet {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.65rem;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  margin-top: 4px;
  border-left: 3px solid var(--brand-green);
}

.code-keyword {
  color: #A855F7;
  font-weight: 600;
}

.code-var {
  color: #1E1E24;
}

.code-string {
  color: #84CC16;
}

/* Mobile Mockup Card */
.float-card--mobile {
  width: 150px;
}

.mobile-notch {
  width: 40px;
  height: 5px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  margin: 0 auto 12px;
}

.mobile-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-app-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-purple));
}

.mobile-app-line {
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.1);
}

.mobile-app-line--short {
  width: 50px;
}

.mobile-app-line--tiny {
  width: 30px;
}

.mobile-card {
  height: 28px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
}

.mobile-card--1 {
  background: rgba(163, 230, 53, 0.1);
}

.mobile-card--2 {
  background: rgba(168, 85, 247, 0.08);
}

.mobile-chart-ring {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* AI / Tech Card */
.float-card--ai {
  width: 130px;
  text-align: center;
}

.ai-icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.ai-hexagon {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hexSpin 12s linear infinite;
}

@keyframes hexSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ai-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-purple-deep);
  letter-spacing: 0.04em;
}

.ai-pulse-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.4);
  margin: 8px auto 0;
  animation: aiPulse 2s ease-out infinite;
}

@keyframes aiPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Tech Card */
.float-card--tech {
  width: 160px;
  text-align: center;
}

.tech-icons-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tech-icon-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.tech-icon-circle--green {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
  box-shadow: 0 0 12px var(--brand-green-glow);
}

.tech-icon-circle--purple {
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-deep));
  box-shadow: 0 0 12px var(--brand-purple-glow);
}

.tech-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* --- Trust Indicators --- */
.trust-indicators {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  animation: fadeUpContent 0.9s ease-out 0.4s forwards;
  opacity: 0;
}

.trust-card {
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-bounce);
  cursor: default;
}

.trust-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.1), 0 6px 18px rgba(0, 0, 0, 0.05);
  border-color: rgba(163, 230, 53, 0.4);
}

.trust-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.12), rgba(168, 85, 247, 0.12));
  margin-bottom: 14px;
  color: var(--brand-purple-deep);
  transition: all var(--transition-smooth);
}

.trust-card:hover .trust-icon-wrapper {
  color: var(--brand-green-deep);
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.2), rgba(168, 85, 247, 0.2));
  transform: scale(1.08);
}

.trust-number {
  display: block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-charcoal);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.trust-label {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* --- Focus States for Accessibility --- */
.case-studies-hero *:focus-visible {
  outline: 2px solid var(--brand-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================== START CSS ==================== */
/* --- Success Metrics Section --- */
.success-metrics {
  position: relative;
  padding: 100px 0 90px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* --- Background Layers --- */
.metrics-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.metrics-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 15% 25%, rgba(168, 85, 247, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(163, 230, 53, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 50% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 70% 20%, rgba(163, 230, 53, 0.05) 0%, transparent 55%);
  animation: metricsMeshShift 20s ease-in-out infinite alternate;
}

@keyframes metricsMeshShift {
  0% {
    transform: scale(1) translate(0, 0);
  }
  33% {
    transform: scale(1.03) translate(1%, -0.5%);
  }
  66% {
    transform: scale(1.02) translate(-0.5%, 1%);
  }
  100% {
    transform: scale(1.04) translate(0.5%, -0.5%);
  }
}

.metrics-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.03) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(ellipse 65% 55% at center, black 18%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at center, black 18%, transparent 68%);
}

.metrics-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, transparent 47%, rgba(168, 85, 247, 0.025) 47%, rgba(168, 85, 247, 0.025) 48%, transparent 48%),
    linear-gradient(210deg, transparent 46%, rgba(163, 230, 53, 0.025) 46%, rgba(163, 230, 53, 0.025) 47%, transparent 47%),
    linear-gradient(330deg, transparent 48.5%, rgba(168, 85, 247, 0.02) 48.5%, rgba(168, 85, 247, 0.02) 49.5%, transparent 49.5%);
  background-size: 190px 170px, 210px 180px, 180px 200px;
  background-position: 8% 30%, 70% 60%, 35% 75%;
  animation: metricsCircuitDrift 28s linear infinite;
}

@keyframes metricsCircuitDrift {
  0% {
    background-position: 8% 30%, 70% 60%, 35% 75%;
  }
  100% {
    background-position: 10% 32%, 72% 62%, 37% 77%;
  }
}

.metrics-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='70' height='78' viewBox='0 0 70 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='35,4 63,19 63,55 35,70 7,55 7,19' fill='none' stroke='rgba(168,85,247,0.05)' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 120px 135px;
  background-position: 75% 15%;
  mask-image: radial-gradient(ellipse 60% 50% at 65% 35%, black 12%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 65% 35%, black 12%, transparent 60%);
  opacity: 0.65;
}

.metrics-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.4;
  animation: metricsGlowPulse 7s ease-in-out infinite alternate;
}

.metrics-radial-glow--green {
  width: 420px;
  height: 420px;
  background: rgba(163, 230, 53, 0.3);
  top: -12%;
  right: -8%;
  animation-delay: 0s;
}

.metrics-radial-glow--purple {
  width: 380px;
  height: 380px;
  background: rgba(168, 85, 247, 0.28);
  bottom: -10%;
  left: -6%;
  animation-delay: 3.5s;
}

@keyframes metricsGlowPulse {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.55;
    transform: scale(1.18);
  }
}

/* --- Floating Particles --- */
.metrics-particles {
  position: absolute;
  inset: 0;
}

.metrics-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: metricsParticleFloat linear infinite;
}

.metrics-particle--green {
  background: rgba(163, 230, 53, 0.4);
  box-shadow: 0 0 7px rgba(163, 230, 53, 0.45);
}

.metrics-particle--purple {
  background: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 7px rgba(168, 85, 247, 0.4);
}

@keyframes metricsParticleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.65;
  }
  90% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(-105vh) translateX(35px) scale(0.25);
    opacity: 0;
  }
}

/* --- Container --- */
.metrics-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Section Header --- */
.metrics-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
  animation: fadeUpMetrics 0.8s ease-out forwards;
}

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

.metrics-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.07);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.metrics-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1E1E24;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
}

.text-gradient {
  background: linear-gradient(135deg, #84CC16 0%, #A855F7 60%, #9333EA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.metrics-description {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* --- Statistics Grid --- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 60px;
}

/* --- Metric Card --- */
.metric-card {
  position: relative;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  padding: 30px 22px 26px;
  text-align: center;
  box-shadow: 0 8px 38px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  animation: fadeUpMetrics 0.8s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.08s);
  opacity: 0;
}

.metric-card:nth-child(1) { --card-index: 1; }
.metric-card:nth-child(2) { --card-index: 2; }
.metric-card:nth-child(3) { --card-index: 3; }
.metric-card:nth-child(4) { --card-index: 4; }
.metric-card:nth-child(5) { --card-index: 5; }
.metric-card:nth-child(6) { --card-index: 6; }
.metric-card:nth-child(7) { --card-index: 7; }
.metric-card:nth-child(8) { --card-index: 8; }

.metric-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.09), 0 4px 14px rgba(0, 0, 0, 0.04);
  border-color: rgba(163, 230, 53, 0.4);
}

.metric-card:hover .metric-glow {
  opacity: 1;
}

.metric-glow {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(163, 230, 53, 0.12), transparent 65%),
    radial-gradient(ellipse 50% 35% at 50% 70%, rgba(168, 85, 247, 0.1), transparent 65%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.metric-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.1), rgba(168, 85, 247, 0.1));
  margin-bottom: 14px;
  color: #9333EA;
  transition: all 0.35s ease;
}

.metric-card:hover .metric-icon-wrap {
  color: #84CC16;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.18), rgba(168, 85, 247, 0.18));
  transform: scale(1.1);
}

.metric-number {
  display: block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 2.3rem;
  font-weight: 800;
  color: #1E1E24;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  line-height: 1;
}

.metric-title {
  display: block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1E1E24;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.metric-desc {
  display: block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #5A5A6E;
  letter-spacing: 0.01em;
}

/* --- Achievement Banner --- */
.achievement-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 44px 48px;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  animation: fadeUpMetrics 0.8s ease-out 0.5s forwards;
  opacity: 0;
}

.achievement-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.banner-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}

.banner-glow--left {
  width: 280px;
  height: 280px;
  background: rgba(168, 85, 247, 0.2);
  top: -40%;
  left: -8%;
}

.banner-glow--right {
  width: 260px;
  height: 260px;
  background: rgba(163, 230, 53, 0.18);
  bottom: -35%;
  right: -6%;
}

.achievement-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.achievement-banner-text {
  flex: 1;
  min-width: 260px;
}

.achievement-banner-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: #1E1E24;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.achievement-banner-description {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5A5A6E;
  margin: 0;
  max-width: 560px;
}

.achievement-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 60px;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #A3E635, #84CC16);
  color: #1a1a1a;
  box-shadow: 0 6px 26px rgba(163, 230, 53, 0.32), 0 2px 8px rgba(132, 204, 22, 0.22);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.achievement-banner-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(163, 230, 53, 0.48), 0 4px 14px rgba(132, 204, 22, 0.32);
}

.achievement-banner-btn:focus-visible {
  outline: 3px solid #A3E635;
  outline-offset: 3px;
}

.achievement-banner-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent);
  border-radius: 60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.achievement-banner-btn:hover::after {
  opacity: 1;
}

.achievement-banner-btn svg {
  transition: transform 0.3s ease;
}

.achievement-banner-btn:hover svg {
  transform: translateX(4px);
}

/* --- Focus States --- */
.success-metrics *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================================================
START: Featured Case Studies Section
================================================== */
/* --- Featured Case Studies Section --- */
.featured-case-studies {
  position: relative;
  padding: 100px 0 90px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* --- Background Layers --- */
.featured-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.featured-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 35%, rgba(163, 230, 53, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 75% 60%, rgba(168, 85, 247, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 60% 25%, rgba(163, 230, 53, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 48% 42% at 35% 70%, rgba(168, 85, 247, 0.05) 0%, transparent 60%);
  animation: featuredMeshShift 22s ease-in-out infinite alternate;
}

@keyframes featuredMeshShift {
  0% {
    transform: scale(1) translate(0, 0);
  }
  33% {
    transform: scale(1.03) translate(-0.8%, 0.8%);
  }
  66% {
    transform: scale(1.02) translate(0.6%, -0.6%);
  }
  100% {
    transform: scale(1.04) translate(0.4%, 0.4%);
  }
}

.featured-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 50% at center, black 15%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at center, black 15%, transparent 65%);
}

.featured-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, transparent 47%, rgba(168, 85, 247, 0.02) 47%, rgba(168, 85, 247, 0.02) 48%, transparent 48%),
    linear-gradient(235deg, transparent 46%, rgba(163, 230, 53, 0.02) 46%, rgba(163, 230, 53, 0.02) 47%, transparent 47%),
    linear-gradient(305deg, transparent 48.5%, rgba(168, 85, 247, 0.015) 48.5%, rgba(168, 85, 247, 0.015) 49.5%, transparent 49.5%);
  background-size: 200px 180px, 190px 210px, 210px 190px;
  background-position: 10% 25%, 72% 55%, 38% 78%;
  animation: featuredCircuitDrift 26s linear infinite;
}

@keyframes featuredCircuitDrift {
  0% {
    background-position: 10% 25%, 72% 55%, 38% 78%;
  }
  100% {
    background-position: 12% 27%, 74% 57%, 40% 80%;
  }
}

.featured-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='75' height='84' viewBox='0 0 75 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='37.5,4 69,20 69,60 37.5,76 6,60 6,20' fill='none' stroke='rgba(168,85,247,0.04)' stroke-width='1.3'/%3E%3C/svg%3E");
  background-size: 130px 145px;
  background-position: 80% 20%;
  mask-image: radial-gradient(ellipse 55% 45% at 65% 35%, black 10%, transparent 55%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at 65% 35%, black 10%, transparent 55%);
  opacity: 0.6;
}

.featured-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(105px);
  opacity: 0.38;
  animation: featuredGlowPulse 8s ease-in-out infinite alternate;
}

.featured-radial-glow--green {
  width: 400px;
  height: 400px;
  background: rgba(163, 230, 53, 0.28);
  top: -10%;
  left: -5%;
  animation-delay: 0s;
}

.featured-radial-glow--purple {
  width: 360px;
  height: 360px;
  background: rgba(168, 85, 247, 0.26);
  bottom: -8%;
  right: -5%;
  animation-delay: 4s;
}

@keyframes featuredGlowPulse {
  0% {
    opacity: 0.28;
    transform: scale(1);
  }
  100% {
    opacity: 0.52;
    transform: scale(1.16);
  }
}

/* --- Floating Particles --- */
.featured-particles {
  position: absolute;
  inset: 0;
}

.featured-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: featuredParticleFloat linear infinite;
}

.featured-particle--green {
  background: rgba(163, 230, 53, 0.38);
  box-shadow: 0 0 6px rgba(163, 230, 53, 0.4);
}

.featured-particle--purple {
  background: rgba(168, 85, 247, 0.33);
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.38);
}

@keyframes featuredParticleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-108vh) translateX(30px) scale(0.2);
    opacity: 0;
  }
}

/* --- Container --- */
.featured-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Section Header --- */
.featured-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 60px;
}

.featured-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.07);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.featured-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1E1E24;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
}

.text-gradient {
  background: linear-gradient(135deg, #84CC16 0%, #A855F7 60%, #9333EA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.featured-description {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* --- Projects Grid --- */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}

/* --- Project Card --- */
.project-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 38px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(30px);
}

.project-card.is-visible {
  animation: fadeUpProject 0.7s ease-out forwards;
}

.project-card:nth-child(1).is-visible { animation-delay: 0.05s; }
.project-card:nth-child(2).is-visible { animation-delay: 0.15s; }
.project-card:nth-child(3).is-visible { animation-delay: 0.25s; }
.project-card:nth-child(4).is-visible { animation-delay: 0.1s; }
.project-card:nth-child(5).is-visible { animation-delay: 0.2s; }
.project-card:nth-child(6).is-visible { animation-delay: 0.3s; }

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

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.04);
  border-color: rgba(163, 230, 53, 0.4);
}

.project-card:hover .project-thumb .thumb-placeholder {
  transform: scale(1.05);
}

.project-thumb {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.08), rgba(168, 85, 247, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.thumb-placeholder {
  color: rgba(168, 85, 247, 0.25);
  transition: transform 0.5s ease;
}

.project-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  z-index: 1;
}

.project-body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.project-title {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1E1E24;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.project-excerpt {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #5A5A6E;
  margin: 0 0 14px 0;
  flex: 1;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tech-chip {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: #1E1E24;
  background: rgba(163, 230, 53, 0.1);
  padding: 4px 10px;
  border-radius: 50px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(163, 230, 53, 0.2);
}

.project-result {
  margin-bottom: 16px;
}

.result-highlight {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #84CC16;
  background: rgba(163, 230, 53, 0.06);
  padding: 6px 14px;
  border-radius: 8px;
  border-left: 3px solid #A3E635;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #A855F7;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto;
  align-self: flex-start;
}

.project-link:hover {
  color: #84CC16;
  gap: 12px;
}

.project-link:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 3px;
  border-radius: 4px;
}

.project-link svg {
  transition: transform 0.3s ease;
}

.project-link:hover svg {
  transform: translateX(4px);
}

/* --- View All Button --- */
.featured-action {
  text-align: center;
  margin-top: 10px;
}

.featured-view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 32px;
  border-radius: 60px;
  background: transparent;
  color: #1E1E24;
  border: 2px solid rgba(168, 85, 247, 0.3);
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.08);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
}

.featured-view-all:hover {
  border-color: #A855F7;
  background: rgba(168, 85, 247, 0.04);
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(168, 85, 247, 0.2);
  color: #9333EA;
}

.featured-view-all:focus-visible {
  outline: 3px solid #A855F7;
  outline-offset: 3px;
}

.featured-view-all svg {
  transition: transform 0.3s ease;
}

.featured-view-all:hover svg {
  transform: translateX(4px);
}

/* --- Focus States --- */
.featured-case-studies *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================================================
START: Project Categories Filter Section
================================================== */
/* --- Project Filter Section --- */
.project-filter {
  position: relative;
  padding: 90px 0 50px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* --- Background Layers --- */
.filter-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.filter-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 25% 30%, rgba(163, 230, 53, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 70% 65%, rgba(168, 85, 247, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 55% 25%, rgba(163, 230, 53, 0.03) 0%, transparent 60%);
  animation: filterMeshShift 24s ease-in-out infinite alternate;
}

@keyframes filterMeshShift {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.02) translate(-0.5%, 0.5%); }
  100% { transform: scale(1.03) translate(0.5%, -0.5%); }
}

.filter-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
}

.filter-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 48%, rgba(168, 85, 247, 0.02) 48%, rgba(168, 85, 247, 0.02) 49%, transparent 49%),
    linear-gradient(225deg, transparent 47%, rgba(163, 230, 53, 0.02) 47%, rgba(163, 230, 53, 0.02) 48%, transparent 48%);
  background-size: 180px 160px, 200px 170px;
  background-position: 15% 40%, 78% 55%;
  animation: filterCircuitDrift 30s linear infinite;
}

@keyframes filterCircuitDrift {
  from { background-position: 15% 40%, 78% 55%; }
  to { background-position: 17% 42%, 80% 57%; }
}

.filter-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='65' height='72' viewBox='0 0 65 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='32.5,4 60,18 60,54 32.5,68 5,54 5,18' fill='none' stroke='rgba(168,85,247,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 110px 120px;
  background-position: 70% 30%;
  mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  opacity: 0.5;
}

.filter-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.3;
  animation: filterGlowPulse 7s ease-in-out infinite alternate;
}

.filter-radial-glow--green {
  width: 350px;
  height: 350px;
  background: rgba(163, 230, 53, 0.25);
  top: -5%;
  right: -5%;
  animation-delay: 0s;
}

.filter-radial-glow--purple {
  width: 300px;
  height: 300px;
  background: rgba(168, 85, 247, 0.22);
  bottom: -10%;
  left: -4%;
  animation-delay: 3.5s;
}

@keyframes filterGlowPulse {
  0% { opacity: 0.25; transform: scale(1); }
  100% { opacity: 0.45; transform: scale(1.14); }
}

/* --- Floating Particles --- */
.filter-particles {
  position: absolute;
  inset: 0;
}

.filter-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: filterParticleFloat linear infinite;
}

.filter-particle--green {
  background: rgba(163, 230, 53, 0.35);
  box-shadow: 0 0 5px rgba(163, 230, 53, 0.4);
}

.filter-particle--purple {
  background: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.35);
}

@keyframes filterParticleFloat {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.45; }
  100% { transform: translateY(-100vh) translateX(25px) scale(0.2); opacity: 0; }
}

/* --- Container --- */
.filter-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Section Header --- */
.filter-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
}

.filter-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.07);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.filter-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1E1E24;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
}

.text-gradient {
  background: linear-gradient(135deg, #84CC16 0%, #A855F7 60%, #9333EA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.filter-description {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* --- Filter Controls --- */
.filter-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* Filter Chip Button */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1px solid rgba(168, 85, 247, 0.2);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #5A5A6E;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.filter-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(163, 230, 53, 0.5);
  box-shadow: 0 6px 18px rgba(163, 230, 53, 0.12), 0 2px 6px rgba(0, 0, 0, 0.03);
  color: #1E1E24;
}

.filter-chip:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
}

.filter-chip.is-active {
  background: linear-gradient(135deg, #A3E635, #84CC16);
  border-color: transparent;
  color: #1a1a1a;
  box-shadow: 0 6px 22px rgba(163, 230, 53, 0.4), 0 2px 8px rgba(132, 204, 22, 0.2);
  transform: translateY(-1px);
}

.filter-chip.is-active:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(163, 230, 53, 0.5), 0 3px 10px rgba(132, 204, 22, 0.25);
}

/* Filter Chip Icon */
.filter-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.75;
  transition: opacity 0.3s;
}

.filter-chip.is-active .filter-chip-icon {
  opacity: 1;
}

/* Active Count */
.filter-active-count {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #5A5A6E;
  margin: 0;
}

.filter-active-count strong {
  color: #1E1E24;
  font-weight: 700;
}

/* --- Focus States --- */
.project-filter *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================================================
START: Detailed Case Study Showcase Section
================================================== */
/* --- Case Study Showcase Section --- */
.case-showcase {
  position: relative;
  padding: 100px 0 90px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* --- Background Layers --- */
.showcase-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.showcase-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 25% 30%, rgba(163, 230, 53, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 70% 65%, rgba(168, 85, 247, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 55% 25%, rgba(163, 230, 53, 0.03) 0%, transparent 60%);
  animation: showcaseMeshShift 22s ease-in-out infinite alternate;
}

@keyframes showcaseMeshShift {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.02) translate(0.5%, -0.5%); }
  66% { transform: scale(1.01) translate(-0.5%, 0.5%); }
  100% { transform: scale(1.03) translate(0, 0); }
}

.showcase-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(ellipse 60% 50% at center, black 12%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at center, black 12%, transparent 65%);
}

.showcase-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 47%, rgba(168, 85, 247, 0.02) 47%, rgba(168, 85, 247, 0.02) 48%, transparent 48%),
    linear-gradient(225deg, transparent 46%, rgba(163, 230, 53, 0.02) 46%, rgba(163, 230, 53, 0.02) 47%, transparent 47%),
    linear-gradient(315deg, transparent 48.5%, rgba(168, 85, 247, 0.015) 48.5%, rgba(168, 85, 247, 0.015) 49.5%, transparent 49.5%);
  background-size: 190px 170px, 200px 180px, 210px 190px;
  background-position: 15% 40%, 75% 55%, 45% 70%;
  animation: showcaseCircuitDrift 28s linear infinite;
}

@keyframes showcaseCircuitDrift {
  from { background-position: 15% 40%, 75% 55%, 45% 70%; }
  to { background-position: 17% 42%, 77% 57%, 47% 72%; }
}

.showcase-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='70' height='78' viewBox='0 0 70 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='35,4 63,19 63,55 35,70 7,55 7,19' fill='none' stroke='rgba(168,85,247,0.04)' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 120px 135px;
  background-position: 80% 25%;
  mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 10%, transparent 55%);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 10%, transparent 55%);
  opacity: 0.6;
}

.showcase-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  animation: showcaseGlowPulse 8s ease-in-out infinite alternate;
}

.showcase-radial-glow--green {
  width: 420px;
  height: 420px;
  background: rgba(163, 230, 53, 0.25);
  top: -10%;
  left: -5%;
  animation-delay: 0s;
}

.showcase-radial-glow--purple {
  width: 380px;
  height: 380px;
  background: rgba(168, 85, 247, 0.22);
  bottom: -10%;
  right: -5%;
  animation-delay: 4s;
}

@keyframes showcaseGlowPulse {
  0% { opacity: 0.28; transform: scale(1); }
  100% { opacity: 0.48; transform: scale(1.16); }
}

/* --- Floating Particles --- */
.showcase-particles {
  position: absolute;
  inset: 0;
}

.showcase-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: showcaseParticleFloat linear infinite;
}

.showcase-particle--green {
  background: rgba(163, 230, 53, 0.35);
  box-shadow: 0 0 6px rgba(163, 230, 53, 0.4);
}

.showcase-particle--purple {
  background: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.35);
}

@keyframes showcaseParticleFloat {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-105vh) translateX(30px) scale(0.2); opacity: 0; }
}

/* --- Container --- */
.showcase-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Section Header --- */
.showcase-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}

.showcase-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.07);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.showcase-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1E1E24;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
}

.showcase-description {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* --- Main Layout --- */
.showcase-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 50px;
}

/* Image Area */
.showcase-image-area {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 100%;
  min-height: 420px;
}

.showcase-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.08), rgba(168, 85, 247, 0.1));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(168, 85, 247, 0.3);
  transition: transform 0.5s ease;
}

.showcase-image-placeholder:hover {
  transform: scale(1.02);
}

.showcase-image-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #9333EA;
  margin-top: 12px;
  letter-spacing: 0.04em;
}

.showcase-industry-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  z-index: 1;
}

/* Content Area */
.showcase-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.showcase-project-title {
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #1E1E24;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.showcase-overview {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* Information Cards Grid */
.showcase-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  padding: 20px 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
  border-color: rgba(163, 230, 53, 0.4);
}

.info-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.1), rgba(168, 85, 247, 0.1));
  color: #9333EA;
  margin-bottom: 12px;
}

.info-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1E1E24;
  margin: 0 0 6px 0;
}

.info-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #5A5A6E;
  margin: 0;
}

.info-card-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tech-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(163, 230, 53, 0.08);
  color: #1E1E24;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid rgba(163, 230, 53, 0.2);
}

.info-card-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-card-results li {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #5A5A6E;
  padding: 2px 0 2px 14px;
  position: relative;
}

.info-card-results li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #A3E635;
}

/* --- Key Metrics Row --- */
.showcase-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.metric-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  padding: 24px 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.35s ease;
}

.metric-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(163, 230, 53, 0.4);
}

.metric-value {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #1E1E24;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.metric-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #5A5A6E;
}

/* --- CTA Buttons --- */
.showcase-cta {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-showcase {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 60px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
}

.btn-showcase--primary {
  background: linear-gradient(135deg, #A3E635, #84CC16);
  color: #1a1a1a;
  box-shadow: 0 6px 24px rgba(163, 230, 53, 0.35);
}

.btn-showcase--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(163, 230, 53, 0.5);
}

.btn-showcase--secondary {
  background: transparent;
  color: #1E1E24;
  border: 2px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.08);
}

.btn-showcase--secondary:hover {
  border-color: #A855F7;
  background: rgba(168, 85, 247, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.2);
}

.btn-showcase svg {
  transition: transform 0.3s ease;
}

.btn-showcase:hover svg {
  transform: translateX(4px);
}

.btn-showcase--secondary:hover svg {
  transform: rotate(90deg);
}

/* Focus states */
.case-showcase *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------
   Scroll-triggered animation classes
-------------------------------------- */
.showcase-layout,
.showcase-metrics,
.showcase-cta {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.showcase-layout.is-visible,
.showcase-metrics.is-visible,
.showcase-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================
START: Our Development Approach Section
================================================== */
/* --- Development Approach Section --- */
.dev-approach {
  position: relative;
  padding: 100px 0 90px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* --- Background Layers --- */
.approach-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.approach-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 20% 35%, rgba(163, 230, 53, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 75% 60%, rgba(168, 85, 247, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 55% 25%, rgba(163, 230, 53, 0.04) 0%, transparent 60%);
  animation: approachMeshShift 22s ease-in-out infinite alternate;
}

@keyframes approachMeshShift {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.02) translate(-0.6%, 0.6%); }
  66% { transform: scale(1.01) translate(0.4%, -0.4%); }
  100% { transform: scale(1.03) translate(0.3%, 0.3%); }
}

.approach-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
}

.approach-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, transparent 47%, rgba(168, 85, 247, 0.02) 47%, rgba(168, 85, 247, 0.02) 48%, transparent 48%),
    linear-gradient(220deg, transparent 46%, rgba(163, 230, 53, 0.02) 46%, rgba(163, 230, 53, 0.02) 47%, transparent 47%),
    linear-gradient(310deg, transparent 48.5%, rgba(168, 85, 247, 0.015) 48.5%, rgba(168, 85, 247, 0.015) 49.5%, transparent 49.5%);
  background-size: 180px 170px, 200px 180px, 190px 190px;
  background-position: 10% 35%, 70% 55%, 40% 70%;
  animation: approachCircuitDrift 25s linear infinite;
}

@keyframes approachCircuitDrift {
  from { background-position: 10% 35%, 70% 55%, 40% 70%; }
  to { background-position: 12% 37%, 72% 57%, 42% 72%; }
}

.approach-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='65' height='72' viewBox='0 0 65 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='32.5,4 60,18 60,54 32.5,68 5,54 5,18' fill='none' stroke='rgba(168,85,247,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 110px 120px;
  background-position: 75% 25%;
  mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  opacity: 0.55;
}

.approach-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.32;
  animation: approachGlowPulse 8s ease-in-out infinite alternate;
}

.approach-radial-glow--green {
  width: 400px;
  height: 400px;
  background: rgba(163, 230, 53, 0.22);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.approach-radial-glow--purple {
  width: 360px;
  height: 360px;
  background: rgba(168, 85, 247, 0.2);
  bottom: -8%;
  left: -4%;
  animation-delay: 4s;
}

@keyframes approachGlowPulse {
  0% { opacity: 0.25; transform: scale(1); }
  100% { opacity: 0.45; transform: scale(1.15); }
}

/* --- Floating Particles --- */
.approach-particles {
  position: absolute;
  inset: 0;
}

.approach-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: approachParticleFloat linear infinite;
}

.approach-particle--green {
  background: rgba(163, 230, 53, 0.35);
  box-shadow: 0 0 5px rgba(163, 230, 53, 0.4);
}

.approach-particle--purple {
  background: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.35);
}

@keyframes approachParticleFloat {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.45; }
  100% { transform: translateY(-100vh) translateX(25px) scale(0.2); opacity: 0; }
}

/* --- Container --- */
.approach-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Section Header --- */
.approach-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.approach-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.07);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.approach-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1E1E24;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
}

.approach-description {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* --- Steps Grid --- */
.approach-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}

/* --- Step Card --- */
.step-card {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;
  padding: 30px 24px 26px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  border-color: rgba(163, 230, 53, 0.4);
}

.step-number {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #A855F7;
  background: rgba(168, 85, 247, 0.08);
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.step-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.1), rgba(168, 85, 247, 0.1));
  color: #9333EA;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.step-card:hover .step-icon-wrap {
  color: #84CC16;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.18), rgba(168, 85, 247, 0.18));
  transform: scale(1.08);
}

.step-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1E1E24;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.step-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #5A5A6E;
  margin: 0;
}

/* --- Summary Banner --- */
.approach-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  padding: 46px 48px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.approach-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.banner-ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
}

.banner-ambient--left {
  width: 260px;
  height: 260px;
  background: rgba(168, 85, 247, 0.18);
  top: -30%;
  left: -6%;
}

.banner-ambient--right {
  width: 240px;
  height: 240px;
  background: rgba(163, 230, 53, 0.15);
  bottom: -25%;
  right: -5%;
}

.approach-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.approach-banner-text {
  flex: 1;
  min-width: 250px;
}

.approach-banner-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #1E1E24;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.approach-banner-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5A5A6E;
  margin: 0;
  max-width: 540px;
}

.approach-banner-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Banner Buttons */
.approach-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 60px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  white-space: nowrap;
}

.approach-btn--primary {
  background: linear-gradient(135deg, #A3E635, #84CC16);
  color: #1a1a1a;
  box-shadow: 0 6px 24px rgba(163, 230, 53, 0.35);
}

.approach-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(163, 230, 53, 0.5);
}

.approach-btn--secondary {
  background: transparent;
  color: #1E1E24;
  border: 2px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.08);
}

.approach-btn--secondary:hover {
  border-color: #A855F7;
  background: rgba(168, 85, 247, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.2);
}

.approach-btn svg {
  transition: transform 0.3s ease;
}

.approach-btn:hover svg {
  transform: translateX(4px);
}

.approach-btn--secondary:hover svg {
  transform: rotate(90deg);
}

/* Focus states */
.dev-approach *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scroll-triggered animation */
.step-card,
.approach-banner {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.step-card.is-visible,
.approach-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================
START: Technologies Used Across Projects Section
================================================== */
/* --- Technology Stack Section --- */
.tech-stack {
  position: relative;
  padding: 100px 0 90px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* Background Layers */
.tech-stack-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ts-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 20% 30%, rgba(163, 230, 53, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(168, 85, 247, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 55% 25%, rgba(163, 230, 53, 0.04) 0%, transparent 60%);
  animation: tsMeshShift 22s ease-in-out infinite alternate;
}

@keyframes tsMeshShift {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.02) translate(-0.6%, 0.6%); }
  66% { transform: scale(1.01) translate(0.4%, -0.4%); }
  100% { transform: scale(1.03) translate(0.3%, 0.3%); }
}

.ts-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
}

.ts-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, transparent 47%, rgba(168, 85, 247, 0.02) 47%, rgba(168, 85, 247, 0.02) 48%, transparent 48%),
    linear-gradient(220deg, transparent 46%, rgba(163, 230, 53, 0.02) 46%, rgba(163, 230, 53, 0.02) 47%, transparent 47%),
    linear-gradient(310deg, transparent 48.5%, rgba(168, 85, 247, 0.015) 48.5%, rgba(168, 85, 247, 0.015) 49.5%, transparent 49.5%);
  background-size: 180px 170px, 200px 180px, 190px 190px;
  background-position: 10% 35%, 70% 55%, 40% 70%;
  animation: tsCircuitDrift 25s linear infinite;
}

@keyframes tsCircuitDrift {
  from { background-position: 10% 35%, 70% 55%, 40% 70%; }
  to { background-position: 12% 37%, 72% 57%, 42% 72%; }
}

.ts-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='65' height='72' viewBox='0 0 65 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='32.5,4 60,18 60,54 32.5,68 5,54 5,18' fill='none' stroke='rgba(168,85,247,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 110px 120px;
  background-position: 75% 25%;
  mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  opacity: 0.55;
}

.ts-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.32;
  animation: tsGlowPulse 8s ease-in-out infinite alternate;
}

.ts-radial-glow--green {
  width: 400px;
  height: 400px;
  background: rgba(163, 230, 53, 0.22);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.ts-radial-glow--purple {
  width: 360px;
  height: 360px;
  background: rgba(168, 85, 247, 0.2);
  bottom: -8%;
  left: -4%;
  animation-delay: 4s;
}

@keyframes tsGlowPulse {
  0% { opacity: 0.25; transform: scale(1); }
  100% { opacity: 0.45; transform: scale(1.15); }
}

/* Floating Particles */
.ts-particles {
  position: absolute;
  inset: 0;
}

.ts-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: tsParticleFloat linear infinite;
}

.ts-particle--green {
  background: rgba(163, 230, 53, 0.35);
  box-shadow: 0 0 5px rgba(163, 230, 53, 0.4);
}

.ts-particle--purple {
  background: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.35);
}

@keyframes tsParticleFloat {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.45; }
  100% { transform: translateY(-100vh) translateX(25px) scale(0.2); opacity: 0; }
}

/* Container */
.tech-stack-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Section Header */
.tech-stack-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}

.ts-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.07);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.ts-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1E1E24;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
}

.ts-description {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* Categories Grid */
.ts-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}

/* Category Card */
.ts-category {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;
  padding: 28px 24px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ts-category:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  border-color: rgba(163, 230, 53, 0.4);
}

.ts-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.1), rgba(168, 85, 247, 0.1));
  color: #9333EA;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.ts-category:hover .ts-cat-icon {
  color: #84CC16;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.18), rgba(168, 85, 247, 0.18));
  transform: scale(1.08);
}

.ts-cat-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1E1E24;
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}

.ts-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Technology Badge */
.ts-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5A5A6E;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(168, 85, 247, 0.15);
  padding: 5px 14px;
  border-radius: 50px;
  transition: all 0.3s ease;
  cursor: default;
}

.ts-badge:hover {
  transform: translateY(-2px);
  background: rgba(163, 230, 53, 0.12);
  border-color: rgba(163, 230, 53, 0.5);
  color: #1E1E24;
  box-shadow: 0 4px 12px rgba(163, 230, 53, 0.15);
}

/* Trust Banner */
.ts-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  padding: 46px 48px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.ts-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ts-banner-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
}

.ts-banner-glow--left {
  width: 260px;
  height: 260px;
  background: rgba(168, 85, 247, 0.18);
  top: -30%;
  left: -6%;
}

.ts-banner-glow--right {
  width: 240px;
  height: 240px;
  background: rgba(163, 230, 53, 0.15);
  bottom: -25%;
  right: -5%;
}

.ts-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.ts-banner-text {
  flex: 1;
  min-width: 250px;
}

.ts-banner-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #1E1E24;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ts-banner-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5A5A6E;
  margin: 0;
  max-width: 540px;
}

.ts-banner-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Buttons */
.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 60px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  white-space: nowrap;
}

.ts-btn--primary {
  background: linear-gradient(135deg, #A3E635, #84CC16);
  color: #1a1a1a;
  box-shadow: 0 6px 24px rgba(163, 230, 53, 0.35);
}

.ts-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(163, 230, 53, 0.5);
}

.ts-btn--secondary {
  background: transparent;
  color: #1E1E24;
  border: 2px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.08);
}

.ts-btn--secondary:hover {
  border-color: #A855F7;
  background: rgba(168, 85, 247, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.2);
}

.ts-btn svg {
  transition: transform 0.3s ease;
}

.ts-btn:hover svg {
  transform: translateX(4px);
}

.ts-btn--secondary:hover svg {
  transform: rotate(90deg);
}

/* Focus states */
.tech-stack *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scroll reveal animation */
.ts-category,
.ts-banner {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ts-category.is-visible,
.ts-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================
START: Client Success Stories Section
================================================== */
/* --- Client Success Stories Section --- */
.client-stories {
  position: relative;
  padding: 100px 0 90px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* Background Layers */
.stories-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.stories-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 20% 30%, rgba(163, 230, 53, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(168, 85, 247, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 55% 25%, rgba(163, 230, 53, 0.04) 0%, transparent 60%);
  animation: storiesMeshShift 22s ease-in-out infinite alternate;
}

@keyframes storiesMeshShift {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.02) translate(-0.6%, 0.6%); }
  66% { transform: scale(1.01) translate(0.4%, -0.4%); }
  100% { transform: scale(1.03) translate(0.3%, 0.3%); }
}

.stories-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
}

.stories-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, transparent 47%, rgba(168, 85, 247, 0.02) 47%, rgba(168, 85, 247, 0.02) 48%, transparent 48%),
    linear-gradient(220deg, transparent 46%, rgba(163, 230, 53, 0.02) 46%, rgba(163, 230, 53, 0.02) 47%, transparent 47%),
    linear-gradient(310deg, transparent 48.5%, rgba(168, 85, 247, 0.015) 48.5%, rgba(168, 85, 247, 0.015) 49.5%, transparent 49.5%);
  background-size: 180px 170px, 200px 180px, 190px 190px;
  background-position: 10% 35%, 70% 55%, 40% 70%;
  animation: storiesCircuitDrift 25s linear infinite;
}

@keyframes storiesCircuitDrift {
  from { background-position: 10% 35%, 70% 55%, 40% 70%; }
  to { background-position: 12% 37%, 72% 57%, 42% 72%; }
}

.stories-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='65' height='72' viewBox='0 0 65 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='32.5,4 60,18 60,54 32.5,68 5,54 5,18' fill='none' stroke='rgba(168,85,247,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 110px 120px;
  background-position: 75% 25%;
  mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  opacity: 0.55;
}

.stories-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.32;
  animation: storiesGlowPulse 8s ease-in-out infinite alternate;
}

.stories-radial-glow--green {
  width: 400px;
  height: 400px;
  background: rgba(163, 230, 53, 0.22);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.stories-radial-glow--purple {
  width: 360px;
  height: 360px;
  background: rgba(168, 85, 247, 0.2);
  bottom: -8%;
  left: -4%;
  animation-delay: 4s;
}

@keyframes storiesGlowPulse {
  0% { opacity: 0.25; transform: scale(1); }
  100% { opacity: 0.45; transform: scale(1.15); }
}

/* Floating Particles */
.stories-particles {
  position: absolute;
  inset: 0;
}

.stories-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: storiesParticleFloat linear infinite;
}

.stories-particle--green {
  background: rgba(163, 230, 53, 0.35);
  box-shadow: 0 0 5px rgba(163, 230, 53, 0.4);
}

.stories-particle--purple {
  background: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.35);
}

@keyframes storiesParticleFloat {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.45; }
  100% { transform: translateY(-100vh) translateX(25px) scale(0.2); opacity: 0; }
}

/* Container */
.stories-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Section Header */
.stories-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}

.stories-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.07);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.stories-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1E1E24;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
}

.stories-description {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* --- Carousel --- */
.stories-carousel {
  margin-bottom: 50px;
}

.carousel-viewport {
  overflow: hidden;
  padding: 10px 0 20px; /* space for card shadows */
  scroll-behavior: smooth;
}

.carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s ease;
}

/* Story Card */
.story-card {
  flex: 0 0 calc((100% - 48px) / 3); /* 3 cards with 2 gaps */
  max-width: calc((100% - 48px) / 3);
}

.story-card-inner {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;
  padding: 28px 24px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  height: 100%;
}

.story-card-inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  border-color: rgba(163, 230, 53, 0.4);
}

.story-client-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.1), rgba(168, 85, 247, 0.1));
  color: #9333EA;
  margin-bottom: 14px;
}

.story-industry-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid rgba(168, 85, 247, 0.2);
  margin-bottom: 12px;
}

.story-client-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1E1E24;
  margin: 0 0 4px 0;
}

.story-project-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #5A5A6E;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.story-challenge,
.story-solution {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #5A5A6E;
  margin: 0 0 8px 0;
}

.story-results {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.result-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(163, 230, 53, 0.08);
  color: #84CC16;
  padding: 2px 10px;
  border-radius: 50px;
  border: 1px solid rgba(163, 230, 53, 0.25);
}

.story-quote {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #1E1E24;
  margin: 14px 0 10px;
  padding-left: 10px;
  border-left: 3px solid #A855F7;
}

.story-rating {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.star {
  font-size: 1rem;
  color: #ccc;
}

.star.filled {
  color: #F59E0B;
}

.story-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.story-year {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #5A5A6E;
}

.story-techs {
  display: flex;
  gap: 4px;
}

.mini-tech {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(168, 85, 247, 0.06);
  color: #9333EA;
  padding: 2px 8px;
  border-radius: 50px;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

/* Carousel Controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  color: #9333EA;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-btn:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: #A855F7;
  transform: scale(1.05);
}

.carousel-btn:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
}

.carousel-dots {
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.carousel-dot.active {
  background: #A855F7;
  transform: scale(1.3);
}

/* Trust Banner */
.stories-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  padding: 46px 48px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.stories-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stories-banner-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
}

.stories-banner-glow--left {
  width: 260px;
  height: 260px;
  background: rgba(168, 85, 247, 0.18);
  top: -30%;
  left: -6%;
}

.stories-banner-glow--right {
  width: 240px;
  height: 240px;
  background: rgba(163, 230, 53, 0.15);
  bottom: -25%;
  right: -5%;
}

.stories-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.stories-banner-text {
  flex: 1;
  min-width: 250px;
}

.stories-banner-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #1E1E24;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.stories-banner-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5A5A6E;
  margin: 0;
  max-width: 540px;
}

.stories-banner-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Buttons */
.stories-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 60px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  white-space: nowrap;
}

.stories-btn--primary {
  background: linear-gradient(135deg, #A3E635, #84CC16);
  color: #1a1a1a;
  box-shadow: 0 6px 24px rgba(163, 230, 53, 0.35);
}

.stories-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(163, 230, 53, 0.5);
}

.stories-btn--secondary {
  background: transparent;
  color: #1E1E24;
  border: 2px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.08);
}

.stories-btn--secondary:hover {
  border-color: #A855F7;
  background: rgba(168, 85, 247, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.2);
}

.stories-btn svg {
  transition: transform 0.3s ease;
}

.stories-btn:hover svg {
  transform: translateX(4px);
}

.stories-btn--secondary:hover svg {
  transform: rotate(90deg);
}

/* Focus states */
.client-stories *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================================================
START: Industries We've Helped Section
================================================== */
/* --- Industries Section --- */
.industries-section {
  position: relative;
  padding: 100px 0 90px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* Background Layers */
.industries-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ind-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 20% 30%, rgba(163, 230, 53, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(168, 85, 247, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 55% 25%, rgba(163, 230, 53, 0.04) 0%, transparent 60%);
  animation: indMeshShift 22s ease-in-out infinite alternate;
}

@keyframes indMeshShift {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.02) translate(-0.6%, 0.6%); }
  66% { transform: scale(1.01) translate(0.4%, -0.4%); }
  100% { transform: scale(1.03) translate(0.3%, 0.3%); }
}

.ind-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
}

.ind-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, transparent 47%, rgba(168, 85, 247, 0.02) 47%, rgba(168, 85, 247, 0.02) 48%, transparent 48%),
    linear-gradient(220deg, transparent 46%, rgba(163, 230, 53, 0.02) 46%, rgba(163, 230, 53, 0.02) 47%, transparent 47%),
    linear-gradient(310deg, transparent 48.5%, rgba(168, 85, 247, 0.015) 48.5%, rgba(168, 85, 247, 0.015) 49.5%, transparent 49.5%);
  background-size: 180px 170px, 200px 180px, 190px 190px;
  background-position: 10% 35%, 70% 55%, 40% 70%;
  animation: indCircuitDrift 25s linear infinite;
}

@keyframes indCircuitDrift {
  from { background-position: 10% 35%, 70% 55%, 40% 70%; }
  to { background-position: 12% 37%, 72% 57%, 42% 72%; }
}

.ind-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='65' height='72' viewBox='0 0 65 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='32.5,4 60,18 60,54 32.5,68 5,54 5,18' fill='none' stroke='rgba(168,85,247,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 110px 120px;
  background-position: 75% 25%;
  mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  opacity: 0.55;
}

.ind-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.32;
  animation: indGlowPulse 8s ease-in-out infinite alternate;
}

.ind-radial-glow--green {
  width: 400px;
  height: 400px;
  background: rgba(163, 230, 53, 0.22);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.ind-radial-glow--purple {
  width: 360px;
  height: 360px;
  background: rgba(168, 85, 247, 0.2);
  bottom: -8%;
  left: -4%;
  animation-delay: 4s;
}

@keyframes indGlowPulse {
  0% { opacity: 0.25; transform: scale(1); }
  100% { opacity: 0.45; transform: scale(1.15); }
}

/* Floating Particles */
.ind-particles {
  position: absolute;
  inset: 0;
}

.ind-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: indParticleFloat linear infinite;
}

.ind-particle--green {
  background: rgba(163, 230, 53, 0.35);
  box-shadow: 0 0 5px rgba(163, 230, 53, 0.4);
}

.ind-particle--purple {
  background: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.35);
}

@keyframes indParticleFloat {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.45; }
  100% { transform: translateY(-100vh) translateX(25px) scale(0.2); opacity: 0; }
}

/* Container */
.industries-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Section Header */
.industries-header {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 60px;
}

.ind-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.07);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.ind-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1E1E24;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
}

.ind-description {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* Industry Cards Grid */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

/* Industry Card */
.industry-card {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;
  padding: 28px 22px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}

.industry-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  border-color: rgba(163, 230, 53, 0.4);
}

.ind-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.1), rgba(168, 85, 247, 0.1));
  color: #9333EA;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.industry-card:hover .ind-card-icon {
  color: #84CC16;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.18), rgba(168, 85, 247, 0.18));
  transform: scale(1.06);
}

.ind-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1E1E24;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.ind-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #5A5A6E;
  margin: 0 0 12px 0;
  flex: 1;
}

.ind-card-solutions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.ind-solution-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(163, 230, 53, 0.07);
  color: #84CC16;
  padding: 2px 10px;
  border-radius: 50px;
  border: 1px solid rgba(163, 230, 53, 0.25);
}

.ind-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #A855F7;
  text-decoration: none;
  transition: color 0.3s, gap 0.3s;
  margin-top: auto;
}

.ind-card-link:hover {
  color: #84CC16;
  gap: 10px;
}

.ind-card-link svg {
  transition: transform 0.3s ease;
}

.ind-card-link:hover svg {
  transform: translateX(4px);
}

/* Industries Banner */
.industries-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  padding: 46px 48px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.ind-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ind-banner-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
}

.ind-banner-glow--left {
  width: 260px;
  height: 260px;
  background: rgba(168, 85, 247, 0.18);
  top: -30%;
  left: -6%;
}

.ind-banner-glow--right {
  width: 240px;
  height: 240px;
  background: rgba(163, 230, 53, 0.15);
  bottom: -25%;
  right: -5%;
}

.industries-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.ind-banner-text {
  flex: 1;
  min-width: 250px;
}

.ind-banner-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #1E1E24;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ind-banner-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5A5A6E;
  margin: 0;
  max-width: 540px;
}

.ind-banner-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Banner Buttons */
.ind-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 60px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  white-space: nowrap;
}

.ind-btn--primary {
  background: linear-gradient(135deg, #A3E635, #84CC16);
  color: #1a1a1a;
  box-shadow: 0 6px 24px rgba(163, 230, 53, 0.35);
}

.ind-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(163, 230, 53, 0.5);
}

.ind-btn--secondary {
  background: transparent;
  color: #1E1E24;
  border: 2px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.08);
}

.ind-btn--secondary:hover {
  border-color: #A855F7;
  background: rgba(168, 85, 247, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.2);
}

.ind-btn svg {
  transition: transform 0.3s ease;
}

.ind-btn:hover svg {
  transform: translateX(4px);
}

.ind-btn--secondary:hover svg {
  transform: rotate(90deg);
}

/* Focus states */
.industries-section *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scroll reveal animation */
.industry-card,
.industries-banner {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.industry-card.is-visible,
.industries-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================
START: Frequently Asked Questions Section
================================================== */
/* --- FAQ Section --- */
.faq-section {
  position: relative;
  padding: 100px 0 90px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* Background Layers */
.faq-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.faq-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 20% 30%, rgba(163, 230, 53, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(168, 85, 247, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 55% 25%, rgba(163, 230, 53, 0.04) 0%, transparent 60%);
  animation: faqMeshShift 22s ease-in-out infinite alternate;
}

@keyframes faqMeshShift {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.02) translate(-0.6%, 0.6%); }
  66% { transform: scale(1.01) translate(0.4%, -0.4%); }
  100% { transform: scale(1.03) translate(0.3%, 0.3%); }
}

.faq-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at center, black 12%, transparent 60%);
}

.faq-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, transparent 47%, rgba(168, 85, 247, 0.02) 47%, rgba(168, 85, 247, 0.02) 48%, transparent 48%),
    linear-gradient(220deg, transparent 46%, rgba(163, 230, 53, 0.02) 46%, rgba(163, 230, 53, 0.02) 47%, transparent 47%),
    linear-gradient(310deg, transparent 48.5%, rgba(168, 85, 247, 0.015) 48.5%, rgba(168, 85, 247, 0.015) 49.5%, transparent 49.5%);
  background-size: 180px 170px, 200px 180px, 190px 190px;
  background-position: 10% 35%, 70% 55%, 40% 70%;
  animation: faqCircuitDrift 25s linear infinite;
}

@keyframes faqCircuitDrift {
  from { background-position: 10% 35%, 70% 55%, 40% 70%; }
  to { background-position: 12% 37%, 72% 57%, 42% 72%; }
}

.faq-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='65' height='72' viewBox='0 0 65 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='32.5,4 60,18 60,54 32.5,68 5,54 5,18' fill='none' stroke='rgba(168,85,247,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 110px 120px;
  background-position: 75% 25%;
  mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 65% 35%, black 8%, transparent 50%);
  opacity: 0.55;
}

.faq-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.32;
  animation: faqGlowPulse 8s ease-in-out infinite alternate;
}

.faq-radial-glow--green {
  width: 400px;
  height: 400px;
  background: rgba(163, 230, 53, 0.22);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.faq-radial-glow--purple {
  width: 360px;
  height: 360px;
  background: rgba(168, 85, 247, 0.2);
  bottom: -8%;
  left: -4%;
  animation-delay: 4s;
}

@keyframes faqGlowPulse {
  0% { opacity: 0.25; transform: scale(1); }
  100% { opacity: 0.45; transform: scale(1.15); }
}

/* Floating Particles */
.faq-particles {
  position: absolute;
  inset: 0;
}

.faq-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: faqParticleFloat linear infinite;
}

.faq-particle--green {
  background: rgba(163, 230, 53, 0.35);
  box-shadow: 0 0 5px rgba(163, 230, 53, 0.4);
}

.faq-particle--purple {
  background: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.35);
}

@keyframes faqParticleFloat {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.45; }
  100% { transform: translateY(-100vh) translateX(25px) scale(0.2); opacity: 0; }
}

/* Container */
.faq-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Section Header */
.faq-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}

.faq-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.07);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.faq-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1E1E24;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
}

.faq-description {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0;
}

/* Accordion */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 50px;
}

/* FAQ Item */
.faq-item {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  transition: border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
}

.faq-item:hover {
  border-color: rgba(163, 230, 53, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Question Button */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1E1E24;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  letter-spacing: -0.01em;
  transition: color 0.3s;
}

.faq-question:hover {
  color: #A855F7;
}

.faq-question:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: -2px;
  border-radius: 4px;
}

.faq-question-text {
  flex: 1;
}

/* Chevron Icon */
.faq-chevron {
  flex-shrink: 0;
  color: #A855F7;
  transition: transform 0.35s ease;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}

/* Answer Wrapper */
.faq-answer-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer-wrapper {
  max-height: 300px; /* large enough, overridden by JS */
}

.faq-answer {
  padding: 0 24px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5A5A6E;
}

/* Contact Banner */
.faq-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  padding: 46px 48px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.faq-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.faq-banner-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
}

.faq-banner-glow--left {
  width: 260px;
  height: 260px;
  background: rgba(168, 85, 247, 0.18);
  top: -30%;
  left: -6%;
}

.faq-banner-glow--right {
  width: 240px;
  height: 240px;
  background: rgba(163, 230, 53, 0.15);
  bottom: -25%;
  right: -5%;
}

.faq-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.faq-banner-text {
  flex: 1;
  min-width: 250px;
}

.faq-banner-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #1E1E24;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.faq-banner-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5A5A6E;
  margin: 0;
  max-width: 540px;
}

.faq-banner-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Buttons */
.faq-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 60px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  white-space: nowrap;
}

.faq-btn--primary {
  background: linear-gradient(135deg, #A3E635, #84CC16);
  color: #1a1a1a;
  box-shadow: 0 6px 24px rgba(163, 230, 53, 0.35);
}

.faq-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(163, 230, 53, 0.5);
}

.faq-btn--secondary {
  background: transparent;
  color: #1E1E24;
  border: 2px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.08);
}

.faq-btn--secondary:hover {
  border-color: #A855F7;
  background: rgba(168, 85, 247, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.2);
}

.faq-btn svg {
  transition: transform 0.3s ease;
}

.faq-btn:hover svg {
  transform: translateX(4px);
}

.faq-btn--secondary:hover svg {
  transform: rotate(90deg);
}

/* Focus states */
.faq-section *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================================================
START: Final Call To Action Section
================================================== */
/* --- Final CTA Section --- */
.cta-final {
  position: relative;
  padding: 110px 0 100px;
  background: var(--bg-white, #FAFBFC);
  overflow: hidden;
  isolation: isolate;
}

/* Background Layers */
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cta-mesh-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 25% 35%, rgba(163, 230, 53, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 70% 60%, rgba(168, 85, 247, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 50% 25%, rgba(163, 230, 53, 0.05) 0%, transparent 60%);
  animation: ctaMeshShift 20s ease-in-out infinite alternate;
}

@keyframes ctaMeshShift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.04) translate(0.4%, -0.3%); }
}

.cta-tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(163, 230, 53, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 50% at center, black 18%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at center, black 18%, transparent 65%);
}

.cta-circuit-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 47%, rgba(168, 85, 247, 0.025) 47%, rgba(168, 85, 247, 0.025) 48%, transparent 48%),
    linear-gradient(225deg, transparent 46%, rgba(163, 230, 53, 0.025) 46%, rgba(163, 230, 53, 0.025) 47%, transparent 47%);
  background-size: 200px 180px, 190px 200px;
  background-position: 10% 30%, 75% 65%;
  animation: ctaCircuitDrift 26s linear infinite;
}

@keyframes ctaCircuitDrift {
  from { background-position: 10% 30%, 75% 65%; }
  to { background-position: 12% 32%, 77% 67%; }
}

.cta-hexagon-outlines {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='70' height='78' viewBox='0 0 70 78' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='35,4 63,19 63,55 35,70 7,55 7,19' fill='none' stroke='rgba(168,85,247,0.05)' stroke-width='1.3'/%3E%3C/svg%3E");
  background-size: 130px 145px;
  background-position: 80% 20%;
  mask-image: radial-gradient(ellipse 55% 45% at 65% 30%, black 12%, transparent 55%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at 65% 30%, black 12%, transparent 55%);
  opacity: 0.65;
}

.cta-radial-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.4;
  animation: ctaGlowPulse 8s ease-in-out infinite alternate;
}

.cta-radial-glow--green {
  width: 450px;
  height: 450px;
  background: rgba(163, 230, 53, 0.25);
  top: -15%;
  right: -10%;
  animation-delay: 0s;
}

.cta-radial-glow--purple {
  width: 400px;
  height: 400px;
  background: rgba(168, 85, 247, 0.22);
  bottom: -12%;
  left: -8%;
  animation-delay: 4s;
}

@keyframes ctaGlowPulse {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0.55; transform: scale(1.15); }
}

/* Floating Particles */
.cta-particles {
  position: absolute;
  inset: 0;
}

.cta-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: ctaParticleFloat linear infinite;
}

.cta-particle--green {
  background: rgba(163, 230, 53, 0.4);
  box-shadow: 0 0 7px rgba(163, 230, 53, 0.5);
}

.cta-particle--purple {
  background: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 7px rgba(168, 85, 247, 0.45);
}

@keyframes ctaParticleFloat {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.65; }
  90% { opacity: 0.55; }
  100% { transform: translateY(-105vh) translateX(30px) scale(0.25); opacity: 0; }
}

/* Container */
.cta-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Grid Layout */
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Left Content */
.cta-content {
  animation: ctaFadeUp 0.9s ease-out forwards;
}

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

.cta-label {
  display: inline-block;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9333EA;
  background: rgba(168, 85, 247, 0.08);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.cta-heading {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #1E1E24;
  margin: 0 0 18px 0;
  letter-spacing: -0.03em;
}

.cta-description {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5A5A6E;
  margin: 0 0 28px 0;
}

/* Checklist */
.cta-checklist {
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cta-checklist-item {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1E1E24;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}

.cta-checklist-item:hover {
  border-color: rgba(163, 230, 53, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163, 230, 53, 0.1);
}

.check-icon {
  flex-shrink: 0;
  color: #84CC16;
}

/* Buttons */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 60px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  white-space: nowrap;
}

.cta-btn--primary {
  background: linear-gradient(135deg, #A3E635, #84CC16);
  color: #1a1a1a;
  box-shadow: 0 8px 28px rgba(163, 230, 53, 0.4);
}

.cta-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(163, 230, 53, 0.55);
}

.cta-btn--secondary {
  background: transparent;
  color: #1E1E24;
  border: 2px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.08);
}

.cta-btn--secondary:hover {
  border-color: #A855F7;
  background: rgba(168, 85, 247, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.2);
}

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #A855F7;
  text-decoration: none;
  transition: color 0.3s, gap 0.3s;
  margin-left: 8px;
}

.cta-link:hover {
  color: #84CC16;
  gap: 12px;
}

.cta-link svg {
  transition: transform 0.3s;
}

.cta-link:hover svg {
  transform: translateX(4px);
}

/* Trust Badges */
.cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1E1E24;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 16px;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  transition: all 0.3s;
}

.trust-badge:hover {
  background: rgba(163, 230, 53, 0.06);
  border-color: rgba(163, 230, 53, 0.4);
  transform: translateY(-2px);
}

.trust-badge svg {
  color: #A855F7;
  transition: color 0.3s;
}

.trust-badge:hover svg {
  color: #84CC16;
}

/* Right Visual Card */
.cta-visual {
  animation: ctaFadeUp 0.9s ease-out 0.2s forwards;
  opacity: 0;
}

.visual-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 28px;
  padding: 40px 30px;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s ease;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.1);
}

.visual-dashboard {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.dashboard-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 140px;
  margin-bottom: 40px;
}

.chart-bar {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, #A3E635, rgba(168, 85, 247, 0.4));
  border-radius: 8px 8px 0 0;
  animation: barAnimate 2s ease-out infinite alternate;
}

@keyframes barAnimate {
  from { transform: scaleY(0.8); opacity: 0.8; }
  to { transform: scaleY(1); opacity: 1; }
}

.circle-progress {
  position: absolute;
  top: 10px;
  right: 20px;
}

.code-snippet-card {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  border-left: 4px solid #A3E635;
  margin-bottom: 20px;
}

.code-purple { color: #A855F7; }
.code-green { color: #1E1E24; }
.code-string { color: #84CC16; }

.hex-decoration {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: rgba(168,85,247,0.5);
  animation: hexFloat 6s ease-in-out infinite;
}

@keyframes hexFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(10deg); }
}

/* Focus states */
.cta-final *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================================================
START: Portfolio Hero Banner
================================================== */

/* ----- Container ----- */
#portfolio-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--top-bar-height) + var(--nav-height) + 40px) 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.portfolio-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.portfolio-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.08;
    pointer-events: none;
}

.portfolio-hero__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.06;
}

.portfolio-hero__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.05;
}

.portfolio-hero__glow--3 {
    width: 300px;
    height: 300px;
    top: 30%;
    left: 45%;
    background: var(--color-purple);
    opacity: 0.03;
}

.portfolio-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 10s ease-in-out infinite;
}

.portfolio-hero__orb--1 {
    width: 120px;
    height: 120px;
    top: 8%;
    right: 18%;
    animation-delay: 0s;
}

.portfolio-hero__orb--2 {
    width: 80px;
    height: 80px;
    bottom: 15%;
    left: 22%;
    animation-delay: 2.5s;
}

.portfolio-hero__orb--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.portfolio-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.portfolio-hero__shape--1 {
    width: 180px;
    height: 180px;
    top: 5%;
    left: 8%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.portfolio-hero__shape--2 {
    width: 130px;
    height: 130px;
    bottom: 25%;
    right: 6%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.portfolio-hero__shape--3 {
    width: 90px;
    height: 90px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.portfolio-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#portfolio-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 8s ease-in-out infinite;
}

#portfolio-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 6%;
    animation-delay: 0s;
}

#portfolio-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 90%;
    animation-delay: 1.5s;
}

#portfolio-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 22%;
    left: 85%;
    animation-delay: 3s;
}

#portfolio-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.8s;
}

#portfolio-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 3%;
    animation-delay: 2.2s;
}

#portfolio-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 95%;
    animation-delay: 3.8s;
}

/* ----- Container ----- */
.portfolio-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ============================================================
   LEFT COLUMN — Content
   ============================================================ */
.portfolio-hero__content {
    flex: 1 1 55%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.portfolio-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.portfolio-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.portfolio-hero__title {
    font-size: 3.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.portfolio-hero__title .highlight-lime {
    position: relative;
    display: inline-block;
}

.portfolio-hero__title .highlight-lime::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(192, 227, 74, 0.25);
    border-radius: 4px;
    z-index: -1;
}

.portfolio-hero__description {
    font-size: 1.1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 46ch;
    margin: 0;
}

/* ----- Buttons ----- */
.portfolio-hero__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-portfolio-primary {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-portfolio-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

.btn-portfolio-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-portfolio-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-portfolio-secondary i {
    transition: transform 0.3s ease;
}

.btn-portfolio-secondary:hover i {
    transform: translateX(4px);
}

/* ----- Trust Badges ----- */
.portfolio-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-top: 8px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.trust-badge__icon {
    color: var(--color-lime);
    font-size: 0.85rem;
}

.trust-badge__text {
    line-height: 1.3;
}

/* ============================================================
   RIGHT COLUMN — Premium Visual Composition
   ============================================================ */
.portfolio-hero__visual {
    flex: 1 1 45%;
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Main Dashboard Card ----- */
.portfolio-visual__dashboard {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 22px 24px 20px;
    box-shadow: 0 32px 80px rgba(26, 26, 46, 0.08);
    z-index: 5;
    transition: all 0.4s ease;
}

.portfolio-visual__dashboard:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px rgba(26, 26, 46, 0.12);
}

/* Dashboard Header */
.dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dashboard__dots {
    display: flex;
    gap: 5px;
}

.dashboard__dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dashboard__dots .dot:nth-child(1) { background: #F87171; }
.dashboard__dots .dot:nth-child(2) { background: #FBBF24; }
.dashboard__dots .dot:nth-child(3) { background: #34D399; }

.dashboard__title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    letter-spacing: 0.03em;
}

/* Dashboard Projects */
.dashboard__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-gray-light);
}

.dashboard__project {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    padding: 10px 14px;
    transition: all 0.3s ease;
}

.dashboard__project:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
}

.project-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.project-preview__thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.dashboard__project--1 .project-preview__thumb {
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
}
.dashboard__project--2 .project-preview__thumb {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
}
.dashboard__project--3 .project-preview__thumb {
    background: linear-gradient(135deg, #34D399, #059669);
}

.project-preview__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.project-preview__name {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.project-preview__category {
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

/* Dashboard Footer */
.dashboard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-light);
}

.dash-projects {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
}

.dash-status {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: #34D399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    animation: pulseDot 2s ease-in-out infinite;
}

/* ----- Floating Cards ----- */
.portfolio-visual__float {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 16px 48px rgba(26, 26, 46, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: floatCard 5s ease-in-out infinite;
    max-width: 160px;
}

.portfolio-visual__float:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 24px 64px rgba(124, 58, 237, 0.08);
}

.portfolio-visual__float .float-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.portfolio-visual__float:hover .float-icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.portfolio-visual__float .float-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.portfolio-visual__float .float-label {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portfolio-visual__float .float-value {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.portfolio-visual__float--1 {
    top: 2%;
    right: -8%;
    animation-delay: 0s;
}

.portfolio-visual__float--2 {
    bottom: 18%;
    left: -10%;
    animation-delay: 1.2s;
}

.portfolio-visual__float--3 {
    bottom: 2%;
    right: 15%;
    animation-delay: 2.4s;
}

.portfolio-visual__float--4 {
    top: 22%;
    left: -8%;
    animation-delay: 0.6s;
}

/* ----- Center Pulse Orb ----- */
.portfolio-visual__orb {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    animation: pulseGlow 3.5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ----- Decorative Tech Icons ----- */
.portfolio-visual__tech {
    position: absolute;
    font-size: 1.6rem;
    color: rgba(124, 58, 237, 0.08);
    pointer-events: none;
    z-index: 1;
    animation: floatNode 6s ease-in-out infinite;
}

.portfolio-visual__tech--1 {
    top: 10%;
    left: 8%;
    font-size: 2rem;
    color: rgba(255, 45, 45, 0.06);
    animation-delay: 0s;
}

.portfolio-visual__tech--2 {
    bottom: 15%;
    right: 5%;
    font-size: 2.2rem;
    color: rgba(97, 218, 251, 0.06);
    animation-delay: 2s;
}

.portfolio-visual__tech--3 {
    top: 45%;
    left: 2%;
    font-size: 1.8rem;
    color: rgba(51, 153, 51, 0.06);
    animation-delay: 3.5s;
}

/* ----- Focus States ----- */
.btn-portfolio-primary:focus-visible,
.btn-portfolio-secondary:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Portfolio Hero Banner
================================================== */

/* ==================================================
START: Portfolio Statistics Section
================================================== */

/* ----- Container ----- */
#portfolio-stats {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.portfolio-stats__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.portfolio-stats__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.portfolio-stats__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.04;
}

.portfolio-stats__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -60px;
    background: var(--color-purple);
    opacity: 0.04;
}

.portfolio-stats__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.portfolio-stats__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.portfolio-stats__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.portfolio-stats__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.portfolio-stats__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.portfolio-stats__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.portfolio-stats__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.portfolio-stats__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#portfolio-stats .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#portfolio-stats .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#portfolio-stats .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#portfolio-stats .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#portfolio-stats .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#portfolio-stats .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#portfolio-stats .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.portfolio-stats__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.portfolio-stats__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.portfolio-stats__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.portfolio-stats__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.portfolio-stats__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.portfolio-stats__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   STATISTICS GRID
   ============================================================ */
.portfolio-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 40px;
}

/* ============================================================
   STAT CARD
   ============================================================ */
.stat-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 32px 24px 28px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.stat-card:hover::before {
    opacity: 1;
}

/* ----- Card Icon ----- */
.stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.3rem;
    margin-bottom: 14px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-card:hover .stat-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors for variety */
.stat-card:nth-child(1):hover .stat-card__icon,
.stat-card:nth-child(3):hover .stat-card__icon,
.stat-card:nth-child(5):hover .stat-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Card Number ----- */
.stat-card__number {
    font-size: 3.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 4px;
}

.stat-number {
    display: inline-block;
}

.stat-suffix {
    font-size: 2.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

/* ----- Card Title ----- */
.stat-card__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
}

/* ----- Card Description ----- */
.stat-card__description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   ACHIEVEMENT STRIP
   ============================================================ */
.portfolio-stats__strip {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
}

.achievement-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 32px;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s ease;
    cursor: default;
}

.achievement-item:hover {
    color: var(--color-purple);
    transform: translateY(-2px);
}

.achievement-item__icon {
    color: var(--color-lime);
    font-size: 0.8rem;
}

.achievement-item__text {
    line-height: 1.3;
}

/* ==================================================
END: Portfolio Statistics Section
================================================== */

/* ==================================================
START: Portfolio Categories & Filters Section
================================================== */

/* ----- Container ----- */
#portfolio-filters {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.portfolio-filters__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.portfolio-filters__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.portfolio-filters__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.portfolio-filters__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.portfolio-filters__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.portfolio-filters__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.portfolio-filters__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.portfolio-filters__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.portfolio-filters__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.portfolio-filters__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.portfolio-filters__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.portfolio-filters__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#portfolio-filters .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#portfolio-filters .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#portfolio-filters .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#portfolio-filters .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#portfolio-filters .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#portfolio-filters .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#portfolio-filters .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.portfolio-filters__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.portfolio-filters__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.portfolio-filters__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.portfolio-filters__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.portfolio-filters__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.portfolio-filters__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FILTER NAVIGATION
   ============================================================ */
.portfolio-filters__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    margin-bottom: 28px;
    padding: 6px;
}

/* ----- Filter Button ----- */
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 10px 16px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-soft);
    position: relative;
    white-space: nowrap;
}

.filter-btn__icon {
    font-size: 0.8rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.filter-btn__count {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    background: rgba(255, 255, 255, 0.5);
    padding: 1px 8px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: rgba(124, 58, 237, 0.15);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.06);
}

.filter-btn:hover .filter-btn__icon {
    opacity: 1;
}

.filter-btn:hover .filter-btn__count {
    border-color: rgba(124, 58, 237, 0.1);
    color: var(--color-purple);
}

/* Active State */
.filter-btn.active {
    background: linear-gradient(135deg, var(--color-lime), var(--color-lime-dark));
    border-color: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.25);
}

.filter-btn.active .filter-btn__icon {
    opacity: 1;
}

.filter-btn.active .filter-btn__count {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-charcoal);
}

/* Focus state */
.filter-btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 2px;
}

/* ============================================================
   RESULTS COUNT
   ============================================================ */
.portfolio-filters__results {
    text-align: center;
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-bottom: 32px;
}

.results-count .results-number {
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

/* ============================================================
   PROJECTS GRID
   ============================================================ */
.portfolio-filters__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

/* ----- Project Card ----- */
.project-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: scale(1);
}

.project-card.hidden {
    display: none;
}

.project-card.fade-out {
    opacity: 0;
    transform: scale(0.92);
}

.project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* ----- Card Image / Placeholder ----- */
.project-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--color-off-white);
}

.project-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s ease;
}

.project-card:hover .project-card__placeholder {
    transform: scale(1.04);
}

/* Placeholder variations */
.project-card__placeholder--1 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}
.project-card__placeholder--2 {
    background: linear-gradient(135deg, #0D4A6B, #0EA5E9);
}
.project-card__placeholder--3 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}
.project-card__placeholder--4 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.project-card__placeholder--5 {
    background: linear-gradient(135deg, #1A1A1A, #10A37F);
}
.project-card__placeholder--6 {
    background: linear-gradient(135deg, #4A1A2A, #F472B6);
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.placeholder-content i {
    font-size: 2.4rem;
    opacity: 0.8;
}

.placeholder-content span {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Placeholder decorative shapes */
.placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.placeholder-shapes .shape--1 {
    width: 120px;
    height: 120px;
    top: -30px;
    right: -30px;
}

.placeholder-shapes .shape--2 {
    width: 80px;
    height: 80px;
    bottom: 20px;
    left: 20px;
}

.placeholder-shapes .shape--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Card Content ----- */
.project-card__content {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-card__category {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.project-card__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

.project-card__description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin: 0 0 12px 0;
}

/* ----- Tech Badges ----- */
.project-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}

.project-card__tech span {
    padding: 2px 10px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ----- Card Link ----- */
.project-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    transition: all 0.3s ease;
    text-decoration: none;
    width: fit-content;
    margin-top: auto;
}

.project-card__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.project-card__link:hover {
    color: var(--color-purple-dark);
}

.project-card__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.portfolio-filters__empty {
    text-align: center;
    padding: 60px 20px;
    display: none;
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 1.8rem;
    margin-bottom: 16px;
}

.empty-state__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

.empty-state__description {
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0 0 20px 0;
}

.btn-empty-reset {
    padding: 10px 28px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    border: none;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

.btn-empty-reset:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.3);
}

/* ============================================================
   LOAD MORE
   ============================================================ */
.portfolio-filters__load-more {
    text-align: center;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-load-more:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.06);
}

.btn-load-more i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.btn-load-more:hover i {
    transform: translateY(4px);
}

/* ----- Focus States ----- */
.project-card__link:focus-visible,
.btn-load-more:focus-visible,
.btn-empty-reset:focus-visible,
.filter-btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Portfolio Categories & Filters Section
================================================== */

/* ==================================================
START: Featured Projects Showcase Section
================================================== */

/* ----- Container ----- */
#featured-projects {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.featured-projects__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.featured-projects__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.featured-projects__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.featured-projects__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.featured-projects__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.featured-projects__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.featured-projects__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.featured-projects__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.featured-projects__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.featured-projects__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.featured-projects__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.featured-projects__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#featured-projects .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#featured-projects .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#featured-projects .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#featured-projects .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#featured-projects .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#featured-projects .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#featured-projects .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.featured-projects__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.featured-projects__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.featured-projects__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.featured-projects__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.featured-projects__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.featured-projects__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   PROJECTS GRID
   ============================================================ */
.featured-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 40px;
}

/* ============================================================
   PROJECT CARD
   ============================================================ */
.project-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
    position: relative;
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.06);
}

/* Featured card highlight */
.project-card[data-featured="true"] {
    border-color: rgba(192, 227, 74, 0.15);
}

.project-card[data-featured="true"]:hover {
    border-color: rgba(192, 227, 74, 0.25);
}

/* ----- Card Image ----- */
.project-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--color-off-white);
}

.project-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card:hover .project-card__placeholder {
    transform: scale(1.06);
}

/* Placeholder variations */
.project-card__placeholder--1 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}
.project-card__placeholder--2 {
    background: linear-gradient(135deg, #0D4A6B, #0EA5E9);
}
.project-card__placeholder--3 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}
.project-card__placeholder--4 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.project-card__placeholder--5 {
    background: linear-gradient(135deg, #1A1A1A, #10A37F);
}
.project-card__placeholder--6 {
    background: linear-gradient(135deg, #4A1A2A, #F472B6);
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.placeholder-content i {
    font-size: 2.6rem;
    opacity: 0.8;
}

.placeholder-content span {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}

.placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.placeholder-shapes .shape--1 {
    width: 120px;
    height: 120px;
    top: -30px;
    right: -30px;
}

.placeholder-shapes .shape--2 {
    width: 80px;
    height: 80px;
    bottom: 20px;
    left: 20px;
}

.placeholder-shapes .shape--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Featured Badge ----- */
.project-card__featured-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
}

/* ----- Hover Overlay ----- */
.project-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 46, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
    padding: 20px;
}

.project-card:hover .project-card__overlay {
    opacity: 1;
}

.overlay__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    transform: translateY(20px);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card:hover .overlay__buttons {
    transform: translateY(0);
}

.overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.overlay-btn i {
    font-size: 0.7rem;
}

.overlay-btn--primary {
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.overlay-btn--primary:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.4);
}

.overlay-btn--secondary {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.2);
}

.overlay-btn--secondary:hover {
    background: var(--color-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
}

.overlay-btn--outline {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.overlay-btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* ----- Card Content ----- */
.project-card__content {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Meta Row */
.project-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}

.project-card__category {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-card__status {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    padding: 2px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.project-card__status--completed {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.project-card__status--ongoing {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.project-card__status--maintenance {
    background: rgba(14, 165, 233, 0.08);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.1);
}

/* Title */
.project-card__title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

/* Client */
.project-card__client {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.82rem;
    color: var(--color-gray-mid);
}

.client-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.client-country i {
    font-size: 0.6rem;
    margin-right: 4px;
    color: var(--color-lime);
}

/* Description */
.project-card__description {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin: 0 0 14px 0;
}

/* Tech Badges */
.project-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}

.project-card__tech span {
    padding: 2px 10px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.project-card:hover .project-card__tech span {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
}

/* Footer */
.project-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--color-gray-light);
}

.project-card__year {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.project-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
}

.project-card__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.project-card__link:hover {
    color: var(--color-purple-dark);
}

.project-card__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   VIEW ALL CTA
   ============================================================ */
.featured-projects__cta {
    text-align: center;
}

.btn-projects-cta {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-projects-cta:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.project-card__link:focus-visible,
.overlay-btn:focus-visible,
.btn-projects-cta:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Featured Projects Showcase Section
================================================== */

/* ==================================================
START: Interactive Portfolio Gallery Section
================================================== */

/* ----- Container ----- */
#portfolio-gallery {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.portfolio-gallery__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.portfolio-gallery__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.portfolio-gallery__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.portfolio-gallery__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.portfolio-gallery__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.portfolio-gallery__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.portfolio-gallery__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.portfolio-gallery__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.portfolio-gallery__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.portfolio-gallery__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.portfolio-gallery__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.portfolio-gallery__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#portfolio-gallery .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#portfolio-gallery .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#portfolio-gallery .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#portfolio-gallery .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#portfolio-gallery .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#portfolio-gallery .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#portfolio-gallery .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.portfolio-gallery__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.portfolio-gallery__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.portfolio-gallery__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.portfolio-gallery__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.portfolio-gallery__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.portfolio-gallery__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   GALLERY GRID
   ============================================================ */
.portfolio-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* ============================================================
   GALLERY CARD
   ============================================================ */
.gallery-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: scale(1);
}

.gallery-card--hidden {
    display: none;
}

.gallery-card.fade-in {
    animation: galleryCardFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.gallery-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

@keyframes galleryCardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ----- Card Image ----- */
.gallery-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--color-off-white);
}

.gallery-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-card:hover .gallery-card__placeholder {
    transform: scale(1.04);
}

/* Placeholder variations */
.gallery-card__placeholder--1 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.gallery-card__placeholder--2 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}
.gallery-card__placeholder--3 {
    background: linear-gradient(135deg, #0D4A6B, #0EA5E9);
}
.gallery-card__placeholder--4 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}
.gallery-card__placeholder--5 {
    background: linear-gradient(135deg, #4A1A2A, #F472B6);
}
.gallery-card__placeholder--6 {
    background: linear-gradient(135deg, #1A1A1A, #10A37F);
}
.gallery-card__placeholder--7 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}
.gallery-card__placeholder--8 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.gallery-card__placeholder--9 {
    background: linear-gradient(135deg, #0D4A6B, #0EA5E9);
}
.gallery-card__placeholder--10 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}
.gallery-card__placeholder--11 {
    background: linear-gradient(135deg, #4A1A2A, #F472B6);
}
.gallery-card__placeholder--12 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.placeholder-content i {
    font-size: 2.4rem;
    opacity: 0.8;
}

.placeholder-content span {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}

.placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.placeholder-shapes .shape--1 {
    width: 120px;
    height: 120px;
    top: -30px;
    right: -30px;
}

.placeholder-shapes .shape--2 {
    width: 80px;
    height: 80px;
    bottom: 20px;
    left: 20px;
}

.placeholder-shapes .shape--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Card Content ----- */
.gallery-card__content {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Meta Row */
.gallery-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 4px;
}

.gallery-card__category {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gallery-card__status {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    padding: 2px 8px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gallery-card__status--completed {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.gallery-card__status--ongoing {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.gallery-card__status--maintenance {
    background: rgba(14, 165, 233, 0.08);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.1);
}

/* Title */
.gallery-card__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

/* Description */
.gallery-card__description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin: 0 0 12px 0;
}

/* Tech Badges */
.gallery-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.gallery-card__tech span {
    padding: 2px 10px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.gallery-card:hover .gallery-card__tech span {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
}

/* Footer */
.gallery-card__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-light);
    flex-wrap: wrap;
}

.gallery-card__year {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.gallery-card__country {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.gallery-card__country i {
    font-size: 0.6rem;
    color: var(--color-lime);
}

.gallery-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
    margin-left: auto;
}

.gallery-card__link i {
    font-size: 0.55rem;
    transition: transform 0.3s ease;
}

.gallery-card__link:hover {
    color: var(--color-purple-dark);
}

.gallery-card__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   LOAD MORE
   ============================================================ */
.portfolio-gallery__load-more {
    text-align: center;
    padding: 8px 0;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-load-more:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.06);
}

.btn-load-more i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.btn-load-more:hover i {
    transform: translateY(4px);
}

.btn-load-more.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading-spinner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
}

.loading-spinner.visible {
    display: inline-flex;
}

.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-gray-light);
    border-top-color: var(--color-purple);
    border-radius: 50%;
    animation: spinnerSpin 0.8s linear infinite;
}

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

.spinner-text {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.load-more-end {
    display: none;
    padding: 10px 0;
}

.load-more-end.visible {
    display: block;
}

.end-message {
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.portfolio-gallery__empty {
    text-align: center;
    padding: 60px 20px;
    display: none;
}

.portfolio-gallery__empty.visible {
    display: block;
}

.portfolio-gallery__empty .empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 1.8rem;
    margin-bottom: 16px;
}

.portfolio-gallery__empty .empty-state__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

.portfolio-gallery__empty .empty-state__description {
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0 0 20px 0;
}

.btn-empty-reset {
    padding: 10px 28px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    border: none;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

.btn-empty-reset:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.3);
}

/* ----- Focus States ----- */
.gallery-card__link:focus-visible,
.btn-load-more:focus-visible,
.btn-empty-reset:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Interactive Portfolio Gallery Section
================================================== */

/* ==================================================
START: Technologies Used Across Our Portfolio
================================================== */

/* ----- Container ----- */
#portfolio-technologies {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.portfolio-technologies__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.portfolio-technologies__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.portfolio-technologies__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.04;
}

.portfolio-technologies__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -60px;
    background: var(--color-purple);
    opacity: 0.04;
}

.portfolio-technologies__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.portfolio-technologies__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.portfolio-technologies__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.portfolio-technologies__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.portfolio-technologies__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.portfolio-technologies__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.portfolio-technologies__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.portfolio-technologies__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#portfolio-technologies .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#portfolio-technologies .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#portfolio-technologies .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#portfolio-technologies .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#portfolio-technologies .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#portfolio-technologies .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#portfolio-technologies .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.portfolio-technologies__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.portfolio-technologies__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.portfolio-technologies__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.portfolio-technologies__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.portfolio-technologies__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.portfolio-technologies__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   TECHNOLOGY CATEGORIES GRID
   ============================================================ */
.portfolio-technologies__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 40px;
}

/* ----- Category Card ----- */
.tech-category {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 24px 22px 22px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.tech-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tech-category:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.tech-category:hover::before {
    opacity: 1;
}

/* ----- Category Header ----- */
.tech-category__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-light);
}

.tech-category__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.tech-category:hover .tech-category__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.tech-category__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

/* ----- Category Items ----- */
.tech-category__items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ----- Technology Item ----- */
.tech-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.tech-item:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.tech-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-purple);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.tech-item:hover .tech-item__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.05);
}

.tech-item__name {
    flex: 1;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.tech-item__level {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tech-item:hover .tech-item__level {
    background: rgba(192, 227, 74, 0.06);
    border-color: rgba(192, 227, 74, 0.1);
    color: var(--color-lime-dark);
}

/* SVG icons for tech items */
.tech-item__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ============================================================
   TECHNOLOGY HIGHLIGHTS
   ============================================================ */
.portfolio-technologies__highlights {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    text-align: center;
}

.highlights-label {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.highlights-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
}

.highlight-item {
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    padding: 4px 0;
    transition: all 0.3s ease;
    cursor: default;
}

.highlight-item:hover {
    color: var(--color-purple);
    transform: translateY(-2px);
}

/* ==================================================
END: Technologies Used Across Our Portfolio
================================================== */

/* ==================================================
START: Client Results & Business Impact Section
================================================== */

/* ----- Container ----- */
#business-impact {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.business-impact__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.business-impact__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.business-impact__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.business-impact__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.business-impact__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.business-impact__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.business-impact__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.business-impact__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.business-impact__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.business-impact__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.business-impact__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.business-impact__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#business-impact .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#business-impact .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#business-impact .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#business-impact .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#business-impact .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#business-impact .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#business-impact .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.business-impact__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.business-impact__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.business-impact__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.business-impact__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.business-impact__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.business-impact__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   BUSINESS IMPACT CARDS
   ============================================================ */
.business-impact__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 40px;
}

/* ----- Impact Card ----- */
.impact-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 28px 24px 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.impact-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.impact-card:hover::before {
    opacity: 1;
}

/* ----- Card Icon ----- */
.impact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.4rem;
    margin-bottom: 14px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.impact-card:hover .impact-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors */
.impact-card:nth-child(1):hover .impact-card__icon,
.impact-card:nth-child(3):hover .impact-card__icon,
.impact-card:nth-child(5):hover .impact-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Card Title ----- */
.impact-card__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
}

/* ----- Card Description ----- */
.impact-card__description {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   SUCCESS METRICS
   ============================================================ */
.business-impact__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 32px 24px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.metric-item {
    text-align: center;
    padding: 8px 12px;
}

.metric-item__number {
    font-size: 2.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 4px;
}

.metric-number {
    display: inline-block;
}

.metric-suffix {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.metric-item__label {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   BUSINESS BENEFITS STRIP
   ============================================================ */
.business-impact__strip {
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
}

.benefits-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s ease;
    cursor: default;
}

.benefit-item:hover {
    color: var(--color-purple);
    transform: translateY(-2px);
}

.benefit-item__icon {
    color: var(--color-lime);
    font-size: 0.8rem;
}

/* ==================================================
END: Client Results & Business Impact Section
================================================== */

/* ==================================================
START: Portfolio FAQ Section
================================================== */

/* ----- Container ----- */
#portfolio-faq {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.portfolio-faq__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.portfolio-faq__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.portfolio-faq__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.portfolio-faq__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.portfolio-faq__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.portfolio-faq__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.portfolio-faq__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.portfolio-faq__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.portfolio-faq__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.portfolio-faq__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.portfolio-faq__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.portfolio-faq__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#portfolio-faq .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#portfolio-faq .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#portfolio-faq .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#portfolio-faq .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#portfolio-faq .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#portfolio-faq .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#portfolio-faq .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.portfolio-faq__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.portfolio-faq__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.portfolio-faq__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.portfolio-faq__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.portfolio-faq__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.portfolio-faq__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   TWO-COLUMN GRID
   ============================================================ */
.portfolio-faq__grid {
    display: grid;
    grid-template-columns: 35fr 65fr;
    gap: 48px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN — Intro & Contact
   ============================================================ */
.portfolio-faq__intro {
    position: sticky;
    top: calc(var(--top-bar-height) + var(--nav-height) + 30px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-intro__card {
    padding: 32px 28px 28px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    text-align: center;
}

.faq-intro__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.4rem;
    margin-bottom: 14px;
    transition: all 0.4s ease;
}

.faq-intro__icon:hover {
    transform: scale(1.05);
    background: var(--color-purple);
    color: var(--color-white);
}

.faq-intro__title {
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.faq-intro__description {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.faq-intro__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-faq-contact {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-faq-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-faq-schedule {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-faq-schedule:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-faq-schedule i {
    transition: transform 0.3s ease;
}

.btn-faq-schedule:hover i {
    transform: translateX(4px);
}

/* ----- Left Visual Decoration ----- */
.faq-intro__visual {
    position: relative;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--color-gray-light);
    overflow: hidden;
}

.faq-visual__orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

.faq-visual__orb--1 {
    width: 60px;
    height: 60px;
    top: -20px;
    right: -20px;
    animation-delay: 0s;
}

.faq-visual__orb--2 {
    width: 45px;
    height: 45px;
    bottom: -10px;
    left: -10px;
    animation-delay: 1.5s;
}

.faq-visual__orb--3 {
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.8s;
}

.faq-visual__node {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple);
    font-size: 0.7rem;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.04);
    animation: floatNode 4s ease-in-out infinite;
}

.faq-visual__node--1 {
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.faq-visual__node--2 {
    bottom: 15%;
    left: 25%;
    animation-delay: 1.2s;
}

.faq-visual__node--3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 2.4s;
}

/* ============================================================
   RIGHT COLUMN — Accordion
   ============================================================ */
.portfolio-faq__accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ----- FAQ Item ----- */
.faq-item {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
}

.faq-item:hover {
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.faq-item--highlight {
    border-color: rgba(192, 227, 74, 0.15);
    background: rgba(255, 255, 255, 0.5);
}

.faq-item--highlight:hover {
    border-color: rgba(192, 227, 74, 0.25);
}

.faq-item.active {
    border-color: rgba(124, 58, 237, 0.12);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.04);
}

.faq-item.active--highlight {
    border-color: rgba(192, 227, 74, 0.25);
}

/* ----- Trigger Button ----- */
.faq-item__trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px 16px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.92rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.faq-item__trigger:hover {
    color: var(--color-purple);
}

.faq-item.active .faq-item__trigger {
    color: var(--color-purple);
}

.faq-item--highlight.active .faq-item__trigger {
    color: var(--color-lime-dark);
}

/* Trigger Icon */
.faq-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 0.8rem;
    transition: all 0.4s ease;
}

.faq-item__trigger:hover .faq-item__icon {
    background: rgba(124, 58, 237, 0.1);
    transform: scale(1.05);
}

.faq-item.active .faq-item__icon {
    background: var(--color-purple);
    color: var(--color-white);
}

.faq-item--highlight.active .faq-item__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* Trigger Question */
.faq-item__question {
    flex: 1;
    min-width: 0;
}

/* Trigger Indicator */
.faq-item__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-gray-mid);
    font-size: 0.75rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.faq-item__trigger:hover .faq-item__indicator {
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
}

.faq-item.active .faq-item__indicator {
    background: var(--color-purple);
    color: var(--color-white);
    transform: rotate(45deg);
}

.faq-item--highlight.active .faq-item__indicator {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Answer ----- */
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.4s ease,
                padding 0.3s ease;
    opacity: 0;
    padding: 0 20px 0 20px;
}

.faq-item.active .faq-item__answer {
    max-height: 300px;
    opacity: 1;
    padding: 0 20px 20px 20px;
}

.faq-item__answer-content {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    padding-top: 4px;
    border-top: 1px solid var(--color-gray-light);
}

.faq-item.active .faq-item__answer-content {
    border-top-color: rgba(124, 58, 237, 0.06);
}

.faq-item--highlight.active .faq-item__answer-content {
    border-top-color: rgba(192, 227, 74, 0.12);
}

/* Focus states for accessibility */
.faq-item__trigger:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: -2px;
    border-radius: 14px;
}

.btn-faq-contact:focus-visible,
.btn-faq-schedule:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Portfolio FAQ Section
================================================== */

/* ==================================================
START: Blog Hero Banner
================================================== */

/* ----- Container ----- */
#blog-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--top-bar-height) + var(--nav-height) + 40px) 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.blog-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.blog-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.08;
    pointer-events: none;
}

.blog-hero__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.06;
}

.blog-hero__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.05;
}

.blog-hero__glow--3 {
    width: 300px;
    height: 300px;
    top: 30%;
    left: 40%;
    background: var(--color-purple);
    opacity: 0.03;
}

.blog-hero__glow--4 {
    width: 250px;
    height: 250px;
    bottom: 30%;
    right: 25%;
    background: var(--color-lime);
    opacity: 0.04;
}

.blog-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 10s ease-in-out infinite;
}

.blog-hero__orb--1 {
    width: 120px;
    height: 120px;
    top: 8%;
    right: 18%;
    animation-delay: 0s;
}

.blog-hero__orb--2 {
    width: 80px;
    height: 80px;
    bottom: 15%;
    left: 22%;
    animation-delay: 2.5s;
}

.blog-hero__orb--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.blog-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.blog-hero__shape--1 {
    width: 180px;
    height: 180px;
    top: 5%;
    left: 8%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.blog-hero__shape--2 {
    width: 130px;
    height: 130px;
    bottom: 25%;
    right: 6%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.blog-hero__shape--3 {
    width: 90px;
    height: 90px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.blog-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#blog-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 8s ease-in-out infinite;
}

#blog-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 6%;
    animation-delay: 0s;
}

#blog-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 90%;
    animation-delay: 1.5s;
}

#blog-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 22%;
    left: 85%;
    animation-delay: 3s;
}

#blog-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.8s;
}

#blog-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 3%;
    animation-delay: 2.2s;
}

#blog-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 95%;
    animation-delay: 3.8s;
}

/* ----- Container ----- */
.blog-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ============================================================
   LEFT COLUMN — Content
   ============================================================ */
.blog-hero__content {
    flex: 1 1 55%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.blog-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.blog-hero__title {
    font-size: 3.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.blog-hero__title .highlight-lime {
    position: relative;
    display: inline-block;
}

.blog-hero__title .highlight-lime::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(192, 227, 74, 0.25);
    border-radius: 4px;
    z-index: -1;
}

.blog-hero__description {
    font-size: 1.1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 46ch;
    margin: 0;
}

/* ----- Buttons ----- */
.blog-hero__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-blog-primary {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-blog-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

.btn-blog-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-blog-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-blog-secondary i {
    transition: transform 0.3s ease;
}

.btn-blog-secondary:hover i {
    transform: translateX(4px);
}

/* ----- Search Bar ----- */
.blog-hero__search {
    margin-top: 4px;
}

.search-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 50px;
    padding: 4px 4px 4px 18px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-soft);
}

.search-container:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.search-icon {
    color: var(--color-gray-mid);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    padding: 12px 14px;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    min-width: 0;
}

.search-input::placeholder {
    color: var(--color-gray-mid);
    opacity: 0.6;
}

.search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--color-purple);
    color: var(--color-white);
    border: none;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15);
}

.search-btn:hover {
    background: var(--color-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}

.search-btn i {
    font-size: 0.85rem;
}

/* ----- Category Chips ----- */
.blog-hero__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding-top: 4px;
}

.category-chip {
    padding: 4px 16px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.category-chip:hover {
    border-color: var(--color-lime);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.08);
}

/* ----- Quick Stats ----- */
.blog-hero__stats {
    display: flex;
    align-items: center;
    gap: 16px 24px;
    flex-wrap: wrap;
    padding: 4px 0 2px;
}

.stat-item {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-item .stat-number {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    display: inline-block;
}

.stat-item .stat-suffix {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.stat-item .stat-label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.stat-label--weekly {
    color: var(--color-lime-dark);
    font-weight: var(--font-weight-semibold);
}

.stat-divider {
    width: 1.5px;
    height: 24px;
    background: var(--color-gray-light);
    flex-shrink: 0;
}

/* ----- Featured Tags ----- */
.blog-hero__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding-top: 2px;
}

.tag-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tag-item {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    transition: all 0.3s ease;
    cursor: default;
}

.tag-item:hover {
    color: var(--color-lime-dark);
    transform: translateY(-2px);
}

/* ============================================================
   RIGHT COLUMN — Premium Visual Composition
   ============================================================ */
.blog-hero__visual {
    flex: 1 1 45%;
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Main Dashboard Card ----- */
.blog-visual__dashboard {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 22px 24px 20px;
    box-shadow: 0 32px 80px rgba(26, 26, 46, 0.08);
    z-index: 5;
    transition: all 0.4s ease;
}

.blog-visual__dashboard:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px rgba(26, 26, 46, 0.12);
}

/* Dashboard Header */
.dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dashboard__dots {
    display: flex;
    gap: 5px;
}

.dashboard__dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dashboard__dots .dot:nth-child(1) { background: #F87171; }
.dashboard__dots .dot:nth-child(2) { background: #FBBF24; }
.dashboard__dots .dot:nth-child(3) { background: #34D399; }

.dashboard__title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    letter-spacing: 0.03em;
}

/* Dashboard Articles */
.dashboard__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-gray-light);
}

.dashboard__article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.dashboard__article:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
}

.article-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.dashboard__article:hover .article-icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.article-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.article-title {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
}

.article-meta {
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

/* Dashboard Footer */
.dashboard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-light);
}

.dash-articles {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
}

.dash-status {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: #34D399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    animation: pulseDot 2s ease-in-out infinite;
}

/* ----- Learning Resources (Mini Features) ----- */
.blog-visual__resource {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 16px 48px rgba(26, 26, 46, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: floatCard 5s ease-in-out infinite;
    max-width: 160px;
}

.blog-visual__resource:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 24px 64px rgba(124, 58, 237, 0.08);
}

.resource-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.blog-visual__resource:hover .resource-icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.resource-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.resource-label {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.resource-value {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.blog-visual__resource--1 {
    top: 3%;
    right: -8%;
    animation-delay: 0s;
}

.blog-visual__resource--2 {
    bottom: 18%;
    left: -10%;
    animation-delay: 1.2s;
}

.blog-visual__resource--3 {
    bottom: 2%;
    right: 12%;
    animation-delay: 2.4s;
}

.blog-visual__resource--4 {
    top: 22%;
    left: -8%;
    animation-delay: 0.6s;
}

/* ----- Decorative Tech Icons ----- */
.blog-visual__tech {
    position: absolute;
    font-size: 1.8rem;
    color: rgba(124, 58, 237, 0.08);
    pointer-events: none;
    z-index: 1;
    animation: floatNode 6s ease-in-out infinite;
}

.blog-visual__tech--1 {
    top: 8%;
    left: 5%;
    font-size: 2.2rem;
    color: rgba(255, 45, 45, 0.06);
    animation-delay: 0s;
}

.blog-visual__tech--2 {
    bottom: 12%;
    right: 4%;
    font-size: 2.4rem;
    color: rgba(97, 218, 251, 0.06);
    animation-delay: 2s;
}

.blog-visual__tech--3 {
    top: 45%;
    left: 2%;
    font-size: 2rem;
    color: rgba(51, 153, 51, 0.06);
    animation-delay: 3.5s;
}

/* ----- Center Pulse Orb ----- */
.blog-visual__orb {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    animation: pulseGlow 3.5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ----- Focus States ----- */
.btn-blog-primary:focus-visible,
.btn-blog-secondary:focus-visible,
.search-btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

.search-input:focus-visible {
    outline: none;
}

/* ==================================================
END: Blog Hero Banner
================================================== */

/* ==================================================
START: Featured Article (Editor's Pick)
================================================== */

/* ----- Container ----- */
#featured-article {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.featured-article__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.featured-article__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.featured-article__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.featured-article__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.featured-article__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.featured-article__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.featured-article__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.featured-article__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.featured-article__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.featured-article__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.featured-article__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.featured-article__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#featured-article .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#featured-article .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#featured-article .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#featured-article .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#featured-article .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#featured-article .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#featured-article .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.featured-article__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.featured-article__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.featured-article__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.featured-article__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.featured-article__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.featured-article__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED ARTICLE GRID
   ============================================================ */
.featured-article__grid {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 32px;
    align-items: start;
}

/* ============================================================
   MAIN FEATURED ARTICLE CARD
   ============================================================ */
.article-card--featured {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
}

.article-card--featured:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.06);
}

/* ----- Card Image ----- */
.article-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--color-off-white);
}

.article-card__placeholder--featured {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1A1A2E, #2D1B69);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.article-card--featured:hover .article-card__placeholder--featured {
    transform: scale(1.04);
}

.article-card__placeholder--featured .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.article-card__placeholder--featured .placeholder-content i {
    font-size: 3.2rem;
    opacity: 0.8;
}

.article-card__placeholder--featured .placeholder-content span {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}

.article-card__placeholder--featured .placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.article-card__placeholder--featured .placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.article-card__placeholder--featured .placeholder-shapes .shape--1 {
    width: 160px;
    height: 160px;
    top: -40px;
    right: -40px;
}

.article-card__placeholder--featured .placeholder-shapes .shape--2 {
    width: 100px;
    height: 100px;
    bottom: 30px;
    left: 30px;
}

.article-card__placeholder--featured .placeholder-shapes .shape--3 {
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Featured Badge */
.article-card__featured-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 14px;
    background: rgba(192, 227, 74, 0.9);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

/* ----- Card Content ----- */
.article-card__content {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Meta Row */
.article-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-bottom: 10px;
}

.article-card__category {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 12px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 50px;
}

.article-card__reading-time,
.article-card__date {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.article-card__reading-time i,
.article-card__date i {
    font-size: 0.6rem;
}

/* Title */
.article-card__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 0 0 10px 0;
}

/* Summary */
.article-card__summary {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0 0 16px 0;
}

/* Author */
.article-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.article-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-initials {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.article-card__author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.author-title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

/* Stats */
.article-card__stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-gray-light);
}

.article-card__stats .stat-item {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-card__stats .stat-item i {
    font-size: 0.7rem;
}

/* Tags */
.article-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.article-card__tags .tag {
    padding: 3px 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.article-card__tags .tag:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.12);
}

/* Actions */
.article-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-article-primary {
    padding: 12px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-article-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-bookmark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-bookmark:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.06);
}

.btn-bookmark i {
    font-size: 0.85rem;
}

.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50%;
    font-size: 0.85rem;
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-share:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.06);
}

/* ============================================================
   SIDE MINI ARTICLES
   ============================================================ */
.featured-article__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mini-article {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
}

.mini-article:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

/* Mini Article Image */
.mini-article__image {
    aspect-ratio: 16/8;
    overflow: hidden;
    background: var(--color-off-white);
}

.mini-article__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.5s ease;
}

.mini-article:hover .mini-article__placeholder {
    transform: scale(1.04);
}

.mini-article__placeholder--1 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.mini-article__placeholder--2 {
    background: linear-gradient(135deg, #1A1A2E, #2D1B69);
}
.mini-article__placeholder--3 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}

/* Mini Article Content */
.mini-article__content {
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mini-article__category {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.mini-article__title {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.mini-article__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.mini-article__reading-time,
.mini-article__date {
    font-size: 0.62rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mini-article__reading-time i,
.mini-article__date i {
    font-size: 0.55rem;
}

.mini-article__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.mini-article__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.mini-article__link:hover {
    color: var(--color-purple-dark);
}

.mini-article__link:hover i {
    transform: translateX(4px);
}

/* ----- Focus States ----- */
.btn-article-primary:focus-visible,
.btn-bookmark:focus-visible,
.btn-share:focus-visible,
.mini-article__link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Featured Article (Editor's Pick)
================================================== */

/* ==================================================
START: Blog Categories Hub
================================================== */

/* ----- Container ----- */
#blog-categories {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.blog-categories__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.blog-categories__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.blog-categories__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.blog-categories__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.blog-categories__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.blog-categories__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.blog-categories__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.blog-categories__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.blog-categories__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.blog-categories__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.blog-categories__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.blog-categories__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#blog-categories .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#blog-categories .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#blog-categories .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#blog-categories .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#blog-categories .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#blog-categories .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#blog-categories .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.blog-categories__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.blog-categories__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.blog-categories__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.blog-categories__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.blog-categories__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.blog-categories__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED CATEGORY
   ============================================================ */
.blog-categories__featured {
    margin-bottom: 40px;
}

.featured-category {
    display: flex;
    align-items: center;
    gap: 32px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 32px 36px 32px 32px;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-category::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.06;
    pointer-events: none;
}

.featured-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.featured-category > * {
    position: relative;
    z-index: 2;
}

.featured-category__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    color: var(--color-white);
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.featured-category__content {
    flex: 1;
    min-width: 0;
}

.featured-category__badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(192, 227, 74, 0.1);
    padding: 2px 12px;
    border-radius: 50px;
    margin-bottom: 6px;
}

.featured-category__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.featured-category__description {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 12px 0;
    max-width: 48ch;
}

.featured-category__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.featured-category__count,
.featured-category__update {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 6px;
}

.featured-category__count i,
.featured-category__update i {
    font-size: 0.7rem;
}

.btn-featured-category {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-featured-category:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* Featured Category Visual */
.featured-category__visual {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.featured-visual__orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    animation: pulseGlow 3.5s ease-in-out infinite;
}

.featured-visual__orb--1 {
    width: 80px;
    height: 80px;
    top: 10px;
    left: 10px;
    animation-delay: 0s;
}

.featured-visual__orb--2 {
    width: 50px;
    height: 50px;
    bottom: 10px;
    right: 10px;
    animation-delay: 1.5s;
}

.featured-visual__node {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple);
    font-size: 0.8rem;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.04);
    animation: floatNode 4s ease-in-out infinite;
}

.featured-visual__node--1 {
    top: 8px;
    left: 45px;
    animation-delay: 0s;
}

.featured-visual__node--2 {
    bottom: 10px;
    right: 20px;
    animation-delay: 1.2s;
}

.featured-visual__node--3 {
    top: 40px;
    right: 5px;
    animation-delay: 2.4s;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.blog-categories__filters {
    margin-bottom: 32px;
    padding: 4px 0;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
}

.filter-pill {
    padding: 6px 18px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-soft);
}

.filter-pill:hover {
    border-color: rgba(124, 58, 237, 0.15);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.filter-pill.active {
    background: linear-gradient(135deg, var(--color-lime), var(--color-lime-dark));
    border-color: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.25);
}

.filter-pill:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 2px;
}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.blog-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 40px;
}

/* ============================================================
   CATEGORY CARD
   ============================================================ */
.category-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 24px 22px 22px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.category-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.category-card:hover::before {
    opacity: 1;
}

/* Featured card highlight */
.category-card--featured {
    border-color: rgba(192, 227, 74, 0.15);
}

.category-card--featured:hover {
    border-color: rgba(192, 227, 74, 0.25);
}

/* ----- Card Icon ----- */
.category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.2rem;
    margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-card:hover .category-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors */
.category-card:nth-child(2):hover .category-card__icon,
.category-card:nth-child(5):hover .category-card__icon,
.category-card:nth-child(8):hover .category-card__icon,
.category-card:nth-child(11):hover .category-card__icon,
.category-card:nth-child(14):hover .category-card__icon,
.category-card:nth-child(17):hover .category-card__icon,
.category-card:nth-child(20):hover .category-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Card Title ----- */
.category-card__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

/* ----- Card Description ----- */
.category-card__description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin: 0 0 14px 0;
}

/* ----- Card Meta ----- */
.category-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-light);
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 6px;
}

.category-card__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.category-card__count i {
    font-size: 0.65rem;
}

.category-card__latest {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

/* ----- Card Link ----- */
.category-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}

.category-card__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.category-card__link:hover {
    color: var(--color-purple-dark);
}

.category-card__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.blog-categories__view-all {
    text-align: center;
}

.btn-view-all-categories {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-all-categories:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.category-card__link:focus-visible,
.btn-featured-category:focus-visible,
.btn-view-all-categories:focus-visible,
.filter-pill:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Blog Categories Hub
================================================== */

/* ==================================================
START: Advanced Search & Smart Filters
================================================== */

/* ----- Container ----- */
#blog-search {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.blog-search__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.blog-search__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.blog-search__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.blog-search__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.blog-search__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.blog-search__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.blog-search__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.blog-search__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.blog-search__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.blog-search__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.blog-search__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.blog-search__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#blog-search .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#blog-search .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#blog-search .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#blog-search .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#blog-search .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#blog-search .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#blog-search .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.blog-search__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.blog-search__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.blog-search__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.blog-search__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.blog-search__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.blog-search__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.blog-search__bar {
    max-width: 820px;
    margin: 0 auto 20px;
}

.search-bar-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 50px;
    padding: 4px 4px 4px 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-soft);
    gap: 8px;
}

.search-bar-container:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.search-bar-icon {
    color: var(--color-gray-mid);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.search-bar-input {
    flex: 1;
    padding: 14px 8px;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    min-width: 0;
}

.search-bar-input::placeholder {
    color: var(--color-gray-mid);
    opacity: 0.6;
}

.search-bar-clear {
    display: none;
    background: transparent;
    border: none;
    color: var(--color-gray-mid);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.search-bar-clear:hover {
    color: var(--color-charcoal);
}

.search-bar-clear.visible {
    display: block;
}

/* Loading Spinner */
.search-bar-loading {
    display: none;
    gap: 4px;
    align-items: center;
    padding: 0 4px;
    flex-shrink: 0;
}

.search-bar-loading.visible {
    display: flex;
}

.spinner-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-purple);
    animation: searchDotPulse 1.2s ease-in-out infinite;
}

.spinner-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.spinner-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes searchDotPulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.3;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.search-bar-voice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-gray-mid);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.search-bar-voice:hover {
    background: var(--color-off-white);
    color: var(--color-purple);
}

.search-bar-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: var(--color-purple);
    color: var(--color-white);
    border: none;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15);
    gap: 8px;
    flex-shrink: 0;
}

.search-bar-submit:hover {
    background: var(--color-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}

.search-bar-submit i {
    font-size: 0.85rem;
}

/* ============================================================
   QUICK SEARCH SUGGESTIONS
   ============================================================ */
.blog-search__suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    max-width: 820px;
    margin: 0 auto 32px;
    padding: 0 4px;
}

.suggestions-label {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.suggestion-chip {
    padding: 4px 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.suggestion-chip:hover {
    border-color: var(--color-lime);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.08);
}

/* ============================================================
   FILTER CONTROLS
   ============================================================ */
.blog-search__controls {
    max-width: 820px;
    margin: 0 auto 24px;
}

/* Filter Toggle (Mobile) */
.filter-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 12px;
    width: 100%;
    justify-content: center;
}

.filter-toggle:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.filter-toggle .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
}

.filter-toggle.active {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
}

/* Filter Panel */
.filter-panel {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 24px 28px 20px;
    box-shadow: var(--shadow-glass);
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.filter-panel.hidden {
    display: none;
}

.filter-panel__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group--actions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    justify-content: flex-end;
}

.filter-group__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.filter-select {
    padding: 8px 12px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    transition: all 0.3s ease;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239BA3B5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.filter-select:focus {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.filter-select:hover {
    border-color: rgba(124, 58, 237, 0.15);
}

.btn-filter-apply {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    border: none;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

.btn-filter-apply:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.3);
}

.btn-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: var(--color-gray-mid);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-filter-reset:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
}

/* ============================================================
   ACTIVE FILTER CHIPS
   ============================================================ */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    margin-top: 8px;
}

.filter-chips.visible {
    display: flex;
}

.chips-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
}

.filter-chip .chip-remove {
    background: transparent;
    border: none;
    color: var(--color-purple);
    font-size: 0.55rem;
    cursor: pointer;
    padding: 2px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 16px;
    height: 16px;
}

.filter-chip .chip-remove:hover {
    background: rgba(124, 58, 237, 0.12);
    transform: rotate(90deg);
}

.chips-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: all 0.3s ease;
}

.chips-clear-all:hover {
    border-color: #F87171;
    color: #F87171;
}

/* ============================================================
   SEARCH RESULTS SUMMARY
   ============================================================ */
.blog-search__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 820px;
    margin: 0 auto 20px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    gap: 8px;
}

.summary-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.summary-count {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.summary-text {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.summary-query {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.summary-query strong {
    color: var(--color-charcoal);
    font-weight: var(--font-weight-semibold);
}

.summary-right {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.summary-right strong {
    color: var(--color-charcoal);
}

/* ============================================================
   SEARCH RESULTS
   ============================================================ */
.blog-search__results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 820px;
    margin: 0 auto 24px;
}

/* ----- Result Card ----- */
.result-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    padding: 20px 22px 22px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
}

.result-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.result-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.result-card__category {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.result-card__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.result-card__excerpt {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-bottom: 10px;
}

.result-card__meta i {
    font-size: 0.6rem;
    margin-right: 2px;
}

.result-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.result-tag {
    padding: 2px 10px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.06);
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.result-tag:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.1);
}

/* ============================================================
   LOAD MORE
   ============================================================ */
.blog-search__load-more {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.btn-load-more-results {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-load-more-results:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.06);
}

.btn-load-more-results i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.btn-load-more-results:hover i {
    transform: translateY(4px);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.blog-search__empty {
    text-align: center;
    padding: 60px 20px;
    max-width: 500px;
    margin: 0 auto;
    display: none;
}

.blog-search__empty.visible {
    display: block;
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 1.8rem;
    margin-bottom: 16px;
}

.empty-state__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

.empty-state__description {
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0 0 20px 0;
}

.btn-empty-browse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    border: none;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

.btn-empty-browse:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.3);
}

/* ----- Focus States ----- */
.search-bar-input:focus-visible {
    outline: none;
}

.search-bar-submit:focus-visible,
.filter-select:focus-visible,
.btn-filter-apply:focus-visible,
.btn-filter-reset:focus-visible,
.btn-load-more-results:focus-visible,
.suggestion-chip:focus-visible,
.filter-toggle:focus-visible,
.chips-clear-all:focus-visible,
.btn-empty-browse:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Advanced Search & Smart Filters
================================================== */

/* ==================================================
START: Latest Articles Grid & Enterprise Content Feed
================================================== */

/* ----- Container ----- */
#blog-feed {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.blog-feed__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.blog-feed__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.blog-feed__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.blog-feed__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.blog-feed__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.blog-feed__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.blog-feed__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.blog-feed__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.blog-feed__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.blog-feed__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.blog-feed__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.blog-feed__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#blog-feed .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#blog-feed .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#blog-feed .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#blog-feed .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#blog-feed .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#blog-feed .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#blog-feed .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.blog-feed__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.blog-feed__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.blog-feed__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.blog-feed__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.blog-feed__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.blog-feed__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   ARTICLE GRID
   ============================================================ */
.blog-feed__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1140px;
    margin: 0 auto 40px;
}

/* ============================================================
   FEED CARD
   ============================================================ */
.feed-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
    position: relative;
}

.feed-card:hover {
    transform: translateY(-8px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.06);
}

.feed-card[data-featured="true"] {
    border-color: rgba(192, 227, 74, 0.15);
}

.feed-card[data-featured="true"]:hover {
    border-color: rgba(192, 227, 74, 0.25);
}

/* ----- Card Image ----- */
.feed-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--color-off-white);
}

.feed-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.feed-card:hover .feed-card__placeholder {
    transform: scale(1.06);
}

/* Placeholder variations */
.feed-card__placeholder--1 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}
.feed-card__placeholder--2 {
    background: linear-gradient(135deg, #1A1A2E, #10A37F);
}
.feed-card__placeholder--3 {
    background: linear-gradient(135deg, #1A1A2E, #2D1B69);
}
.feed-card__placeholder--4 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}
.feed-card__placeholder--5 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.feed-card__placeholder--6 {
    background: linear-gradient(135deg, #1A1A2E, #F59E0B);
}
.feed-card__placeholder--7 {
    background: linear-gradient(135deg, #0D4A6B, #0EA5E9);
}
.feed-card__placeholder--8 {
    background: linear-gradient(135deg, #4A1A2A, #F472B6);
}
.feed-card__placeholder--9 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}
.feed-card__placeholder--10 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}
.feed-card__placeholder--11 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.feed-card__placeholder--12 {
    background: linear-gradient(135deg, #1A1A2E, #F59E0B);
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.placeholder-content i {
    font-size: 2.4rem;
    opacity: 0.8;
}

.placeholder-content span {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}

.placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.placeholder-shapes .shape--1 {
    width: 120px;
    height: 120px;
    top: -30px;
    right: -30px;
}

.placeholder-shapes .shape--2 {
    width: 80px;
    height: 80px;
    bottom: 20px;
    left: 20px;
}

.placeholder-shapes .shape--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Featured Badge */
.feed-card__featured-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 12px;
    background: rgba(192, 227, 74, 0.9);
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

/* Hover Overlay */
.feed-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
}

.feed-card:hover .feed-card__overlay {
    opacity: 1;
}

.overlay-bookmark,
.overlay-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(10px);
}

.feed-card:hover .overlay-bookmark,
.feed-card:hover .overlay-share {
    transform: translateY(0);
}

.overlay-bookmark:hover,
.overlay-share:hover {
    background: var(--color-white);
    color: var(--color-purple);
    transform: translateY(-4px) scale(1.05);
}

.overlay-bookmark.active {
    background: var(--color-lime);
    color: var(--color-charcoal);
    border-color: var(--color-lime);
}

/* ----- Card Content ----- */
.feed-card__content {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Meta Row */
.feed-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 10px;
}

.feed-card__category {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 10px;
    background: rgba(124, 58, 237, 0.06);
    border-radius: 50px;
}

.feed-card__tech {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
}

.feed-card__difficulty {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 10px;
    border-radius: 50px;
}

.feed-card__difficulty--beginner {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.feed-card__difficulty--intermediate {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.feed-card__difficulty--advanced {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

/* Title Group */
.feed-card__title-group {
    flex: 1;
}

.feed-card__title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.feed-card__excerpt {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* Standard property for line clamping (for compatible browsers/lints) */
    line-clamp: 2;
    /* Standard property for compatibility */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags */
.feed-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 14px;
}

.feed-card__tags span {
    padding: 2px 10px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.06);
    border-radius: 50px;
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.feed-card__tags span:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.1);
}

/* Footer */
.feed-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--color-gray-light);
    margin-bottom: 12px;
}

.feed-card__author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feed-card__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feed-card__avatar span {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.feed-card__author-name {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.feed-card__stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feed-card__stats .stat {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.feed-card__stats .stat i {
    font-size: 0.6rem;
}

/* Actions */
.feed-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.feed-card__info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.feed-card__info i {
    font-size: 0.6rem;
    margin-right: 2px;
}

.feed-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
}

.feed-card__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.feed-card__link:hover {
    color: var(--color-purple-dark);
}

.feed-card__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   LOAD MORE
   ============================================================ */
.blog-feed__load-more {
    text-align: center;
    padding: 8px 0;
    max-width: 820px;
    margin: 0 auto;
}

.btn-load-more-feed {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-load-more-feed:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.06);
}

.btn-load-more-feed i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.btn-load-more-feed:hover i {
    transform: translateY(4px);
}

.feed-loading-spinner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0;
}

.feed-loading-spinner.visible {
    display: flex;
}

.feed-loading-spinner .spinner-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-purple);
    animation: searchDotPulse 1.2s ease-in-out infinite;
}

.feed-loading-spinner .spinner-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.feed-loading-spinner .spinner-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.blog-feed__pagination {
    max-width: 820px;
    margin: 24px auto 0;
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:hover:not(.page-btn--active):not(:disabled) {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.page-btn--active {
    background: linear-gradient(135deg, var(--color-lime), var(--color-lime-dark));
    border-color: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
    cursor: default;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-btn--prev,
.page-btn--next {
    padding: 8px 18px;
}

.page-ellipsis {
    padding: 8px 4px;
    font-size: 0.82rem;
    color: var(--color-gray-mid);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.blog-feed__empty {
    text-align: center;
    padding: 60px 20px;
    max-width: 500px;
    margin: 0 auto;
    display: none;
}

.blog-feed__empty.visible {
    display: block;
}

.blog-feed__empty .empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 1.8rem;
    margin-bottom: 16px;
}

.blog-feed__empty .empty-state__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

.blog-feed__empty .empty-state__description {
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0 0 20px 0;
}

.btn-empty-browse-feed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    border: none;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

.btn-empty-browse-feed:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.3);
}

/* ----- Focus States ----- */
.feed-card__link:focus-visible,
.btn-load-more-feed:focus-visible,
.page-btn:focus-visible,
.overlay-bookmark:focus-visible,
.overlay-share:focus-visible,
.btn-empty-browse-feed:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Latest Articles Grid & Enterprise Content Feed
================================================== */

/* ==================================================
START: Featured Learning Collections & Learning Paths
================================================== */

/* ----- Container ----- */
#learning-collections {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.learning-collections__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.learning-collections__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.learning-collections__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.learning-collections__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.learning-collections__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.learning-collections__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.learning-collections__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.learning-collections__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.learning-collections__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.learning-collections__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.learning-collections__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.learning-collections__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#learning-collections .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#learning-collections .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#learning-collections .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#learning-collections .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#learning-collections .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#learning-collections .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#learning-collections .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.learning-collections__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.learning-collections__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.learning-collections__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.learning-collections__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.learning-collections__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.learning-collections__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED LEARNING PATH
   ============================================================ */
.learning-collections__featured {
    margin-bottom: 48px;
}

.featured-path {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 32px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-path:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* ----- Featured Image ----- */
.featured-path__image {
    position: relative;
    overflow: hidden;
    min-height: 320px;
}

.featured-path__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-path:hover .featured-path__placeholder {
    transform: scale(1.04);
}

.featured-path__placeholder .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.featured-path__placeholder .placeholder-content i {
    font-size: 4rem;
    opacity: 0.8;
}

.featured-path__placeholder .placeholder-content span {
    font-size: 1.2rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}

.featured-path__placeholder .placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.featured-path__placeholder .placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.featured-path__placeholder .placeholder-shapes .shape--1 {
    width: 160px;
    height: 160px;
    top: -40px;
    right: -40px;
}

.featured-path__placeholder .placeholder-shapes .shape--2 {
    width: 100px;
    height: 100px;
    bottom: 30px;
    left: 30px;
}

.featured-path__placeholder .placeholder-shapes .shape--3 {
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.featured-path__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 14px;
    background: rgba(192, 227, 74, 0.9);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

/* ----- Featured Content ----- */
.featured-path__content {
    padding: 32px 36px 32px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.featured-path__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.featured-path__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
}

.featured-path__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.featured-path__level {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 12px;
    border-radius: 50px;
}

.featured-path__level--beginner {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.featured-path__level--intermediate {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.featured-path__level--advanced {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

.featured-path__time,
.featured-path__lessons {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.featured-path__time i,
.featured-path__lessons i {
    font-size: 0.7rem;
}

.featured-path__description {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0;
}

.featured-path__objectives {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.featured-path__objectives span {
    padding: 2px 0;
}

.featured-path__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.featured-path__tech span {
    padding: 3px 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.featured-path__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-gray-light);
    flex-wrap: wrap;
}

.featured-path__progress {
    flex: 1;
    min-width: 180px;
}

.progress-label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.progress-bar {
    height: 4px;
    background: var(--color-gray-light);
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0 2px;
}

.progress-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.progress-text {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.btn-path-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    flex-shrink: 0;
}

.btn-path-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   LEARNING COLLECTIONS GRID
   ============================================================ */
.learning-collections__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1140px;
    margin: 0 auto 40px;
}

/* ----- Collection Card ----- */
.collection-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
}

.collection-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* ----- Card Image ----- */
.collection-card__image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-off-white);
}

.collection-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.8);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.collection-card:hover .collection-card__placeholder {
    transform: scale(1.04);
}

.collection-card__placeholder--1 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}
.collection-card__placeholder--2 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.collection-card__placeholder--3 {
    background: linear-gradient(135deg, #0D4A6B, #0EA5E9);
}
.collection-card__placeholder--4 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}
.collection-card__placeholder--5 {
    background: linear-gradient(135deg, #4A1A2A, #F472B6);
}
.collection-card__placeholder--6 {
    background: linear-gradient(135deg, #1A1A1A, #10A37F);
}
.collection-card__placeholder--7 {
    background: linear-gradient(135deg, #1A1A2E, #2D1B69);
}
.collection-card__placeholder--8 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.collection-card__placeholder--9 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}
.collection-card__placeholder--10 {
    background: linear-gradient(135deg, #4A1A2A, #F472B6);
}
.collection-card__placeholder--11 {
    background: linear-gradient(135deg, #0D4A6B, #0EA5E9);
}
.collection-card__placeholder--12 {
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
}

/* ----- Card Content ----- */
.collection-card__content {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.collection-card__meta {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.collection-card__difficulty {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 10px;
    border-radius: 50px;
}

.collection-card__difficulty:contains("Beginner") {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.collection-card__difficulty:contains("Intermediate") {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.collection-card__difficulty:contains("Advanced") {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

.collection-card__lessons {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.collection-card__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 0 0 6px 0;
}

.collection-card__description {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    flex: 1;
    margin: 0 0 12px 0;
}

.collection-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-light);
}

.collection-card__time {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.collection-card__time i {
    font-size: 0.6rem;
}

.collection-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
}

.collection-card__link i {
    font-size: 0.55rem;
    transition: transform 0.3s ease;
}

.collection-card__link:hover {
    color: var(--color-purple-dark);
}

.collection-card__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   LEARNING PROGRESS HIGHLIGHTS
   ============================================================ */
.learning-collections__highlights {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

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

.highlight-stat {
    text-align: center;
    padding: 4px 8px;
}

.highlight-stat__number {
    font-size: 2.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.highlight-stat__number .stat-number {
    display: inline-block;
}

.highlight-stat__number .stat-suffix {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.highlight-stat__number .stat-label--range {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-dark);
}

.highlight-stat__number .stat-label--weekly {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.highlight-stat__label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.learning-collections__view-all {
    text-align: center;
}

.btn-view-collections {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-collections:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.collection-card__link:focus-visible,
.btn-path-start:focus-visible,
.btn-view-collections:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Featured Learning Collections & Learning Paths
================================================== */

/* ==================================================
START: Trending Articles, Popular Topics & Editor's Choice
================================================== */

/* ----- Container ----- */
#trending-content {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.trending-content__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.trending-content__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.trending-content__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.trending-content__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.trending-content__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.trending-content__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.trending-content__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.trending-content__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.trending-content__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.trending-content__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.trending-content__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.trending-content__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#trending-content .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#trending-content .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#trending-content .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#trending-content .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#trending-content .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#trending-content .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#trending-content .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.trending-content__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.trending-content__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.trending-content__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.trending-content__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.trending-content__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.trending-content__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED TRENDING ARTICLE
   ============================================================ */
.trending-content__featured {
    margin-bottom: 48px;
}

.trending-featured {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 32px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.trending-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* ----- Featured Image ----- */
.trending-featured__image {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.trending-featured__placeholder--featured {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A1A2E, #7C3AED);
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.trending-featured:hover .trending-featured__placeholder--featured {
    transform: scale(1.04);
}

.trending-featured__placeholder--featured .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.trending-featured__placeholder--featured .placeholder-content i {
    font-size: 3.6rem;
    opacity: 0.8;
}

.trending-featured__placeholder--featured .placeholder-content span {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}

.trending-featured__placeholder--featured .placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.trending-featured__placeholder--featured .placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.trending-featured__placeholder--featured .placeholder-shapes .shape--1 {
    width: 160px;
    height: 160px;
    top: -40px;
    right: -40px;
}

.trending-featured__placeholder--featured .placeholder-shapes .shape--2 {
    width: 100px;
    height: 100px;
    bottom: 30px;
    left: 30px;
}

.trending-featured__placeholder--featured .placeholder-shapes .shape--3 {
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.trending-featured__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 14px;
    background: rgba(251, 191, 36, 0.9);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.2);
}

/* ----- Featured Content ----- */
.trending-featured__content {
    padding: 32px 36px 32px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.trending-featured__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.trending-featured__category {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 12px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 50px;
}

.trending-featured__time,
.trending-featured__date {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.trending-featured__time i,
.trending-featured__date i {
    font-size: 0.6rem;
}

.trending-featured__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

.trending-featured__excerpt {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0;
}

.trending-featured__stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.trending-featured__stats .stat {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.trending-featured__stats .stat i {
    font-size: 0.7rem;
}

.trending-featured__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trending-featured__tags span {
    padding: 3px 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.btn-trending-read {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    width: fit-content;
}

.btn-trending-read:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   THREE CONTENT COLUMNS
   ============================================================ */
.trending-content__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 48px;
}

/* ----- Column ----- */
.trending-column {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 22px 20px 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.trending-column:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.trending-column__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-light);
}

.trending-column__icon {
    font-size: 1.2rem;
}

.trending-column__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

/* ----- Trending Item ----- */
.trending-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-bottom: 1px solid var(--color-gray-light);
}

.trending-item:last-child {
    border-bottom: none;
}

.trending-item:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(4px);
}

.trending-item__thumb {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7C3AED, #A78BFA);
}

.trending-item:nth-child(2) .trending-item__thumb {
    background: linear-gradient(135deg, #0EA5E9, #38BDF8);
}
.trending-item:nth-child(3) .trending-item__thumb {
    background: linear-gradient(135deg, #34D399, #6EE7B7);
}
.trending-item:nth-child(4) .trending-item__thumb {
    background: linear-gradient(135deg, #F59E0B, #FBBF24);
}
.trending-item:nth-child(5) .trending-item__thumb {
    background: linear-gradient(135deg, #EF4444, #F87171);
}

.trending-item__content {
    flex: 1;
    min-width: 0;
}

.trending-item__category {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trending-item__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 2px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.trending-item__meta i {
    font-size: 0.5rem;
    margin-right: 2px;
}

.trending-item__badge {
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-mid);
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 8px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    flex-shrink: 0;
}

.trending-item__badge--popular {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border-color: rgba(251, 191, 36, 0.1);
}

.trending-item__badge--editors {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border-color: rgba(244, 67, 54, 0.1);
}

.trending-item--featured {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

/* ============================================================
   POPULAR TOPICS CLOUD
   ============================================================ */
.trending-content__topics {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 28px 32px 24px;
    box-shadow: var(--shadow-glass);
    margin-bottom: 48px;
}

.topics-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.topics-header__icon {
    font-size: 1.4rem;
}

.topics-header__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.topics-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
}

.topics-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 20px;
}

.topic-item {
    display: inline-block;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    padding: 4px 8px;
    border-radius: 8px;
    position: relative;
}

.topic-item::after {
    content: attr(data-count);
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 1px 6px;
    border-radius: 50px;
    margin-left: 4px;
    transition: all 0.3s ease;
}

.topic-item:hover {
    color: var(--color-purple);
    transform: translateY(-3px) scale(1.05);
}

.topic-item:hover::after {
    background: var(--color-purple);
    color: var(--color-white);
}

.topic-item--xl {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
}
.topic-item--lg {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
}
.topic-item--md {
    font-size: 1rem;
}
.topic-item--sm {
    font-size: 0.85rem;
}

/* ============================================================
   EDITOR'S CHOICE CAROUSEL
   ============================================================ */
.trending-content__carousel {
    margin-bottom: 48px;
}

.carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.carousel-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.carousel-header__icon {
    font-size: 1.3rem;
}

.carousel-header__title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.carousel-header__right {
    display: flex;
    gap: 8px;
}

.carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.carousel-btn:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.carousel-track-wrapper {
    overflow: hidden;
    border-radius: 18px;
}

.carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ----- Carousel Card ----- */
.carousel-card {
    min-width: calc(33.333% - 14px);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
}

.carousel-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.carousel-card__image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-off-white);
}

.carousel-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
    transition: transform 0.5s ease;
}

.carousel-card:hover .carousel-card__placeholder {
    transform: scale(1.04);
}

.carousel-card__placeholder--1 {
    background: linear-gradient(135deg, #1A1A2E, #7C3AED);
}
.carousel-card__placeholder--2 {
    background: linear-gradient(135deg, #1A1A2E, #2D1B69);
}
.carousel-card__placeholder--3 {
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
}
.carousel-card__placeholder--4 {
    background: linear-gradient(135deg, #1A3A2A, #34D399);
}
.carousel-card__placeholder--5 {
    background: linear-gradient(135deg, #1A1A1A, #10A37F);
}
.carousel-card__placeholder--6 {
    background: linear-gradient(135deg, #4A1A2A, #F472B6);
}

.carousel-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    background: rgba(192, 227, 74, 0.9);
    border-radius: 50px;
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
}

.carousel-card__content {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.carousel-card__category {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.carousel-card__title {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.carousel-card__author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.carousel-card__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.carousel-card__author-name {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.carousel-card__meta {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-bottom: 10px;
}

.carousel-card__meta i {
    font-size: 0.55rem;
    margin-right: 2px;
}

.carousel-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.carousel-card__link i {
    font-size: 0.55rem;
    transition: transform 0.3s ease;
}

.carousel-card__link:hover {
    color: var(--color-purple-dark);
}

.carousel-card__link:hover i {
    transform: translateX(4px);
}

/* Carousel Indicators */
.carousel-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gray-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator-dot:hover {
    background: var(--color-purple);
    transform: scale(1.2);
}

.indicator-dot.active {
    background: var(--color-purple);
    width: 24px;
    border-radius: 4px;
}

/* ============================================================
   TRENDING METRICS
   ============================================================ */
.trending-content__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 32px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.trending-metric {
    text-align: center;
    padding: 8px 4px;
    transition: all 0.3s ease;
}

.trending-metric:hover {
    transform: translateY(-3px);
}

.trending-metric__icon {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.trending-metric__label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trending-metric__value {
    display: block;
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin-top: 2px;
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.trending-content__view-all {
    text-align: center;
}

.btn-view-trending {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-trending:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.trending-featured__link:focus-visible,
.btn-trending-read:focus-visible,
.carousel-card__link:focus-visible,
.btn-view-trending:focus-visible,
.carousel-btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Trending Articles, Popular Topics & Editor's Choice
================================================== */

/* ==================================================
START: Newsletter, Community & Content Subscription Hub
================================================== */

/* ----- Container ----- */
#community-subscription {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.community-subscription__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.community-subscription__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.community-subscription__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.community-subscription__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.community-subscription__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.community-subscription__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.community-subscription__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.community-subscription__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.community-subscription__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.community-subscription__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.community-subscription__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.community-subscription__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#community-subscription .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#community-subscription .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#community-subscription .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#community-subscription .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#community-subscription .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#community-subscription .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#community-subscription .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.community-subscription__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.community-subscription__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.community-subscription__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.community-subscription__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.community-subscription__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.community-subscription__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   MAIN SUBSCRIPTION AREA
   ============================================================ */
.community-subscription__main {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

/* ============================================================
   SUBSCRIPTION FORM (Left Column)
   ============================================================ */
.subscription-form {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 36px 32px 32px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.subscription-form:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.subscription-form__header {
    text-align: center;
    margin-bottom: 28px;
}

.subscription-form__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    color: var(--color-white);
    font-size: 1.3rem;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.subscription-form__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.subscription-form__description {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

/* ----- Form Elements ----- */
.form-group {
    margin-bottom: 18px;
}

.form-group__label {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 5px;
}

.form-input,
.form-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 12px;
    font-family: var(--font-primary);
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    outline: none;
}

.form-input:focus,
.form-select:focus {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.form-input::placeholder {
    color: var(--color-gray-mid);
    opacity: 0.6;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239BA3B5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

/* ----- Content Preferences ----- */
.form-group--preferences .form-group__label {
    margin-bottom: 2px;
}

.form-group__hint {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0 0 12px 0;
}

.preferences-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.preference-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.preference-item:hover {
    background: rgba(124, 58, 237, 0.04);
}

.preference-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-purple);
    cursor: pointer;
    flex-shrink: 0;
}

.preference-label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    cursor: pointer;
}

/* ----- Consent ----- */
.form-group--consent {
    margin-top: 4px;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.consent-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    accent-color: var(--color-purple);
    margin-top: 2px;
    cursor: pointer;
}

.consent-text {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
}

/* ----- Subscribe Button ----- */
.btn-subscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 28px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    border: none;
    border-radius: 12px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    position: relative;
    overflow: hidden;
    margin-top: 4px;
}

.btn-subscribe:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-subscribe:active {
    transform: translateY(0);
}

.btn-subscribe .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-subscribe .btn-loader {
    display: none;
    align-items: center;
    gap: 4px;
}

.btn-subscribe .btn-loader .loader-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-charcoal);
    animation: searchDotPulse 1.2s ease-in-out infinite;
}

.btn-subscribe .btn-loader .loader-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.btn-subscribe .btn-loader .loader-dot:nth-child(3) {
    animation-delay: 0.4s;
}

.btn-subscribe.loading .btn-text {
    display: none;
}

.btn-subscribe.loading .btn-loader {
    display: inline-flex;
}

.btn-subscribe.loading {
    opacity: 0.7;
    pointer-events: none;
}

.btn-subscribe.success {
    background: #34D399;
    color: var(--color-white);
}

.btn-subscribe.success .btn-text {
    display: inline-flex;
}

.btn-subscribe.success .btn-loader {
    display: none;
}

/* ----- Form Messages ----- */
.form-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    margin-top: 12px;
}

.form-message--success {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.form-message--error {
    background: rgba(248, 113, 113, 0.08);
    color: #F87171;
    border: 1px solid rgba(248, 113, 113, 0.1);
}

.form-message i {
    font-size: 1.1rem;
}

/* ============================================================
   SUBSCRIPTION SIDEBAR (Right Column)
   ============================================================ */
.subscription-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ----- Community Benefits ----- */
.community-benefits {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 24px 20px 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.community-benefits:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.community-benefits__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 14px 0;
}

.community-benefits__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateX(4px);
}

.benefit-item__icon {
    color: var(--color-lime);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.benefit-item__text {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
}

/* ----- Trust Indicators ----- */
.trust-indicators {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    padding: 16px 14px 14px;
    box-shadow: var(--shadow-glass);
}

.trust-indicator {
    text-align: center;
    padding: 4px 0;
    transition: all 0.3s ease;
}

.trust-indicator:hover {
    transform: translateY(-2px);
}

.trust-indicator__number {
    display: block;
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    line-height: 1.2;
}

.trust-indicator__icon {
    display: block;
    font-size: 1.2rem;
    color: var(--color-lime);
    margin-bottom: 2px;
}

.trust-indicator__label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

/* ----- Social Community ----- */
.social-community {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    padding: 16px 18px 14px;
    box-shadow: var(--shadow-glass);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-community:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.social-community__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 12px 0;
}

.social-community__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-mid);
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.social-link:hover {
    transform: translateY(-3px) scale(1.05);
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

/* ----- Focus States ----- */
.form-input:focus-visible,
.form-select:focus-visible,
.consent-checkbox:focus-visible,
.preference-checkbox:focus-visible,
.btn-subscribe:focus-visible,
.social-link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Newsletter, Community & Content Subscription Hub
================================================== */

/* ==================================================
START: Meet Our Authors & Expert Contributors
================================================== */

/* ----- Container ----- */
#meet-authors {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.meet-authors__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.meet-authors__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.meet-authors__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.meet-authors__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.meet-authors__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.meet-authors__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.meet-authors__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.meet-authors__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.meet-authors__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.meet-authors__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.meet-authors__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.meet-authors__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#meet-authors .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#meet-authors .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#meet-authors .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#meet-authors .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#meet-authors .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#meet-authors .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#meet-authors .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.meet-authors__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.meet-authors__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.meet-authors__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.meet-authors__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.meet-authors__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.meet-authors__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED AUTHOR
   ============================================================ */
.meet-authors__featured {
    margin-bottom: 48px;
}

.featured-author {
    display: flex;
    align-items: center;
    gap: 40px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 36px 40px 36px 36px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-author:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* ----- Featured Image ----- */
.featured-author__image {
    flex-shrink: 0;
}

.featured-author__placeholder {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.featured-author:hover .featured-author__placeholder {
    transform: scale(1.02);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.2);
}

.featured-author__initial {
    font-size: 3.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    letter-spacing: -0.02em;
}

/* ----- Featured Content ----- */
.featured-author__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.featured-author__header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.featured-author__name {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
}

.featured-author__position {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.featured-author__bio {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0;
}

/* Expertise Tags */
.featured-author__expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.expertise-tag {
    padding: 3px 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.expertise-tag:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.12);
}

/* Stats */
.featured-author__stats {
    display: flex;
    align-items: center;
    gap: 16px 24px;
    padding: 8px 0 2px;
}

.featured-author__stats .stat-item {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.featured-author__stats .stat-value {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

.featured-author__stats .stat-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.featured-author__stats .stat-divider {
    width: 1.5px;
    height: 20px;
    background: var(--color-gray-light);
}

/* Social */
.featured-author__social {
    display: flex;
    gap: 8px;
}

.featured-author__social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-mid);
    font-size: 0.8rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.featured-author__social .social-link:hover {
    transform: translateY(-3px) scale(1.05);
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.btn-featured-author {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    width: fit-content;
}

.btn-featured-author:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   AUTHOR GRID
   ============================================================ */
.meet-authors__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 40px;
}

/* ----- Author Card ----- */
.author-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 24px 20px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.author-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* ----- Author Image ----- */
.author-card__image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.author-card:hover .author-card__image {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.author-card__initial {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

/* Alternate colors */
.author-card:nth-child(2) .author-card__image {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
}
.author-card:nth-child(3) .author-card__image {
    background: linear-gradient(135deg, #34D399, #059669);
}
.author-card:nth-child(4) .author-card__image {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}
.author-card:nth-child(5) .author-card__image {
    background: linear-gradient(135deg, #EC4899, #BE185D);
}
.author-card:nth-child(6) .author-card__image {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

/* ----- Card Content ----- */
.author-card__name {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 2px 0;
}

.author-card__position {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 10px;
}

.author-card__expertise {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 10px;
}

.author-card__expertise span {
    padding: 2px 10px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.06);
    border-radius: 50px;
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.author-card__bio {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    flex: 1;
    margin: 0 0 14px 0;
}

.author-card__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 0 0;
    border-top: 1px solid var(--color-gray-light);
    width: 100%;
    margin-bottom: 14px;
}

.author-card__stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.author-card__stats .stat-value {
    font-size: 0.9rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

.author-card__stats .stat-label {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.author-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
}

.author-card__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.author-card__link:hover {
    color: var(--color-purple-dark);
}

.author-card__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   AUTHOR STATISTICS
   ============================================================ */
.meet-authors__stats {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 32px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.stat-card {
    text-align: center;
    padding: 4px 8px;
}

.stat-card__number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.stat-card__number .stat-number {
    display: inline-block;
}

.stat-card__number .stat-suffix {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.stat-card__number .stat-label--weekly {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.stat-card__label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   CONTRIBUTION TYPES
   ============================================================ */
.meet-authors__contributions {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 20px 24px 18px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
    text-align: center;
}

.contributions-label {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.contributions-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
}

.contribution-badge {
    padding: 4px 16px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.contribution-badge:hover {
    transform: translateY(-2px);
    border-color: var(--color-lime);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.08);
    background: var(--color-white);
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.meet-authors__view-all {
    text-align: center;
}

.btn-view-authors {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-authors:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.btn-featured-author:focus-visible,
.author-card__link:focus-visible,
.btn-view-authors:focus-visible,
.featured-author__social .social-link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Meet Our Authors & Expert Contributors
================================================== */

/* ==================================================
START: Blog Statistics, Knowledge Impact & Final CTA
================================================== */

/* ----- Container ----- */
#blog-impact {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.blog-impact__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.blog-impact__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.08;
    pointer-events: none;
}

.blog-impact__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.06;
}

.blog-impact__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.05;
}

.blog-impact__glow--3 {
    width: 300px;
    height: 300px;
    top: 30%;
    left: 40%;
    background: var(--color-purple);
    opacity: 0.03;
}

.blog-impact__glow--4 {
    width: 250px;
    height: 250px;
    bottom: 30%;
    right: 25%;
    background: var(--color-lime);
    opacity: 0.04;
}

.blog-impact__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 10s ease-in-out infinite;
}

.blog-impact__orb--1 {
    width: 120px;
    height: 120px;
    top: 8%;
    right: 18%;
    animation-delay: 0s;
}

.blog-impact__orb--2 {
    width: 80px;
    height: 80px;
    bottom: 15%;
    left: 22%;
    animation-delay: 2.5s;
}

.blog-impact__orb--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.blog-impact__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.blog-impact__shape--1 {
    width: 180px;
    height: 180px;
    top: 5%;
    left: 8%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.blog-impact__shape--2 {
    width: 130px;
    height: 130px;
    bottom: 25%;
    right: 6%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.blog-impact__shape--3 {
    width: 90px;
    height: 90px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.blog-impact__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#blog-impact .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 8s ease-in-out infinite;
}

#blog-impact .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 6%;
    animation-delay: 0s;
}

#blog-impact .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 90%;
    animation-delay: 1.5s;
}

#blog-impact .particle--3 {
    width: 6px;
    height: 6px;
    top: 22%;
    left: 85%;
    animation-delay: 3s;
}

#blog-impact .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.8s;
}

#blog-impact .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 3%;
    animation-delay: 2.2s;
}

#blog-impact .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 95%;
    animation-delay: 3.8s;
}

/* ----- Container ----- */
.blog-impact__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.blog-impact__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.blog-impact__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.blog-impact__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.blog-impact__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.blog-impact__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   KNOWLEDGE IMPACT STATISTICS
   ============================================================ */
.blog-impact__stats {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
}

.impact-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.impact-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.impact-stat:hover {
    transform: translateY(-4px);
}

.impact-stat__number {
    font-size: 2.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 4px;
}

.impact-stat__number .stat-number {
    display: inline-block;
}

.impact-stat__number .stat-suffix {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.impact-stat__number .stat-label--weekly {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.impact-stat__label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   TRUST & QUALITY INDICATORS
   ============================================================ */
.blog-impact__trust {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 20px 24px 18px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
}

.trust-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.trust-item:hover {
    color: var(--color-purple);
    transform: translateY(-2px);
}

.trust-item__icon {
    color: var(--color-lime);
    font-size: 0.85rem;
}

.trust-item__text {
    line-height: 1.2;
}

/* ============================================================
   CONTENT JOURNEY
   ============================================================ */
.blog-impact__journey {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 32px 20px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-impact__journey:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.journey-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.journey-header__icon {
    font-size: 1.4rem;
}

.journey-header__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.journey-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 80px;
}

.journey-step:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--color-lime);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.06);
}

.journey-step__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
}

.journey-step__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.journey-arrow {
    color: var(--color-gray-light);
    font-size: 0.8rem;
}

.journey-arrow i {
    transition: transform 0.3s ease;
}

.journey-steps:hover .journey-arrow i {
    animation: journeyArrowPulse 1.2s ease-in-out infinite;
}

@keyframes journeyArrowPulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

/* ============================================================
   FINAL CALL-TO-ACTION
   ============================================================ */
.blog-impact__cta {
    max-width: 820px;
    margin: 0 auto 40px;
}

.cta-card {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 44px 48px 40px;
    box-shadow: var(--shadow-glass);
    text-align: center;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.cta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 64px rgba(124, 58, 237, 0.08);
}

.cta-card__glow {
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(192, 227, 74, 0.12), rgba(124, 58, 237, 0.08));
    z-index: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.cta-card:hover .cta-card__glow {
    opacity: 1;
}

.cta-card__content {
    position: relative;
    z-index: 2;
}

.cta-card__header {
    margin-bottom: 24px;
}

.cta-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    color: var(--color-white);
    font-size: 1.6rem;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.cta-card__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.cta-card__description {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto;
}

.cta-card__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-cta-primary {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-cta-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

.btn-cta-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-cta-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-cta-secondary i {
    transition: transform 0.3s ease;
}

.btn-cta-secondary:hover i {
    transform: translateX(4px);
}

/* ============================================================
   QUICK LINKS
   ============================================================ */
.blog-impact__quick-links {
    max-width: 820px;
    margin: 0 auto;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
}

.quick-link:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.10);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06);
    background: rgba(255, 255, 255, 0.7);
}

.quick-link__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.quick-link:hover .quick-link__icon {
    transform: scale(1.1);
    color: var(--color-lime-dark);
}

.quick-link__text {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

/* ----- Focus States ----- */
.btn-cta-primary:focus-visible,
.btn-cta-secondary:focus-visible,
.quick-link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Blog Statistics, Knowledge Impact & Final CTA
================================================== */

/* ==================================================
START: Documentation Hero Banner
================================================== */

/* ----- Container ----- */
#docs-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--top-bar-height) + var(--nav-height) + 40px) 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.docs-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.docs-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.08;
    pointer-events: none;
}

.docs-hero__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.06;
}

.docs-hero__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -120px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.05;
}

.docs-hero__glow--3 {
    width: 300px;
    height: 300px;
    top: 30%;
    left: 40%;
    background: var(--color-purple);
    opacity: 0.03;
}

.docs-hero__glow--4 {
    width: 250px;
    height: 250px;
    bottom: 30%;
    right: 25%;
    background: var(--color-lime);
    opacity: 0.04;
}

.docs-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 10s ease-in-out infinite;
}

.docs-hero__orb--1 {
    width: 120px;
    height: 120px;
    top: 8%;
    right: 18%;
    animation-delay: 0s;
}

.docs-hero__orb--2 {
    width: 80px;
    height: 80px;
    bottom: 15%;
    left: 22%;
    animation-delay: 2.5s;
}

.docs-hero__orb--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    right: 30%;
    animation-delay: 4s;
}

.docs-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.docs-hero__shape--1 {
    width: 180px;
    height: 180px;
    top: 5%;
    left: 8%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.docs-hero__shape--2 {
    width: 130px;
    height: 130px;
    bottom: 25%;
    right: 6%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.docs-hero__shape--3 {
    width: 90px;
    height: 90px;
    top: 55%;
    left: 5%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

.docs-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#docs-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 8s ease-in-out infinite;
}

#docs-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 6%;
    animation-delay: 0s;
}

#docs-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 90%;
    animation-delay: 1.5s;
}

#docs-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 22%;
    left: 85%;
    animation-delay: 3s;
}

#docs-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.8s;
}

#docs-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 3%;
    animation-delay: 2.2s;
}

#docs-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 95%;
    animation-delay: 3.8s;
}

/* ----- Container ----- */
.docs-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ============================================================
   LEFT COLUMN — Content
   ============================================================ */
.docs-hero__content {
    flex: 1 1 55%;
    max-width: 660px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.docs-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.docs-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.docs-hero__title {
    font-size: 3.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.docs-hero__title .highlight-lime {
    position: relative;
    display: inline-block;
}

.docs-hero__title .highlight-lime::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(192, 227, 74, 0.25);
    border-radius: 4px;
    z-index: -1;
}

.docs-hero__description {
    font-size: 1.1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 46ch;
    margin: 0;
}

/* ----- Buttons ----- */
.docs-hero__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-docs-primary {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-docs-primary:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

.btn-docs-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-docs-secondary:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.btn-docs-secondary i {
    transition: transform 0.3s ease;
}

.btn-docs-secondary:hover i {
    transform: translateX(4px);
}

/* ----- Search Bar ----- */
.docs-hero__search {
    margin-top: 4px;
}

.search-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 50px;
    padding: 4px 4px 4px 18px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-soft);
    gap: 6px;
}

.search-container:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.search-icon {
    color: var(--color-gray-mid);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    min-width: 0;
}

.search-input::placeholder {
    color: var(--color-gray-mid);
    opacity: 0.6;
}

.search-clear {
    display: none;
    background: transparent;
    border: none;
    color: var(--color-gray-mid);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.search-clear:hover {
    color: var(--color-charcoal);
}

.search-clear.visible {
    display: block;
}

.search-voice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-gray-mid);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.search-voice:hover {
    background: var(--color-off-white);
    color: var(--color-purple);
}

.search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: var(--color-purple);
    color: var(--color-white);
    border: none;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15);
    flex-shrink: 0;
    gap: 8px;
}

.search-submit:hover {
    background: var(--color-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}

.search-submit i {
    font-size: 0.85rem;
}

/* Recent Searches */
.search-recent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 4px 4px;
    margin-top: 4px;
}

.search-recent.visible {
    display: flex;
}

.recent-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recent-chip {
    padding: 3px 12px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s ease;
}

.recent-chip:hover {
    border-color: var(--color-lime);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.06);
}

/* ----- Quick Access Links ----- */
.docs-hero__quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 4px 0 2px;
}

.quick-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quick-chip {
    padding: 3px 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.quick-chip:hover {
    border-color: var(--color-lime);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.06);
}

/* ----- Documentation Statistics ----- */
.docs-hero__stats {
    display: flex;
    align-items: center;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding: 4px 0 2px;
}

.docs-hero__stats .stat-item {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.docs-hero__stats .stat-number {
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    display: inline-block;
}

.docs-hero__stats .stat-suffix {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.docs-hero__stats .stat-label {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.docs-hero__stats .stat-label--weekly {
    color: var(--color-lime-dark);
    font-weight: var(--font-weight-semibold);
}

.docs-hero__stats .stat-divider {
    width: 1.5px;
    height: 22px;
    background: var(--color-gray-light);
    flex-shrink: 0;
}

/* ============================================================
   RIGHT COLUMN — Premium Visual Composition
   ============================================================ */
.docs-hero__visual {
    flex: 1 1 45%;
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Documentation Mockup ----- */
.docs-visual__mockup {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    box-shadow: 0 32px 80px rgba(26, 26, 46, 0.08);
    overflow: hidden;
    display: flex;
    z-index: 5;
    transition: all 0.4s ease;
}

.docs-visual__mockup:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px rgba(26, 26, 46, 0.12);
}

/* Sidebar */
.mockup__sidebar {
    width: 140px;
    background: rgba(124, 58, 237, 0.04);
    padding: 16px 14px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-gray-light);
}

.sidebar__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-gray-light);
}

.sidebar__icon {
    color: var(--color-purple);
    font-size: 0.9rem;
}

.sidebar__title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar__item {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    transition: all 0.3s ease;
    cursor: default;
}

.sidebar__item:hover {
    color: var(--color-charcoal);
    background: rgba(124, 58, 237, 0.04);
}

.sidebar__item--active {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
}

/* Content */
.mockup__content {
    flex: 1;
    padding: 16px 18px;
}

.content__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.content__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.content__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime-dark);
    padding: 2px 10px;
    background: rgba(192, 227, 74, 0.08);
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.1);
}

.content__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content__paragraph {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.content__line {
    display: block;
    height: 6px;
    background: var(--color-gray-light);
    border-radius: 4px;
}

.content__line:nth-child(1) {
    width: 85%;
}
.content__line:nth-child(2) {
    width: 95%;
}
.content__line--short {
    width: 60%;
}

.content__code {
    padding: 10px 12px;
    background: var(--color-charcoal);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Courier New', monospace;
}

.code-line {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
}

.code-keyword {
    color: var(--color-lime);
}

.content__actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.action-btn {
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    cursor: default;
}

.action-btn--primary {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.action-btn--secondary {
    background: rgba(255, 255, 255, 0.3);
    color: var(--color-gray-mid);
    border: 1px solid var(--color-gray-light);
}

/* ----- Featured Resources (Floating Cards) ----- */
.docs-visual__resource {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: 0 16px 48px rgba(26, 26, 46, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: floatCard 5s ease-in-out infinite;
    max-width: 150px;
}

.docs-visual__resource:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 24px 64px rgba(124, 58, 237, 0.08);
}

.resource-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.docs-visual__resource:hover .resource-icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

.resource-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.resource-label {
    font-size: 0.45rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.resource-value {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

/* Resource positions */
.docs-visual__resource--1 {
    top: 2%;
    right: -10%;
    animation-delay: 0s;
}
.docs-visual__resource--2 {
    bottom: 22%;
    left: -12%;
    animation-delay: 1.2s;
}
.docs-visual__resource--3 {
    bottom: 2%;
    right: 12%;
    animation-delay: 2.4s;
}
.docs-visual__resource--4 {
    top: 28%;
    left: -10%;
    animation-delay: 0.6s;
}
.docs-visual__resource--5 {
    top: 12%;
    left: -6%;
    animation-delay: 1.8s;
}
.docs-visual__resource--6 {
    bottom: 12%;
    right: -8%;
    animation-delay: 3s;
}

/* ----- Decorative Tech Icons ----- */
.docs-visual__tech {
    position: absolute;
    font-size: 1.8rem;
    color: rgba(124, 58, 237, 0.06);
    pointer-events: none;
    z-index: 1;
    animation: floatNode 7s ease-in-out infinite;
}

.docs-visual__tech--1 {
    top: 6%;
    left: 4%;
    font-size: 2.2rem;
    color: rgba(255, 45, 45, 0.05);
    animation-delay: 0s;
}
.docs-visual__tech--2 {
    bottom: 10%;
    right: 3%;
    font-size: 2.4rem;
    color: rgba(97, 218, 251, 0.05);
    animation-delay: 2s;
}
.docs-visual__tech--3 {
    top: 45%;
    left: 2%;
    font-size: 2rem;
    color: rgba(51, 153, 51, 0.05);
    animation-delay: 3.5s;
}
.docs-visual__tech--4 {
    top: 35%;
    right: 2%;
    font-size: 2rem;
    color: rgba(51, 51, 153, 0.05);
    animation-delay: 1.2s;
}

/* ----- Center Pulse Orb ----- */
.docs-visual__orb {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
    animation: pulseGlow 3.5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* ----- Focus States ----- */
.btn-docs-primary:focus-visible,
.btn-docs-secondary:focus-visible,
.search-submit:focus-visible,
.search-clear:focus-visible,
.search-voice:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

.search-input:focus-visible {
    outline: none;
}

/* ==================================================
END: Documentation Hero Banner
================================================== */

/* ==================================================
START: Documentation Categories Hub
================================================== */

/* ----- Container ----- */
#docs-categories {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.docs-categories__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.docs-categories__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.docs-categories__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.docs-categories__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.docs-categories__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.docs-categories__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.docs-categories__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.docs-categories__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.docs-categories__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.docs-categories__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.docs-categories__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.docs-categories__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#docs-categories .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#docs-categories .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#docs-categories .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#docs-categories .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#docs-categories .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#docs-categories .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#docs-categories .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.docs-categories__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.docs-categories__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.docs-categories__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.docs-categories__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.docs-categories__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.docs-categories__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED CATEGORY
   ============================================================ */
.docs-categories__featured {
    margin-bottom: 40px;
}

.featured-category {
    display: flex;
    align-items: center;
    gap: 32px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 32px 36px 32px 32px;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-category::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    z-index: 0;
    opacity: 0.06;
    pointer-events: none;
}

.featured-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.featured-category > * {
    position: relative;
    z-index: 2;
}

.featured-category__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    color: var(--color-white);
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.featured-category__content {
    flex: 1;
    min-width: 0;
}

.featured-category__badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(192, 227, 74, 0.1);
    padding: 2px 12px;
    border-radius: 50px;
    margin-bottom: 6px;
}

.featured-category__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.featured-category__description {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 12px 0;
    max-width: 48ch;
}

.featured-category__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-bottom: 14px;
}

.featured-category__count,
.featured-category__time,
.featured-category__update {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 6px;
}

.featured-category__count i,
.featured-category__time i,
.featured-category__update i {
    font-size: 0.7rem;
}

.featured-category__difficulty {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 12px;
    border-radius: 50px;
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.btn-featured-docs {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-featured-docs:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* Featured Category Visual */
.featured-category__visual {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.featured-visual__orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    animation: pulseGlow 3.5s ease-in-out infinite;
}

.featured-visual__orb--1 {
    width: 80px;
    height: 80px;
    top: 10px;
    left: 10px;
    animation-delay: 0s;
}

.featured-visual__orb--2 {
    width: 50px;
    height: 50px;
    bottom: 10px;
    right: 10px;
    animation-delay: 1.5s;
}

.featured-visual__node {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple);
    font-size: 0.8rem;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.04);
    animation: floatNode 4s ease-in-out infinite;
}

.featured-visual__node--1 {
    top: 8px;
    left: 45px;
    animation-delay: 0s;
}

.featured-visual__node--2 {
    bottom: 10px;
    right: 20px;
    animation-delay: 1.2s;
}

.featured-visual__node--3 {
    top: 40px;
    right: 5px;
    animation-delay: 2.4s;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.docs-categories__filters {
    margin-bottom: 32px;
    padding: 4px 0;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
}

.filter-pill {
    padding: 6px 18px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-soft);
}

.filter-pill:hover {
    border-color: rgba(124, 58, 237, 0.15);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.filter-pill.active {
    background: linear-gradient(135deg, var(--color-lime), var(--color-lime-dark));
    border-color: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.25);
}

.filter-pill:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 2px;
}

/* ============================================================
   CATEGORIES GRID
   ============================================================ */
.docs-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 40px;
}

/* ============================================================
   CATEGORY CARD
   ============================================================ */
.category-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 24px 22px 22px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.category-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.category-card:hover::before {
    opacity: 1;
}

/* ----- Card Icon ----- */
.category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.2rem;
    margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-card:hover .category-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors */
.category-card:nth-child(2):hover .category-card__icon,
.category-card:nth-child(5):hover .category-card__icon,
.category-card:nth-child(8):hover .category-card__icon,
.category-card:nth-child(11):hover .category-card__icon,
.category-card:nth-child(14):hover .category-card__icon,
.category-card:nth-child(17):hover .category-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Card Title ----- */
.category-card__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

/* ----- Card Description ----- */
.category-card__description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    flex: 1;
    margin: 0 0 14px 0;
}

/* ----- Card Meta ----- */
.category-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-light);
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.category-card__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.category-card__count i {
    font-size: 0.65rem;
}

.category-card__update {
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

/* ----- Difficulty Badge ----- */
.category-card__difficulty {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 10px;
    border-radius: 50px;
    width: fit-content;
    margin-bottom: 12px;
}

.category-card__difficulty--beginner {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.category-card__difficulty--intermediate {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.category-card__difficulty--advanced {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

/* ----- Card Link ----- */
.category-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}

.category-card__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.category-card__link:hover {
    color: var(--color-purple-dark);
}

.category-card__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   DOCUMENTATION HIGHLIGHTS
   ============================================================ */
.docs-categories__highlights {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

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

.highlight-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.highlight-stat:hover {
    transform: translateY(-3px);
}

.highlight-stat__number {
    font-size: 2.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.highlight-stat__number .stat-number {
    display: inline-block;
}

.highlight-stat__number .stat-suffix {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.highlight-stat__number .stat-label--weekly {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.highlight-stat__label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.docs-categories__view-all {
    text-align: center;
}

.btn-view-docs {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-docs:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.category-card__link:focus-visible,
.btn-featured-docs:focus-visible,
.btn-view-docs:focus-visible,
.filter-pill:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Documentation Categories Hub
================================================== */

/* ==================================================
START: Quick Start Guides & Developer Onboarding
================================================== */

/* ----- Container ----- */
#quick-start {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.quick-start__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.quick-start__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.quick-start__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.quick-start__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.quick-start__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.quick-start__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.quick-start__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.quick-start__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.quick-start__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.quick-start__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.quick-start__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.quick-start__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#quick-start .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#quick-start .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#quick-start .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#quick-start .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#quick-start .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#quick-start .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#quick-start .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.quick-start__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.quick-start__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.quick-start__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.quick-start__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.quick-start__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.quick-start__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   QUICK START TIMELINE
   ============================================================ */
.quick-start__timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 20px 0 30px;
}

.timeline-steps {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 0;
}

.timeline-step__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
}

.timeline-step__number {
    font-size: 0.55rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    background: var(--color-white);
    padding: 2px 8px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-bottom: 6px;
    transition: all 0.4s ease;
}

.timeline-step.active .timeline-step__number {
    border-color: var(--color-lime);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.05);
}

.timeline-step__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2.5px solid var(--color-gray-light);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}

.timeline-step.active .timeline-step__dot {
    border-color: var(--color-lime);
    background: var(--color-lime);
    box-shadow: 0 0 0 6px rgba(192, 227, 74, 0.15);
}

.timeline-step__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.timeline-step__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-step.active .timeline-step__icon {
    color: var(--color-lime-dark);
    transform: scale(1.1);
}

.timeline-step__title {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
    line-height: 1.3;
}

.timeline-step__description {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0;
    line-height: 1.3;
    display: none;
}

.timeline-step__time {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.timeline-step__time i {
    font-size: 0.5rem;
}

/* Timeline Connector */
.timeline-connector {
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 2.5px;
    background: var(--color-gray-light);
    border-radius: 4px;
    overflow: hidden;
    z-index: 1;
}

.timeline-connector__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 4px;
    transition: width 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-connector__fill.animated {
    width: 100%;
}

/* ============================================================
   STEP GUIDE CARDS
   ============================================================ */
.quick-start__guides {
    margin-bottom: 48px;
}

.guides-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ----- Guide Card ----- */
.guide-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 22px 20px 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.guide-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.guide-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.guide-card:hover::before {
    opacity: 1;
}

/* ----- Card Icon ----- */
.guide-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
    font-size: 1.1rem;
    margin-bottom: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.guide-card:hover .guide-card__icon {
    background: var(--color-purple);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Alternate icon colors */
.guide-card:nth-child(1):hover .guide-card__icon,
.guide-card:nth-child(3):hover .guide-card__icon,
.guide-card:nth-child(5):hover .guide-card__icon,
.guide-card:nth-child(7):hover .guide-card__icon {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

/* ----- Card Title ----- */
.guide-card__title {
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px 0;
}

/* ----- Card Description ----- */
.guide-card__description {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    flex: 1;
    margin: 0 0 12px 0;
}

/* ----- Card Meta ----- */
.guide-card__meta {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.guide-card__difficulty {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 10px;
    border-radius: 50px;
}

.guide-card__difficulty--beginner {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.guide-card__difficulty--intermediate {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.guide-card__difficulty--advanced {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

.guide-card__time {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.guide-card__time i {
    font-size: 0.55rem;
}

/* ----- Card Link ----- */
.guide-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.guide-card__link i {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.guide-card__link:hover {
    color: var(--color-purple-dark);
}

.guide-card__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   FEATURED BEGINNER GUIDE
   ============================================================ */
.quick-start__featured {
    margin-bottom: 48px;
}

.featured-guide {
    display: grid;
    grid-template-columns: 35fr 65fr;
    gap: 32px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-guide:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* ----- Featured Image ----- */
.featured-guide__image {
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

.featured-guide__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-guide:hover .featured-guide__placeholder {
    transform: scale(1.04);
}

.featured-guide__placeholder .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.featured-guide__placeholder .placeholder-content i {
    font-size: 3.2rem;
    opacity: 0.8;
}

.featured-guide__placeholder .placeholder-content span {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}

.featured-guide__placeholder .placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.featured-guide__placeholder .placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.featured-guide__placeholder .placeholder-shapes .shape--1 {
    width: 140px;
    height: 140px;
    top: -40px;
    right: -40px;
}

.featured-guide__placeholder .placeholder-shapes .shape--2 {
    width: 90px;
    height: 90px;
    bottom: 20px;
    left: 20px;
}

.featured-guide__placeholder .placeholder-shapes .shape--3 {
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.featured-guide__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 14px;
    background: rgba(192, 227, 74, 0.9);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

/* ----- Featured Content ----- */
.featured-guide__content {
    padding: 32px 36px 32px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.featured-guide__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
}

.featured-guide__description {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0;
}

.featured-guide__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.featured-guide__steps,
.featured-guide__time {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 6px;
}

.featured-guide__steps i,
.featured-guide__time i {
    font-size: 0.7rem;
}

.featured-guide__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.featured-guide__tech span {
    padding: 2px 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.btn-featured-guide {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    width: fit-content;
}

.btn-featured-guide:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   QUICK RESOURCES
   ============================================================ */
.quick-start__resources {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.quick-start__resources:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.resources-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.resources-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.resources-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.resource-item:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.resource-item__icon {
    color: var(--color-lime);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.resource-item__label {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

/* ============================================================
   ONBOARDING PROGRESS
   ============================================================ */
.quick-start__progress {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

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

.progress-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.progress-stat:hover {
    transform: translateY(-3px);
}

.progress-stat__number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.progress-stat__number .stat-number {
    display: inline-block;
}

.progress-stat__number .stat-suffix {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.progress-stat__number .stat-label--weekly {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.progress-stat__label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.quick-start__view-all {
    text-align: center;
}

.btn-view-guides {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-guides:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.guide-card__link:focus-visible,
.btn-featured-guide:focus-visible,
.btn-view-guides:focus-visible,
.resource-item:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Quick Start Guides & Developer Onboarding
================================================== */

/* ==================================================
START: Documentation Explorer & Interactive Navigation
================================================== */

/* ----- Container ----- */
#docs-explorer {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.docs-explorer__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.docs-explorer__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.docs-explorer__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.docs-explorer__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.docs-explorer__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.docs-explorer__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.docs-explorer__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.docs-explorer__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.docs-explorer__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.docs-explorer__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.docs-explorer__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.docs-explorer__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#docs-explorer .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#docs-explorer .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#docs-explorer .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#docs-explorer .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#docs-explorer .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#docs-explorer .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#docs-explorer .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.docs-explorer__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.docs-explorer__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.docs-explorer__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.docs-explorer__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.docs-explorer__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.docs-explorer__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   THREE-COLUMN EXPLORER
   ============================================================ */
.docs-explorer__container {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 30px;
    margin-bottom: 48px;
    align-items: start;
}

/* ============================================================
   LEFT SIDEBAR
   ============================================================ */
.docs-explorer__sidebar {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 20px 16px 18px;
    box-shadow: var(--shadow-glass);
    position: sticky;
    top: calc(var(--top-bar-height) + var(--nav-height) + 30px);
    max-height: calc(100vh - var(--top-bar-height) - var(--nav-height) - 60px);
    overflow-y: auto;
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 10px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.sidebar-search:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.sidebar-search__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    color: var(--color-charcoal);
}

.sidebar-search__input::placeholder {
    color: var(--color-gray-mid);
}

.sidebar-search__btn {
    background: none;
    border: none;
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px;
}

.sidebar-search__btn:hover {
    color: var(--color-purple);
}

/* Tree Navigation */
.tree-category {
    margin-bottom: 4px;
}

.tree-category__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s ease;
    text-align: left;
}

.tree-category__toggle:hover {
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-purple);
}

.tree-category__icon {
    font-size: 0.85rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.tree-category__label {
    flex: 1;
}

.tree-category__arrow {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
    color: var(--color-gray-mid);
}

.tree-category__toggle[aria-expanded="true"] .tree-category__arrow {
    transform: rotate(180deg);
}

.tree-subcategories {
    list-style: none;
    padding: 0;
    margin: 0 0 4px 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 28px;
}

.tree-subcategories li {
    margin: 2px 0;
}

.tree-link {
    display: block;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: all 0.3s ease;
}

.tree-link:hover {
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-charcoal);
}

.tree-link.active {
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-weight: var(--font-weight-medium);
}

/* ============================================================
   MAIN DOCUMENTATION PREVIEW
   ============================================================ */
.doc-preview {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 28px 30px 30px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.doc-preview:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

/* Breadcrumb */
.doc-preview__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 0.75rem;
    color: var(--color-gray-mid);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-gray-light);
}

.doc-preview__breadcrumb a {
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: color 0.3s ease;
}

.doc-preview__breadcrumb a:hover {
    color: var(--color-purple);
}

.doc-preview__breadcrumb .separator {
    color: var(--color-gray-light);
}

.doc-preview__breadcrumb .current {
    color: var(--color-charcoal);
    font-weight: var(--font-weight-medium);
}

/* Header */
.doc-preview__header {
    margin-bottom: 20px;
}

.doc-preview__title {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.doc-preview__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.meta-item {
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-item i {
    font-size: 0.7rem;
}

.difficulty {
    padding: 2px 10px;
    border-radius: 50px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
}

.difficulty--beginner {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.difficulty--intermediate {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.difficulty--advanced {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

/* Body */
.doc-preview__body {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-charcoal);
}

.doc-preview__body h2 {
    font-size: 1.4rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 24px 0 12px;
    letter-spacing: -0.02em;
}

.doc-preview__body p {
    margin: 0 0 14px;
    color: var(--color-gray-mid);
}

.doc-preview__body ul {
    margin: 0 0 14px;
    padding-left: 20px;
    list-style: none;
}

.doc-preview__body ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 4px;
    color: var(--color-gray-mid);
}

.doc-preview__body ul li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--color-lime);
    font-weight: bold;
}

.doc-preview__note {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    margin: 16px 0;
    align-items: flex-start;
}

.doc-preview__note--info {
    background: rgba(14, 165, 233, 0.04);
    border: 1px solid rgba(14, 165, 233, 0.1);
}

.doc-preview__note--warning {
    background: rgba(251, 191, 36, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.note-icon {
    font-size: 1.1rem;
    color: var(--color-gray-mid);
    flex-shrink: 0;
    margin-top: 2px;
}

.doc-preview__note--info .note-icon {
    color: #0EA5E9;
}

.doc-preview__note--warning .note-icon {
    color: #FBBF24;
}

.note-text {
    font-size: 0.85rem;
    color: var(--color-gray-mid);
    line-height: 1.5;
}

.note-text strong {
    color: var(--color-charcoal);
}

.doc-preview__code {
    background: var(--color-charcoal);
    border-radius: 10px;
    margin: 16px 0;
    overflow: hidden;
}

.code-header {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.code-language {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.doc-preview__code pre {
    padding: 14px 16px;
    margin: 0;
    overflow-x: auto;
}

.doc-preview__code code {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre;
}

/* Related Guides */
.doc-preview__related {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-light);
}

.doc-preview__related h3 {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 10px;
}

.doc-preview__related ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.doc-preview__related ul li a {
    font-size: 0.8rem;
    color: var(--color-purple);
    text-decoration: none;
    transition: color 0.3s ease;
}

.doc-preview__related ul li a:hover {
    color: var(--color-purple-dark);
    text-decoration: underline;
}

/* Navigation */
.doc-preview__nav {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--color-gray-light);
}

.doc-preview__nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: all 0.3s ease;
}

.doc-preview__nav a:hover {
    color: var(--color-purple);
}

.nav-prev i {
    font-size: 0.7rem;
}
.nav-next i {
    font-size: 0.7rem;
}

/* ============================================================
   RIGHT INFORMATION PANEL
   ============================================================ */
.docs-explorer__panel {
    position: sticky;
    top: calc(var(--top-bar-height) + var(--nav-height) + 30px);
}

.info-panel {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 20px 18px 18px;
    box-shadow: var(--shadow-glass);
}

.info-panel__title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
}

.info-panel__toc {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.toc-link {
    display: block;
    padding: 4px 0 4px 10px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.3s ease;
}

.toc-link:hover {
    color: var(--color-charcoal);
    border-left-color: var(--color-gray-light);
}

.toc-link.active {
    color: var(--color-purple);
    border-left-color: var(--color-purple);
    font-weight: var(--font-weight-medium);
}

.info-panel__progress {
    margin-bottom: 16px;
    padding: 12px 0 10px;
    border-top: 1px solid var(--color-gray-light);
    border-bottom: 1px solid var(--color-gray-light);
}

.progress-label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    margin-bottom: 4px;
}

.progress-bar {
    height: 4px;
    background: var(--color-gray-light);
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0 2px;
}

.progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 4px;
    transition: width 1s ease;
}

.progress-text {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.info-panel__section {
    margin-bottom: 14px;
}

.info-panel__section h5 {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}

.recent-list,
.popular-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-list li,
.popular-list li {
    margin: 2px 0;
}

.recent-list li a,
.popular-list li a {
    display: block;
    padding: 3px 0;
    font-size: 0.72rem;
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: all 0.3s ease;
}

.recent-list li a:hover,
.popular-list li a:hover {
    color: var(--color-purple);
}

.info-panel__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--color-gray-light);
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-primary);
}

.action-btn:hover {
    background: var(--color-white);
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.action-btn i {
    font-size: 0.6rem;
}

/* ============================================================
   QUICK ACTIONS
   ============================================================ */
.docs-explorer__actions {
    max-width: 900px;
    margin: 0 auto 40px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
    box-shadow: var(--shadow-glass);
}

.quick-action:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
    background: rgba(255, 255, 255, 0.6);
}

.quick-action__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.quick-action:hover .quick-action__icon {
    color: var(--color-lime-dark);
    transform: scale(1.1);
}

.quick-action__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-align: center;
    line-height: 1.2;
}

/* ============================================================
   DOCUMENTATION INSIGHTS
   ============================================================ */
.docs-explorer__insights {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.insight-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.insight-stat:hover {
    transform: translateY(-3px);
}

.insight-stat__number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.insight-stat__number .stat-number {
    display: inline-block;
}

.insight-stat__number .stat-suffix {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.insight-stat__number .stat-label--weekly {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.insight-stat__label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.docs-explorer__view-all {
    text-align: center;
}

.btn-view-docs-explorer {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-docs-explorer:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.tree-link:focus-visible,
.tree-category__toggle:focus-visible,
.sidebar-search__input:focus-visible,
.action-btn:focus-visible,
.btn-view-docs-explorer:focus-visible,
.doc-preview__nav a:focus-visible,
.doc-preview__related ul li a:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Documentation Explorer & Interactive Navigation
================================================== */

/* ==================================================
START: Featured Documentation, Popular Guides & Recently Updated
================================================== */

/* ----- Container ----- */
#featured-docs {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.featured-docs__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.featured-docs__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.featured-docs__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.featured-docs__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.featured-docs__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.featured-docs__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.featured-docs__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.featured-docs__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.featured-docs__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.featured-docs__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.featured-docs__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.featured-docs__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#featured-docs .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#featured-docs .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#featured-docs .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#featured-docs .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#featured-docs .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#featured-docs .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#featured-docs .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.featured-docs__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.featured-docs__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.featured-docs__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.featured-docs__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.featured-docs__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.featured-docs__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.featured-docs__filters {
    margin-bottom: 32px;
    padding: 4px 0;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
}

.filter-pill {
    padding: 6px 18px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-soft);
}

.filter-pill:hover {
    border-color: rgba(124, 58, 237, 0.15);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.filter-pill.active {
    background: linear-gradient(135deg, var(--color-lime), var(--color-lime-dark));
    border-color: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.25);
}

.filter-pill:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 2px;
}

/* ============================================================
   FEATURED DOCUMENTATION CARD
   ============================================================ */
.featured-docs__featured {
    margin-bottom: 48px;
}

.featured-guide {
    display: grid;
    grid-template-columns: 35fr 65fr;
    gap: 32px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-guide:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* ----- Featured Image ----- */
.featured-guide__image {
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

.featured-guide__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2D1B69, #7C3AED);
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-guide:hover .featured-guide__placeholder {
    transform: scale(1.04);
}

.featured-guide__placeholder .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.featured-guide__placeholder .placeholder-content i {
    font-size: 3.2rem;
    opacity: 0.8;
}

.featured-guide__placeholder .placeholder-content span {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}

.featured-guide__placeholder .placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.featured-guide__placeholder .placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.featured-guide__placeholder .placeholder-shapes .shape--1 {
    width: 140px;
    height: 140px;
    top: -40px;
    right: -40px;
}

.featured-guide__placeholder .placeholder-shapes .shape--2 {
    width: 90px;
    height: 90px;
    bottom: 20px;
    left: 20px;
}

.featured-guide__placeholder .placeholder-shapes .shape--3 {
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.featured-guide__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 14px;
    background: rgba(192, 227, 74, 0.9);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

/* ----- Featured Content ----- */
.featured-guide__content {
    padding: 32px 36px 32px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.featured-guide__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.featured-guide__category {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 12px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 50px;
}

.featured-guide__difficulty {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 10px;
    border-radius: 50px;
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.featured-guide__time,
.featured-guide__update {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.featured-guide__time i,
.featured-guide__update i {
    font-size: 0.6rem;
}

.featured-guide__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
}

.featured-guide__description {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin: 0;
}

.featured-guide__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.featured-guide__tech span {
    padding: 2px 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.btn-featured-guide {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    width: fit-content;
}

.btn-featured-guide:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   THREE CONTENT COLUMNS
   ============================================================ */
.featured-docs__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

/* ----- Column ----- */
.docs-column {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 20px 18px 16px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.docs-column:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.docs-column__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-gray-light);
}

.docs-column__icon {
    font-size: 1.1rem;
}

.docs-column__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

/* ----- Docs Item ----- */
.docs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-bottom: 1px solid var(--color-gray-light);
}

.docs-item:last-child {
    border-bottom: none;
}

.docs-item:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(4px);
}

.docs-item__thumb {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7C3AED, #A78BFA);
}

.docs-item:nth-child(2) .docs-item__thumb {
    background: linear-gradient(135deg, #0EA5E9, #38BDF8);
}
.docs-item:nth-child(3) .docs-item__thumb {
    background: linear-gradient(135deg, #34D399, #6EE7B7);
}
.docs-item:nth-child(4) .docs-item__thumb {
    background: linear-gradient(135deg, #F59E0B, #FBBF24);
}
.docs-item:nth-child(5) .docs-item__thumb {
    background: linear-gradient(135deg, #EF4444, #F87171);
}

.docs-item__content {
    flex: 1;
    min-width: 0;
}

.docs-item__category {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.docs-item__title {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 2px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.docs-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.docs-item__meta i {
    font-size: 0.5rem;
    margin-right: 2px;
}

.docs-item__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
    flex-shrink: 0;
}

.docs-item__badge--popular {
    color: #F59E0B;
}

.docs-item__badge--updated {
    color: #0EA5E9;
}

.docs-item--featured {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.docs-item--popular {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.docs-item--updated {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

/* ============================================================
   RECENTLY UPDATED TIMELINE
   ============================================================ */
.featured-docs__timeline {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-docs__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.timeline-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.timeline-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.timeline-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

.timeline-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.timeline-item:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(192, 227, 74, 0.1);
    transform: translateX(4px);
}

.timeline-item__date {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    min-width: 80px;
    flex-shrink: 0;
    padding-top: 2px;
}

.timeline-item__content {
    flex: 1;
    min-width: 0;
}

.timeline-item__category {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-item__title {
    font-size: 0.88rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 2px 0 4px;
}

.timeline-item__summary {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0 0 6px;
    line-height: 1.5;
}

.timeline-item__version {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 1px 10px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.1);
    margin-right: 12px;
}

.timeline-item__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
}

.timeline-item__link:hover {
    color: var(--color-purple-dark);
}

.timeline-item__link i {
    font-size: 0.55rem;
    transition: transform 0.3s ease;
}

.timeline-item__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   DOCUMENTATION METRICS
   ============================================================ */
.featured-docs__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

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

.metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.metric-stat:hover {
    transform: translateY(-3px);
}

.metric-stat__number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.metric-stat__number .stat-number {
    display: inline-block;
}

.metric-stat__number .stat-suffix {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.metric-stat__number .stat-label--weekly {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.metric-stat__label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.featured-docs__view-all {
    text-align: center;
}

.btn-view-docs-featured {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-docs-featured:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.btn-featured-guide:focus-visible,
.btn-view-docs-featured:focus-visible,
.filter-pill:focus-visible,
.timeline-item__link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Featured Documentation, Popular Guides & Recently Updated
================================================== */

/* ==================================================
START: API Documentation Center & Interactive Endpoint Explorer
================================================== */

/* ----- Container ----- */
#api-docs {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.api-docs__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.api-docs__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.api-docs__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.api-docs__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.api-docs__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.api-docs__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.api-docs__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.api-docs__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.api-docs__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.api-docs__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.api-docs__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.api-docs__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#api-docs .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#api-docs .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#api-docs .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#api-docs .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#api-docs .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#api-docs .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#api-docs .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.api-docs__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.api-docs__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.api-docs__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.api-docs__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.api-docs__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.api-docs__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED API CARD
   ============================================================ */
.api-docs__featured {
    margin-bottom: 48px;
}

.api-featured {
    display: flex;
    align-items: center;
    gap: 32px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 32px 36px 32px 32px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.api-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.api-featured__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    color: var(--color-white);
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.api-featured__content {
    flex: 1;
    min-width: 0;
}

.api-featured__header {
    display: flex;
    align-items: center;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.api-featured__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
}

.api-featured__badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-status {
    padding: 2px 12px;
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.api-status--stable {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.api-status--beta {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.api-status--deprecated {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

.api-version {
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
}

.api-featured__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 10px;
}

.info-item {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-item code {
    padding: 2px 8px;
    background: var(--color-charcoal);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
}

.info-item i {
    font-size: 0.7rem;
    color: var(--color-purple);
}

.api-featured__description {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 14px 0;
    max-width: 48ch;
}

.btn-api-featured {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-api-featured:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   API WORKSPACE — Three Columns
   ============================================================ */
.api-docs__workspace {
    display: grid;
    grid-template-columns: 260px 1fr 280px;
    gap: 24px;
    margin-bottom: 48px;
    align-items: start;
}

/* ============================================================
   LEFT PANEL — Categories
   ============================================================ */
.api-workspace__sidebar {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 18px 14px 16px;
    box-shadow: var(--shadow-glass);
    position: sticky;
    top: calc(var(--top-bar-height) + var(--nav-height) + 30px);
    max-height: calc(100vh - var(--top-bar-height) - var(--nav-height) - 60px);
    overflow-y: auto;
}

.api-sidebar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    margin-bottom: 14px;
    transition: all 0.3s ease;
}

.api-sidebar__search:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.api-search__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    color: var(--color-charcoal);
}

.api-search__input::placeholder {
    color: var(--color-gray-mid);
}

.api-search__btn {
    background: none;
    border: none;
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px;
}

.api-search__btn:hover {
    color: var(--color-purple);
}

.api-sidebar__categories {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.api-category {
    margin-bottom: 2px;
}

.api-category__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s ease;
    text-align: left;
}

.api-category__toggle:hover {
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-purple);
}

.api-category__icon {
    font-size: 0.8rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.api-category__label {
    flex: 1;
}

.api-category__arrow {
    font-size: 0.55rem;
    transition: transform 0.3s ease;
    color: var(--color-gray-mid);
}

.api-category__toggle[aria-expanded="true"] .api-category__arrow {
    transform: rotate(180deg);
}

.api-endpoints {
    list-style: none;
    padding: 0;
    margin: 0 0 4px 0;
    overflow: hidden;
    padding-left: 28px;
}

.api-endpoints li {
    margin: 2px 0;
}

.api-endpoint-link {
    display: block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
}

.api-endpoint-link:hover {
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-charcoal);
}

.api-endpoint-link.active {
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-weight: var(--font-weight-medium);
}

/* ============================================================
   CENTER PANEL — Endpoints
   ============================================================ */
.api-workspace__endpoints {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 20px 20px 18px;
    box-shadow: var(--shadow-glass);
    min-height: 400px;
}

.endpoint-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-gray-light);
    margin-bottom: 16px;
}

.endpoint-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.endpoint-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
}

.endpoint-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ----- Endpoint Item ----- */
.endpoint-item {
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.2);
}

.endpoint-item:hover {
    border-color: rgba(124, 58, 237, 0.08);
}

.endpoint-item.active {
    border-color: rgba(124, 58, 237, 0.12);
    background: rgba(255, 255, 255, 0.5);
}

.endpoint-item__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.endpoint-item__header:hover {
    background: rgba(124, 58, 237, 0.02);
}

.endpoint-method {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.endpoint-method--get {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.endpoint-method--post {
    background: rgba(14, 165, 233, 0.08);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.1);
}

.endpoint-method--put {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.endpoint-method--patch {
    background: rgba(168, 85, 247, 0.08);
    color: #A855F7;
    border: 1px solid rgba(168, 85, 247, 0.1);
}

.endpoint-method--delete {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

.endpoint-url {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    font-family: 'Courier New', monospace;
    flex: 1;
}

.endpoint-status {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 10px;
    border-radius: 50px;
}

.endpoint-status--active {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.endpoint-status--deprecated {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

.endpoint-toggle {
    background: none;
    border: none;
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px;
}

.endpoint-toggle:hover {
    color: var(--color-purple);
}

.endpoint-item.active .endpoint-toggle i {
    transform: rotate(180deg);
}

/* ----- Endpoint Body ----- */
.endpoint-item__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.3s ease;
    padding: 0 14px;
}

.endpoint-item.active .endpoint-item__body {
    max-height: 1200px;
    padding: 0 14px 16px;
}

.endpoint-description {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 0 0 10px 0;
}

.endpoint-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    margin-bottom: 12px;
}

.endpoint-meta span {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.endpoint-meta span i {
    font-size: 0.6rem;
    color: var(--color-purple);
}

.endpoint-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-section {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
}

.detail-section__title {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.detail-section pre {
    margin: 0;
    padding: 0;
    overflow-x: auto;
}

.detail-section code {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: var(--color-charcoal);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

/* ----- Endpoint Actions ----- */
.endpoint-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-light);
}

.btn-copy,
.btn-try {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--color-gray-light);
    border-radius: 8px;
    background: var(--color-white);
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-copy:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-try {
    background: var(--color-lime);
    color: var(--color-charcoal);
    border-color: var(--color-lime);
}

.btn-try:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

/* ============================================================
   RIGHT PANEL — Endpoint Details (Sticky)
   ============================================================ */
.api-workspace__details {
    position: sticky;
    top: calc(var(--top-bar-height) + var(--nav-height) + 30px);
}

.api-details-panel {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 20px 18px 18px;
    box-shadow: var(--shadow-glass);
}

.api-details-panel__title {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px 0;
}

.api-details-panel__method {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
}

.method-badge {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.method-badge--get {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.method-badge--post {
    background: rgba(14, 165, 233, 0.08);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.1);
}

.method-url {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    font-family: 'Courier New', monospace;
}

.api-details-panel__status {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.status-badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    padding: 2px 10px;
    border-radius: 50px;
}

.status-badge--active {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.status-badge--stable {
    background: rgba(14, 165, 233, 0.08);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.1);
}

.api-details-panel__section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-light);
}

.api-details-panel__section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.section-label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.section-text {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    margin: 0;
}

.param-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.param-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
}

.param-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    font-family: 'Courier New', monospace;
    min-width: 60px;
}

.param-type {
    color: var(--color-gray-mid);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.param-required {
    color: #F87171;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.code-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.code-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    color: var(--color-gray-mid);
}

.code {
    display: inline-block;
    min-width: 36px;
    padding: 1px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.3);
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick-link {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    padding: 3px 10px;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.06);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.quick-link:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.1);
}

/* ============================================================
   SDK DOWNLOADS
   ============================================================ */
.api-docs__sdks {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.api-docs__sdks:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.sdks-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sdks-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.sdks-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.sdks-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

.sdks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 12px;
}

.sdk-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sdk-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.sdk-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.sdk-card__info {
    flex: 1;
    min-width: 0;
}

.sdk-card__name {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.sdk-card__version {
    display: block;
    font-size: 0.5rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.sdk-card__actions {
    display: flex;
    gap: 4px;
}

.sdk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-mid);
    background: var(--color-white);
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.6rem;
}

.sdk-btn:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
}

/* ============================================================
   QUICK ACTIONS
   ============================================================ */
.api-docs__quick-actions {
    max-width: 900px;
    margin: 0 auto 40px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
}

.quick-action-btn:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
    background: rgba(255, 255, 255, 0.6);
}

.quick-action-btn__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.quick-action-btn:hover .quick-action-btn__icon {
    color: var(--color-lime-dark);
    transform: scale(1.1);
}

.quick-action-btn__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-align: center;
    line-height: 1.2;
}

/* ============================================================
   API METRICS
   ============================================================ */
.api-docs__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.api-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.api-metric {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.api-metric:hover {
    transform: translateY(-3px);
}

.api-metric__number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.api-metric__number .stat-number {
    display: inline-block;
}

.api-metric__number .stat-suffix {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.api-metric__number .stat-label--version {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.api-metric__label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.api-docs__view-all {
    text-align: center;
}

.btn-view-api {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-api:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.api-endpoint-link:focus-visible,
.api-category__toggle:focus-visible,
.btn-api-featured:focus-visible,
.btn-view-api:focus-visible,
.sdk-btn:focus-visible,
.quick-action-btn:focus-visible,
.btn-copy:focus-visible,
.btn-try:focus-visible,
.quick-link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

.api-search__input:focus-visible {
    outline: none;
}

/* ==================================================
END: API Documentation Center & Interactive Endpoint Explorer
================================================== */

/* ==================================================
START: Code Examples, Interactive Snippets & Developer Playground
================================================== */

/* ----- Container ----- */
#code-playground {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.code-playground__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.code-playground__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.code-playground__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.code-playground__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.code-playground__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.code-playground__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.code-playground__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.code-playground__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.code-playground__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.code-playground__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.code-playground__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.code-playground__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#code-playground .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#code-playground .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#code-playground .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#code-playground .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#code-playground .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#code-playground .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#code-playground .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.code-playground__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.code-playground__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.code-playground__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.code-playground__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.code-playground__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.code-playground__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED CODE EXAMPLE
   ============================================================ */
.code-playground__featured {
    margin-bottom: 40px;
}

.featured-example {
    display: flex;
    align-items: center;
    gap: 28px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 28px 32px 28px 28px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-example:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.featured-example__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-purple));
    color: var(--color-white);
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.featured-example__content {
    flex: 1;
    min-width: 0;
}

.featured-example__header {
    display: flex;
    align-items: center;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.featured-example__title {
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
}

.featured-example__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tech-badge {
    padding: 2px 12px;
    border-radius: 50px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tech-badge--laravel {
    background: rgba(255, 45, 45, 0.08);
    color: #FF2D20;
    border: 1px solid rgba(255, 45, 45, 0.1);
}

.tech-badge--php {
    background: rgba(119, 123, 179, 0.08);
    color: #777BB4;
    border: 1px solid rgba(119, 123, 179, 0.1);
}

.difficulty-badge {
    padding: 2px 12px;
    border-radius: 50px;
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.difficulty-badge--beginner {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.difficulty-badge--intermediate {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.difficulty-badge--advanced {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

.featured-example__description {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.featured-example__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-bottom: 12px;
}

.featured-example__meta span {
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.featured-example__meta i {
    font-size: 0.7rem;
    color: var(--color-purple);
}

.btn-featured-example {
    padding: 8px 24px;
    font-size: 0.8rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-featured-example:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ============================================================
   LANGUAGE SELECTOR TABS
   ============================================================ */
.code-playground__tabs {
    margin-bottom: 20px;
    padding: 4px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.code-playground__tabs::-webkit-scrollbar {
    display: none;
}

.tabs-scroll {
    display: flex;
    gap: 6px;
    min-width: max-content;
    padding: 2px 4px;
}

.lang-tab {
    padding: 6px 18px;
    background: var(--color-off-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
}

.lang-tab:hover {
    border-color: rgba(124, 58, 237, 0.15);
    color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.lang-tab.active {
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    border-color: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25);
}

.lang-tab:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 2px;
}

/* ============================================================
   CODE WORKSPACE
   ============================================================ */
.code-playground__workspace {
    margin-bottom: 48px;
}

.code-workspace {
    background: var(--color-charcoal);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.code-workspace:hover {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}

/* Workspace Header */
.code-workspace__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.workspace-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.workspace-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.workspace-dots .dot:nth-child(1) {
    background: #F87171;
}
.workspace-dots .dot:nth-child(2) {
    background: #FBBF24;
}
.workspace-dots .dot:nth-child(3) {
    background: #34D399;
}

.workspace-file {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
    flex: 1;
    min-width: 0;
}

.workspace-lang {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    flex-shrink: 0;
}

.workspace-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-left: auto;
}

.workspace-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-primary);
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.workspace-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.workspace-btn--copy:hover {
    background: rgba(192, 227, 74, 0.1);
    color: var(--color-lime);
    border-color: rgba(192, 227, 74, 0.15);
}

.workspace-btn--run {
    background: rgba(192, 227, 74, 0.08);
    color: var(--color-lime);
    border-color: rgba(192, 227, 74, 0.1);
}

.workspace-btn--run:hover {
    background: rgba(192, 227, 74, 0.15);
    color: var(--color-lime);
    transform: scale(1.02);
}

/* Workspace Body */
.code-workspace__body {
    padding: 0;
    max-height: 520px;
    overflow-y: auto;
}

.code-workspace__body::-webkit-scrollbar {
    width: 6px;
}

.code-workspace__body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.code-workspace__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.code-workspace__body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.12);
}

.code-container {
    padding: 16px 20px;
}

.code-block {
    display: none;
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-wrap;
    word-break: break-word;
}

.code-block.active {
    display: block;
}

.code-block code {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

/* Syntax highlighting */
.hl-comment {
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

.hl-keyword {
    color: #A78BFA;
}

.hl-class {
    color: #34D399;
}

.hl-var {
    color: #FBBF24;
}

.hl-string {
    color: #F472B6;
}

.hl-method {
    color: #60A5FA;
}

.hl-number {
    color: #F472B6;
}

.hl-key {
    color: #FBBF24;
}

.hl-type {
    color: #34D399;
}

/* Workspace Footer */
.code-workspace__footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.workspace-status {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: #34D399;
    display: flex;
    align-items: center;
    gap: 4px;
}

.workspace-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    animation: pulseDot 2s ease-in-out infinite;
}

.workspace-lines,
.workspace-characters {
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.2);
    font-family: 'Courier New', monospace;
}

/* ============================================================
   SDK EXAMPLES GRID
   ============================================================ */
.code-playground__sdks {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.code-playground__sdks:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.sdks-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sdks-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.sdks-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.sdks-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

.sdk-examples-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}

.sdk-example {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sdk-example:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.sdk-example__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.sdk-example__info {
    flex: 1;
    min-width: 0;
}

.sdk-example__name {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.sdk-example__desc {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.sdk-example__complexity {
    font-size: 0.45rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 8px;
    border-radius: 50px;
    display: inline-block;
    margin-top: 2px;
}

.complexity--beginner {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.complexity--intermediate {
    background: rgba(251, 191, 36, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.complexity--advanced {
    background: rgba(244, 67, 54, 0.08);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.1);
}

.sdk-example__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.sdk-example__link i {
    font-size: 0.55rem;
    transition: transform 0.3s ease;
}

.sdk-example__link:hover {
    color: var(--color-purple-dark);
}

.sdk-example__link:hover i {
    transform: translateX(4px);
}

/* ============================================================
   DEVELOPER RESOURCES
   ============================================================ */
.code-playground__resources {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 20px 24px 16px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.code-playground__resources:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.resources-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.resources-header__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
}

.resources-header__title {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.resource-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-charcoal);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.resource-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.resource-card__icon {
    color: var(--color-lime);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.resource-card__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

/* ============================================================
   CODE METRICS
   ============================================================ */
.code-playground__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.code-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.code-metric {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.code-metric:hover {
    transform: translateY(-3px);
}

.code-metric__number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.code-metric__number .stat-number {
    display: inline-block;
}

.code-metric__number .stat-suffix {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.code-metric__number .stat-label--weekly {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.code-metric__label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   QUICK ACTIONS
   ============================================================ */
.code-playground__quick-actions {
    max-width: 900px;
    margin: 0 auto 40px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
}

.quick-action-btn:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
    background: rgba(255, 255, 255, 0.6);
}

.quick-action-btn__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.quick-action-btn:hover .quick-action-btn__icon {
    color: var(--color-lime-dark);
    transform: scale(1.1);
}

.quick-action-btn__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-align: center;
    line-height: 1.2;
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.code-playground__view-all {
    text-align: center;
}

.btn-view-examples {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-examples:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.lang-tab:focus-visible,
.workspace-btn:focus-visible,
.btn-featured-example:focus-visible,
.btn-view-examples:focus-visible,
.sdk-example__link:focus-visible,
.resource-card:focus-visible,
.quick-action-btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Code Examples, Interactive Snippets & Developer Playground
================================================== */

/* ==================================================
START: Downloads Center, SDK Library & Developer Resources
================================================== */

/* ----- Container ----- */
#downloads-center {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.downloads-center__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.downloads-center__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.downloads-center__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.downloads-center__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.downloads-center__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.downloads-center__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.downloads-center__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.downloads-center__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.downloads-center__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.downloads-center__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.downloads-center__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.downloads-center__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#downloads-center .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#downloads-center .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#downloads-center .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#downloads-center .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#downloads-center .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#downloads-center .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#downloads-center .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.downloads-center__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.downloads-center__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.downloads-center__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.downloads-center__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.downloads-center__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.downloads-center__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED RESOURCE
   ============================================================ */
.downloads-center__featured {
    margin-bottom: 48px;
}

.featured-resource {
    display: grid;
    grid-template-columns: 35fr 65fr;
    gap: 32px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-resource:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

/* ----- Featured Image ----- */
.featured-resource__image {
    position: relative;
    overflow: hidden;
    min-height: 260px;
}

.featured-resource__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
    position: relative;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-resource:hover .featured-resource__placeholder {
    transform: scale(1.04);
}

.featured-resource__placeholder .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    position: relative;
}

.featured-resource__placeholder .placeholder-content i {
    font-size: 3.2rem;
    opacity: 0.8;
}

.featured-resource__placeholder .placeholder-content span {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.5;
}

.featured-resource__placeholder .placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.featured-resource__placeholder .placeholder-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.featured-resource__placeholder .placeholder-shapes .shape--1 {
    width: 140px;
    height: 140px;
    top: -40px;
    right: -40px;
}

.featured-resource__placeholder .placeholder-shapes .shape--2 {
    width: 90px;
    height: 90px;
    bottom: 20px;
    left: 20px;
}

.featured-resource__placeholder .placeholder-shapes .shape--3 {
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.featured-resource__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 14px;
    background: rgba(192, 227, 74, 0.9);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

/* ----- Featured Content ----- */
.featured-resource__content {
    padding: 32px 36px 32px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.featured-resource__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
}

.featured-resource__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.meta-item {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-item i {
    font-size: 0.65rem;
    color: var(--color-purple);
}

.featured-resource__description {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

.featured-resource__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-download-featured {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.btn-download-featured:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-docs-featured {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.btn-docs-featured:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   SDK LIBRARY
   ============================================================ */
.downloads-center__sdks {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.downloads-center__sdks:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.sdks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
}

.sdk-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sdk-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.sdk-card__icon {
    font-size: 1.5rem;
    color: var(--color-purple);
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.sdk-card__info {
    flex: 1;
    min-width: 0;
}

.sdk-card__name {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.sdk-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-top: 2px;
}

.sdk-card__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sdk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-mid);
    background: var(--color-white);
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.6rem;
}

.sdk-btn:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.sdk-btn--download:hover {
    border-color: var(--color-lime);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.04);
}

/* ============================================================
   DOWNLOADS LIBRARY
   ============================================================ */
.downloads-center__library {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.downloads-center__library:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}

.library-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.library-item:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.library-item__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.library-item__info {
    flex: 1;
    min-width: 0;
}

.library-item__name {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.library-item__meta {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.library-item__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-mid);
    background: var(--color-white);
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.library-item__btn:hover {
    border-color: var(--color-lime);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.04);
}

/* ============================================================
   DEVELOPER TOOLKIT
   ============================================================ */
.downloads-center__toolkit {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.downloads-center__toolkit:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.toolkit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.toolkit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    color: var(--color-charcoal);
}

.toolkit-item:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.toolkit-item__icon {
    font-size: 0.95rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.toolkit-item__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

/* ============================================================
   RESOURCE STATISTICS
   ============================================================ */
.downloads-center__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

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

.metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.metric-stat:hover {
    transform: translateY(-3px);
}

.metric-stat__number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.metric-stat__number .stat-number {
    display: inline-block;
}

.metric-stat__number .stat-suffix {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.metric-stat__number .stat-label--weekly {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.metric-stat__label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   QUICK ACTIONS
   ============================================================ */
.downloads-center__quick-actions {
    max-width: 900px;
    margin: 0 auto 40px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
}

.quick-action-btn:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
    background: rgba(255, 255, 255, 0.6);
}

.quick-action-btn__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.quick-action-btn:hover .quick-action-btn__icon {
    color: var(--color-lime-dark);
    transform: scale(1.1);
}

.quick-action-btn__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-align: center;
    line-height: 1.2;
}

/* ============================================================
   VIEW ALL BUTTON
   ============================================================ */
.downloads-center__view-all {
    text-align: center;
}

.btn-view-resources {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-view-resources:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.btn-download-featured:focus-visible,
.btn-docs-featured:focus-visible,
.sdk-btn:focus-visible,
.library-item__btn:focus-visible,
.toolkit-item:focus-visible,
.quick-action-btn:focus-visible,
.btn-view-resources:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Downloads Center, SDK Library & Developer Resources
================================================== */

/* ==================================================
START: Developer FAQ, Troubleshooting & Support Hub
================================================== */

/* ----- Container ----- */
#support-hub {
    padding: 80px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.support-hub__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.support-hub__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.support-hub__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.support-hub__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.support-hub__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.support-hub__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.support-hub__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.support-hub__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.support-hub__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.support-hub__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.support-hub__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.support-hub__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#support-hub .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#support-hub .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#support-hub .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#support-hub .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#support-hub .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#support-hub .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#support-hub .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.support-hub__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.support-hub__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.support-hub__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.support-hub__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.support-hub__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.support-hub__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   SUPPORT SEARCH
   ============================================================ */
.support-hub__search {
    max-width: 780px;
    margin: 0 auto 48px;
}

.support-search {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 20px 24px 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-search:hover {
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
}

.support-search__wrapper {
    display: flex;
    align-items: center;
    background: var(--color-white);
    border-radius: 16px;
    border: 1px solid var(--color-gray-light);
    transition: all 0.3s ease;
}

.support-search__wrapper:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}

.support-search__icon {
    padding: 0 16px;
    color: var(--color-gray-mid);
    font-size: 0.95rem;
}

.support-search__input {
    flex: 1;
    padding: 14px 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
}

.support-search__input::placeholder {
    color: var(--color-gray-light);
}

.support-search__btn {
    padding: 10px 24px;
    margin: 4px;
    border: none;
    border-radius: 12px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    font-weight: var(--font-weight-semibold);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.support-search__btn:hover {
    background: var(--color-lime-dark);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
    transform: translateY(-2px);
}

.support-search__recent {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.support-search__recent-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.support-search__recent-tag {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.08);
    transition: all 0.3s ease;
    cursor: default;
}

.support-search__recent-tag:hover {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.15);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.support-hub__faq {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-hub__faq:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faq-item {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(124, 58, 237, 0.06);
}

.faq-item__trigger {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: left;
    transition: all 0.3s ease;
}

.faq-item__trigger:hover {
    background: rgba(124, 58, 237, 0.02);
}

.faq-item__category {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.08);
    padding: 2px 12px;
    border-radius: 50px;
    white-space: nowrap;
}

.faq-item__question {
    font-weight: var(--font-weight-medium);
    font-size: 0.85rem;
}

.faq-item__icon {
    font-size: 0.8rem;
    color: var(--color-gray-mid);
    transition: transform 0.3s ease;
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
    transform: rotate(180deg);
}

.faq-item__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 0.4s ease, padding 0.4s ease;
    color: var(--color-gray-mid);
    font-size: 0.88rem;
    line-height: 1.6;
}

.faq-item__trigger[aria-expanded="true"] + .faq-item__content {
    max-height: 400px;
    padding: 0 20px 18px;
}

.faq-item__content p {
    margin: 0 0 12px;
}

.faq-item__content a {
    color: var(--color-purple);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.faq-item__content a:hover {
    text-decoration: underline;
}

.faq-item__content code {
    background: rgba(124, 58, 237, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--color-purple);
}

.faq-item__actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.faq-item__vote,
.faq-item__copy {
    background: transparent;
    border: none;
    font-size: 0.7rem;
    color: var(--color-gray-mid);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.faq-item__vote:hover,
.faq-item__copy:hover {
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-purple);
}

/* ============================================================
   TROUBLESHOOTING CENTER
   ============================================================ */
.support-hub__troubleshooting {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-hub__troubleshooting:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.troubleshooting-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.trouble-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.trouble-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.trouble-card__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.trouble-card__info {
    flex: 1;
    min-width: 0;
}

.trouble-card__name {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.trouble-card__desc {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.trouble-card__severity {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 10px;
    border-radius: 50px;
    flex-shrink: 0;
}

.trouble-card__severity--high {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

.trouble-card__severity--medium {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
}

.trouble-card__severity--low {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
}

.trouble-card__btn {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 4px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.trouble-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   DIAGNOSTICS PANEL
   ============================================================ */
.support-hub__diagnostics {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-hub__diagnostics:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.diagnostics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.diagnostic-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.diagnostic-card:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.diagnostic-card__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.diagnostic-card--success .diagnostic-card__icon {
    color: #059669;
}

.diagnostic-card--warning .diagnostic-card__icon {
    color: #d97706;
}

.diagnostic-card--info .diagnostic-card__icon {
    color: #2563eb;
}

.diagnostic-card__info {
    flex: 1;
    min-width: 0;
}

.diagnostic-card__name {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.diagnostic-card__status {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.diagnostic-card__indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.diagnostic-card--success .diagnostic-card__indicator {
    background: #059669;
    box-shadow: 0 0 8px rgba(5, 150, 105, 0.3);
}

.diagnostic-card--warning .diagnostic-card__indicator {
    background: #d97706;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.3);
}

.diagnostic-card--info .diagnostic-card__indicator {
    background: #2563eb;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}

/* ============================================================
   SUPPORT OPTIONS
   ============================================================ */
.support-hub__options {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-hub__options:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.support-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.support-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-option:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.support-option__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.support-option__info {
    flex: 1;
    min-width: 0;
}

.support-option__name {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.support-option__desc {
    display: block;
    font-size: 0.62rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.support-option__btn {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 3px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.support-option__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   COMMUNITY RESOURCES
   ============================================================ */
.support-hub__community {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-hub__community:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.community-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    color: var(--color-charcoal);
}

.community-item:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.community-item__icon {
    font-size: 0.95rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.community-item__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

/* ============================================================
   SUPPORT METRICS
   ============================================================ */
.support-hub__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.support-hub__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.support-hub__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.support-hub__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.support-hub__metrics .metric-stat__number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.support-hub__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.support-hub__metrics .metric-stat__number .stat-suffix {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.support-hub__metrics .metric-stat__label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   CTA BUTTON
   ============================================================ */
.support-hub__cta {
    text-align: center;
}

.btn-visit-help-center {
    padding: 14px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
}

.btn-visit-help-center:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(192, 227, 74, 0.45);
}

/* ----- Focus States ----- */
.support-search__input:focus-visible,
.faq-item__trigger:focus-visible,
.trouble-card__btn:focus-visible,
.support-option__btn:focus-visible,
.community-item:focus-visible,
.btn-visit-help-center:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Developer FAQ, Troubleshooting & Support Hub
================================================== */

/* ==================================================
START: Documentation CTA & Developer Community
================================================== */

/* ----- Container ----- */
#dev-community {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.dev-community__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.dev-community__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.dev-community__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.dev-community__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.dev-community__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.dev-community__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.dev-community__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.dev-community__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.dev-community__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.dev-community__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.dev-community__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.dev-community__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#dev-community .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#dev-community .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#dev-community .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#dev-community .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#dev-community .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#dev-community .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#dev-community .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.dev-community__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.dev-community__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.dev-community__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.dev-community__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.dev-community__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.dev-community__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED COMMUNITY BANNER
   ============================================================ */
.dev-community__banner {
    margin-bottom: 48px;
}

.community-banner {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.community-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.community-banner__content {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.community-banner__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.08);
    padding: 4px 16px;
    border-radius: 50px;
    width: fit-content;
}

.community-banner__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.community-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

.community-banner__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 4px 0;
}

.highlight-item {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    display: flex;
    align-items: center;
    gap: 6px;
}

.highlight-item i {
    color: var(--color-lime);
    font-size: 0.9rem;
}

.community-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-join-community {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-join-community:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-contact-experts {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-contact-experts:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.community-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

.banner-illustration {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.banner-illustration__shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.banner-illustration__shape--1 {
    width: 160px;
    height: 160px;
    top: -40px;
    right: -40px;
}

.banner-illustration__shape--2 {
    width: 100px;
    height: 100px;
    bottom: -20px;
    left: -20px;
}

.banner-illustration__shape--3 {
    width: 80px;
    height: 80px;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
}

.banner-illustration__shape--4 {
    width: 60px;
    height: 60px;
    bottom: 20%;
    right: 15%;
}

.banner-illustration__code {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Courier New', monospace;
    max-width: 220px;
}

.banner-illustration__code .code-line {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    white-space: nowrap;
}

.banner-illustration__code .code-line:first-child {
    color: var(--color-lime);
    opacity: 0.8;
}

.banner-illustration__code .code-line:nth-child(2) {
    color: rgba(255, 255, 255, 0.5);
    padding-left: 4px;
}

.banner-illustration__code .code-line:nth-child(3) {
    color: rgba(255, 255, 255, 0.6);
    padding-left: 4px;
}

.banner-illustration__code .code-line:nth-child(4) {
    color: var(--color-lime);
    padding-left: 4px;
}

.banner-illustration__code .code-line:last-child {
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   COMMUNITY BENEFITS GRID
   ============================================================ */
.dev-community__benefits {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dev-community__benefits:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 16px;
}

.benefit-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.benefit-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.benefit-card__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.benefit-card__info {
    flex: 1;
    min-width: 0;
}

.benefit-card__name {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.benefit-card__desc {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.benefit-card__btn {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.benefit-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   DEVELOPER RESOURCES
   ============================================================ */
.dev-community__resources {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dev-community__resources:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 16px;
}

.resource-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.resource-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.resource-card__icon {
    font-size: 1.1rem;
    color: var(--color-lime);
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.resource-card__info {
    flex: 1;
    min-width: 0;
}

.resource-card__name {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.resource-card__desc {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.resource-card__btn {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.resource-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   NEWSLETTER SUBSCRIPTION
   ============================================================ */
.dev-community__newsletter {
    max-width: 900px;
    margin: 0 auto 40px;
}

.newsletter-card {
    display: grid;
    grid-template-columns: 65fr 35fr;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.newsletter-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
}

.newsletter-card__content {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.newsletter-card__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.newsletter-card__title {
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
}

.newsletter-card__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

.newsletter-form {
    margin-top: 4px;
}

.newsletter-form__wrapper {
    display: flex;
    align-items: center;
    background: var(--color-white);
    border-radius: 14px;
    border: 1px solid var(--color-gray-light);
    transition: all 0.3s ease;
}

.newsletter-form__wrapper:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}

.newsletter-form__icon {
    padding: 0 14px;
    color: var(--color-gray-mid);
    font-size: 0.85rem;
}

.newsletter-form__input {
    flex: 1;
    padding: 12px 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
}

.newsletter-form__input::placeholder {
    color: var(--color-gray-light);
}

.newsletter-form__btn {
    padding: 8px 20px;
    margin: 4px;
    border: none;
    border-radius: 10px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.newsletter-form__btn:hover {
    background: var(--color-lime-dark);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
    transform: translateY(-2px);
}

.newsletter-form__privacy {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.newsletter-form__privacy i {
    font-size: 0.55rem;
}

/* ----- Newsletter Visual ----- */
.newsletter-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #6366F1);
    position: relative;
    overflow: hidden;
}

.newsletter-illustration {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
}

.newsletter-illustration .illustration-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.newsletter-illustration .illustration-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
    color: var(--color-lime);
}

.newsletter-illustration .illustration-icon:nth-child(2) {
    font-size: 1.6rem;
    color: var(--color-lime);
}

/* ============================================================
   QUICK ACTIONS
   ============================================================ */
.dev-community__quick-actions {
    max-width: 900px;
    margin: 0 auto 40px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-glass);
}

.quick-action-btn:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.08);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
    background: rgba(255, 255, 255, 0.6);
}

.quick-action-btn__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.quick-action-btn:hover .quick-action-btn__icon {
    color: var(--color-lime-dark);
    transform: scale(1.1);
}

.quick-action-btn__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-align: center;
    line-height: 1.2;
}

/* ============================================================
   COMMUNITY STATISTICS
   ============================================================ */
.dev-community__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.dev-community__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.dev-community__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.dev-community__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.dev-community__metrics .metric-stat__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.dev-community__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.dev-community__metrics .metric-stat__number .stat-suffix {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.dev-community__metrics .metric-stat__number .stat-label--growing {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.dev-community__metrics .metric-stat__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.dev-community__final-cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.final-cta {
    position: relative;
    padding: 48px 52px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    border: 1px solid var(--color-gray-light);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
}

.final-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
}

.final-cta__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.final-cta__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.final-cta__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.final-cta__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-start-project {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-start-project:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-talk-expert {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-talk-expert:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Final CTA Visual ----- */
.final-cta__visual {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.final-cta__shape {
    position: absolute;
    border-radius: 50%;
}

.final-cta__shape--1 {
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(124, 58, 237, 0.06);
    animation: pulseGlow 3s ease-in-out infinite;
}

.final-cta__shape--2 {
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
    background: rgba(192, 227, 74, 0.08);
    animation: pulseGlow 4s ease-in-out infinite 0.5s;
}

.final-cta__shape--3 {
    width: 35px;
    height: 35px;
    bottom: 0;
    left: 0;
    background: rgba(124, 58, 237, 0.06);
    animation: pulseGlow 3.5s ease-in-out infinite 1s;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* ----- Focus States ----- */
.btn-join-community:focus-visible,
.btn-contact-experts:focus-visible,
.benefit-card__btn:focus-visible,
.resource-card__btn:focus-visible,
.newsletter-form__input:focus-visible,
.newsletter-form__btn:focus-visible,
.quick-action-btn:focus-visible,
.btn-start-project:focus-visible,
.btn-talk-expert:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Documentation CTA & Developer Community
================================================== */

/* ==================================================
START: Contact Hero Banner
================================================== */

/* ----- Container ----- */
#contact-hero {
    padding: 60px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ----- Background Decorations ----- */
.contact-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.contact-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.contact-hero__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.contact-hero__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.contact-hero__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.contact-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.contact-hero__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.contact-hero__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.contact-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.contact-hero__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.contact-hero__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.contact-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#contact-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#contact-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#contact-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#contact-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#contact-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#contact-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#contact-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.contact-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ----- Hero Content ----- */
.contact-hero__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contact-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
    width: fit-content;
}

.contact-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.contact-hero__title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.contact-hero__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.contact-hero__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.contact-hero__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 520px;
    margin: 0;
}

.contact-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-start-project {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-start-project:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-book-consultation {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-book-consultation:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Quick Contact Cards ----- */
.contact-hero__quick-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.quick-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.quick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
    background: rgba(255, 255, 255, 0.7);
}

.quick-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    flex-shrink: 0;
    margin-top: 2px;
}

.quick-card__info {
    flex: 1;
    min-width: 0;
}

.quick-card__label {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.quick-card__value {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.3;
}

.quick-card__note {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-top: 2px;
}

/* ----- Trust Indicators ----- */
.contact-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 4px;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 14px 4px 10px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
}

.trust-badge i {
    color: var(--color-lime);
    font-size: 0.8rem;
}

.trust-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

/* ============================================================
   HERO VISUAL
   ============================================================ */
.contact-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.hero-illustration {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 500px;
    margin: 0 auto;
}

/* Chat Bubbles */
.chat-bubble {
    position: absolute;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    animation: floatBubble 6s ease-in-out infinite;
    max-width: 160px;
}

.chat-bubble .bubble-text {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
}

.chat-bubble .bubble-time {
    display: block;
    font-size: 0.55rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-top: 2px;
}

.chat-bubble--1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.chat-bubble--2 {
    top: 30%;
    right: 5%;
    animation-delay: 1.5s;
}

.chat-bubble--3 {
    bottom: 25%;
    left: 15%;
    animation-delay: 3s;
}

/* Message Card */
.message-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
    padding: 16px 18px;
    animation: floatCard 5s ease-in-out infinite;
}

.message-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.message-card__avatar {
    font-size: 1.6rem;
    color: var(--color-purple);
}

.message-card__name {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.message-card__status {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: #059669;
    background: rgba(5, 150, 105, 0.08);
    padding: 1px 10px;
    border-radius: 50px;
    margin-left: auto;
}

.message-card__body p {
    font-size: 0.8rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0 0 6px;
}

.message-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-gray-light);
    padding-top: 8px;
}

.message-card__reply {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.message-card__time {
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

/* Dashboard Mockup */
.dashboard-mockup {
    position: absolute;
    bottom: 5%;
    right: 0;
    width: 200px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    padding: 12px 14px;
    animation: floatCard 6s ease-in-out infinite 1s;
}

.dashboard-mockup__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.dashboard-mockup__header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot--red { background: #ef4444; }
.dot--yellow { background: #f59e0b; }
.dot--green { background: #059669; }

.dashboard-mockup__title {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    margin-left: 4px;
}

.dashboard-mockup__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
}

.metric__label {
    color: var(--color-gray-mid);
}

.metric__value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--color-gray-light);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--color-lime);
    border-radius: 4px;
}

.dashboard-mockup__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    color: var(--color-gray-mid);
    margin-top: 2px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #059669;
    animation: pulseDot 2s ease-in-out infinite;
}

/* Connection Lines */
.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Glowing Orbs */
.orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    animation: pulseGlow 4s ease-in-out infinite;
}

.orb--1 {
    width: 60px;
    height: 60px;
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.orb--2 {
    width: 40px;
    height: 40px;
    bottom: 30%;
    left: 10%;
    background: rgba(192, 227, 74, 0.04);
    border-color: rgba(192, 227, 74, 0.04);
    animation-delay: 1.5s;
}

.orb--3 {
    width: 30px;
    height: 30px;
    top: 60%;
    right: 40%;
    background: rgba(192, 227, 74, 0.03);
    border-color: rgba(192, 227, 74, 0.03);
    animation-delay: 3s;
}

/* ----- Animations ----- */
@keyframes floatBubble {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

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

@keyframes pulseDot {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ==================================================
END: Contact Hero Banner
================================================== */

/* ==================================================
START: Multiple Contact Options & Communication Channels
================================================== */

/* ----- Container ----- */
#contact-channels {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.contact-channels__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.contact-channels__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.contact-channels__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.contact-channels__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.contact-channels__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.contact-channels__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.contact-channels__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.contact-channels__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.contact-channels__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.contact-channels__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.contact-channels__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.contact-channels__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#contact-channels .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#contact-channels .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#contact-channels .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#contact-channels .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#contact-channels .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#contact-channels .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#contact-channels .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.contact-channels__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.contact-channels__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.contact-channels__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.contact-channels__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.contact-channels__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.contact-channels__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED CONTACT CARD
   ============================================================ */
.contact-channels__featured {
    margin-bottom: 48px;
}

.featured-contact {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-contact:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.featured-contact__content {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.featured-contact__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.featured-contact__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.featured-contact__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

.featured-contact__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-indicator--available {
    background: #059669;
    box-shadow: 0 0 12px rgba(5, 150, 105, 0.3);
    animation: pulseDot 2s ease-in-out infinite;
}

.status-text {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: #059669;
}

.featured-contact__details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    padding: 12px 0 4px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-item__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-mid);
}

.detail-item__value {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.detail-item__value i {
    color: #25D366;
    margin-right: 4px;
}

.featured-contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-whatsapp {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: #25D366;
    color: var(--color-white);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-whatsapp:hover {
    background: #1ebe5c;
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
}

.btn-email-featured {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-email-featured:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Featured Visual ----- */
.featured-contact__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    min-height: 240px;
}

.featured-illustration {
    position: relative;
    width: 160px;
    height: 160px;
}

.fi-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.fi-icon--1 { top: 0; left: 50%; transform: translateX(-50%); }
.fi-icon--2 { top: 35%; right: 0; }
.fi-icon--3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.fi-icon--4 { top: 35%; left: 0; }

.fi-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-lime);
    transform: translateX(-50%) scale(1.1);
}

.fi-icon--2:hover {
    transform: scale(1.1);
}
.fi-icon--4:hover {
    transform: scale(1.1);
}

.fi-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.04);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fi-ring--1 {
    width: 120px;
    height: 120px;
    animation: pulseRing 4s ease-in-out infinite;
}

.fi-ring--2 {
    width: 160px;
    height: 160px;
    animation: pulseRing 4s ease-in-out infinite 1s;
}

.fi-ring--3 {
    width: 200px;
    height: 200px;
    animation: pulseRing 4s ease-in-out infinite 2s;
}

@keyframes pulseRing {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* ============================================================
   COMMUNICATION CHANNELS
   ============================================================ */
.contact-channels__grid {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-channels__grid:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.channel-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    align-items: center;
}

.channel-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.channel-card--highlight {
    border-color: rgba(124, 58, 237, 0.12);
    background: rgba(124, 58, 237, 0.02);
}

.channel-card--highlight:hover {
    border-color: rgba(124, 58, 237, 0.2);
    background: rgba(124, 58, 237, 0.04);
}

.channel-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    flex-shrink: 0;
    grid-row: 1 / 4;
    align-self: center;
}

.channel-card__info {
    flex: 1;
    min-width: 0;
    grid-column: 2;
}

.channel-card__name {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.channel-card__value {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.channel-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.channel-card__tags .tag {
    font-size: 0.55rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    background: rgba(0, 0, 0, 0.03);
    padding: 1px 8px;
    border-radius: 50px;
}

.channel-card__socials {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 0.65rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateY(-2px);
}

.channel-card__availability {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 10px;
    border-radius: 50px;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    white-space: nowrap;
}

.channel-card__availability--available {
    background: rgba(5, 150, 105, 0.08);
    color: #059669;
}

.channel-card__availability--high {
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
}

.channel-card__availability--info {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

.channel-card__btn {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 3px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    grid-column: 3;
    grid-row: 2;
    text-align: center;
    align-self: center;
}

.channel-card__btn--primary {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.channel-card__btn--primary:hover {
    background: var(--color-lime-dark);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.channel-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   INQUIRY CATEGORIES
   ============================================================ */
.contact-channels__inquiries {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-channels__inquiries:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.inquiries-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 14px;
}

.inquiry-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 12px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.inquiry-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.inquiry-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
}

.inquiry-card__name {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.inquiry-card__desc {
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.inquiry-card__btn {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 4px;
}

.inquiry-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   BUSINESS INFORMATION PANEL
   ============================================================ */
.contact-channels__info-panel {
    max-width: 900px;
    margin: 0 auto 40px;
}

.info-panel {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    padding: 32px 36px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.info-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
}

.info-panel__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.info-panel__title {
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 8px 0 4px;
    letter-spacing: -0.02em;
}

.info-panel__desc {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 16px;
}

.info-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

.info-item__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-item__label {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.info-item__value {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
}

/* ============================================================
   CONTACT METRICS
   ============================================================ */
.contact-channels__metrics {
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.contact-channels__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.contact-channels__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.contact-channels__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.contact-channels__metrics .metric-stat__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.contact-channels__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.contact-channels__metrics .metric-stat__number .stat-suffix {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.contact-channels__metrics .metric-stat__number .stat-label--hours {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.contact-channels__metrics .metric-stat__number .stat-label--global {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.contact-channels__metrics .metric-stat__number .stat-label--stars {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: #f59e0b;
}

.contact-channels__metrics .metric-stat__number .stat-label--stars .stat-suffix {
    color: #f59e0b;
    font-size: 1.3rem;
}

.contact-channels__metrics .metric-stat__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ----- Focus States ----- */
.btn-whatsapp:focus-visible,
.btn-email-featured:focus-visible,
.channel-card__btn:focus-visible,
.inquiry-card__btn:focus-visible,
.social-link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Multiple Contact Options & Communication Channels
================================================== */

/* ==================================================
START: Smart Contact Form & Project Inquiry
================================================== */

/* ----- Container ----- */
#contact-form {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.contact-form__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.contact-form__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.contact-form__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.contact-form__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.contact-form__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.contact-form__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.contact-form__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.contact-form__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.contact-form__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.contact-form__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.contact-form__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.contact-form__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#contact-form .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#contact-form .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#contact-form .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#contact-form .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#contact-form .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#contact-form .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#contact-form .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.contact-form__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.contact-form__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 48px;
}

.contact-form__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.contact-form__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.contact-form__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.contact-form__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.contact-form__layout {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 40px;
    align-items: start;
}

/* ============================================================
   FORM CONTAINER
   ============================================================ */
.contact-form__form-wrapper {
    position: relative;
}

.form-container {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 32px 32px 28px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.form-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
}

/* ----- Progress ----- */
.form-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-gray-light);
}

.form-progress__bar {
    flex: 1;
    height: 4px;
    background: var(--color-gray-light);
    border-radius: 4px;
    overflow: hidden;
}

.form-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.form-progress__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    min-width: 72px;
    text-align: right;
}

/* ----- Form Sections ----- */
.form-section {
    display: none;
    animation: fadeUp 0.5s ease;
}

.form-section--active {
    display: block;
}

.form-section__title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-lime);
    display: inline-block;
}

/* ----- Form Rows & Groups ----- */
.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.form-group {
    position: relative;
    margin-bottom: 4px;
}

.form-group--full {
    flex: 1 1 100%;
    min-width: 0;
}

.form-group--half {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
}

.form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    margin-bottom: 6px;
}

.form-label .required {
    color: #dc2626;
    margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 12px;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
    outline: none;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: rgba(124, 58, 237, 0.2);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-char-counter {
    text-align: right;
    font-size: 0.65rem;
    color: var(--color-gray-mid);
    margin-top: 4px;
}

.form-char-counter .char-count {
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.form-error {
    display: none;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: #dc2626;
    margin-top: 4px;
}

.form-error.visible {
    display: block;
}

/* ----- Radio & Checkbox Groups ----- */
.form-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 4px 0;
}

.form-radio-group--inline {
    gap: 4px 12px;
}

.radio-option,
.checkbox-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    transition: all 0.2s ease;
}

.radio-option:hover,
.checkbox-option:hover {
    color: var(--color-purple);
}

.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-purple);
    cursor: pointer;
    flex-shrink: 0;
}

.radio-option input[type="radio"]:disabled,
.checkbox-option input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.radio-option .radio-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.radio-option .radio-label i {
    font-size: 0.85rem;
}

.checkbox-option--consent {
    font-size: 0.8rem;
    color: var(--color-gray-mid);
    line-height: 1.5;
}

.checkbox-option--consent .checkbox-label a {
    color: var(--color-purple);
    text-decoration: none;
}

.checkbox-option--consent .checkbox-label a:hover {
    text-decoration: underline;
}

/* ----- File Upload ----- */
.file-upload-area {
    position: relative;
    border: 2px dashed var(--color-gray-light);
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
}

.file-upload-area:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.02);
}

.file-upload-area.dragover {
    border-color: var(--color-lime);
    background: rgba(192, 227, 74, 0.04);
}

.file-upload-placeholder i {
    font-size: 2.4rem;
    color: var(--color-purple);
    opacity: 0.5;
    display: block;
    margin-bottom: 8px;
}

.file-upload-text {
    font-size: 0.88rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.file-upload-hint {
    font-size: 0.7rem;
    color: var(--color-gray-mid);
    margin-top: 4px;
}

.file-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-upload-list {
    margin-top: 12px;
    width: 100%;
    text-align: left;
}

.file-upload-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--color-charcoal);
    margin-top: 4px;
    border: 1px solid var(--color-gray-light);
}

.file-upload-item__name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.file-upload-item__name i {
    color: var(--color-purple);
}

.file-upload-item__remove {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 4px;
}

/* ----- Form Navigation ----- */
.form-navigation {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-light);
}

.btn-form-next,
.btn-form-prev {
    padding: 8px 24px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-form-next {
    background: var(--color-purple);
    color: var(--color-white);
    margin-left: auto;
}

.btn-form-next:hover {
    background: #5b2fbf;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.btn-form-prev {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-gray-mid);
}

.btn-form-prev:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* ----- Submit Area ----- */
.form-submit-area {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.btn-submit-form {
    padding: 12px 36px;
    font-size: 0.95rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-width: 200px;
    justify-content: center;
}

.btn-submit-form:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-submit-form .btn-loading,
.btn-submit-form .btn-success {
    display: none;
}

.btn-submit-form.loading .btn-text,
.btn-submit-form.loading .btn-success,
.btn-submit-form.loading i {
    display: none;
}

.btn-submit-form.loading .btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-submit-form.success .btn-text,
.btn-submit-form.success .btn-loading,
.btn-submit-form.success i {
    display: none;
}

.btn-submit-form.success .btn-success {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-consult-form {
    padding: 12px 28px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-consult-form:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Review Section ----- */
.form-review {
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.06);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.form-review__text {
    font-size: 0.85rem;
    color: var(--color-gray-mid);
    margin-bottom: 12px;
}

.form-review__summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.review-item {
    font-size: 0.82rem;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.review-label {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin-right: 6px;
}

.review-value {
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

/* ----- Success & Error States ----- */
.form-success {
    text-align: center;
    padding: 40px 20px;
}

.form-success__icon {
    font-size: 4rem;
    color: #059669;
    margin-bottom: 16px;
}

.form-success__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

.form-success__desc {
    font-size: 0.95rem;
    color: var(--color-gray-mid);
    max-width: 400px;
    margin: 0 auto 8px;
}

.form-success__note {
    font-size: 0.85rem;
    color: var(--color-gray-mid);
    margin-bottom: 20px;
}

.btn-success-reset {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-success-reset:hover {
    background: #5b2fbf;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.4);
}

.form-error-global {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.12);
    border-radius: 12px;
    padding: 12px 18px;
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 16px;
}

.form-error-global i {
    font-size: 1.2rem;
}

/* ============================================================
   INFO PANEL
   ============================================================ */
.contact-form__info-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 24px 24px 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
}

.info-card--highlight {
    border-color: rgba(192, 227, 74, 0.2);
    background: rgba(192, 227, 74, 0.03);
}

.info-card--highlight:hover {
    border-color: rgba(192, 227, 74, 0.3);
}

.info-card__icon {
    font-size: 1.6rem;
    color: var(--color-purple);
    display: block;
    margin-bottom: 8px;
}

.info-card__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.info-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-card__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.85rem;
    color: var(--color-gray-mid);
    line-height: 1.4;
}

.info-card__list li i {
    color: var(--color-lime);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.info-card__list--compact li {
    font-size: 0.82rem;
    padding: 4px 0;
}

.info-card__list--compact li strong {
    color: var(--color-charcoal);
}

/* ----- Process Steps ----- */
.process-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.process-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.step-number {
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.08);
    padding: 1px 8px;
    border-radius: 50px;
    min-width: 28px;
    text-align: center;
}

.step-label {
    font-size: 0.8rem;
    color: var(--color-charcoal);
}

/* ----- Focus States ----- */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.btn-submit-form:focus-visible,
.btn-consult-form:focus-visible,
.btn-form-next:focus-visible,
.btn-form-prev:focus-visible,
.btn-success-reset:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Smart Contact Form & Project Inquiry
================================================== */

/* ==================================================
START: Office Location, Interactive Map & Global Presence
================================================== */

/* ----- Container ----- */
#office-location {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.office-location__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.office-location__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.office-location__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.office-location__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.office-location__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.office-location__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.office-location__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.office-location__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.office-location__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.office-location__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.office-location__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.office-location__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#office-location .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#office-location .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#office-location .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#office-location .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#office-location .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#office-location .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#office-location .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.office-location__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.office-location__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.office-location__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.office-location__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.office-location__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.office-location__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */
.office-location__layout {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 32px;
    margin-bottom: 48px;
    align-items: stretch;
}

/* ============================================================
   OFFICE CARD
   ============================================================ */
.office-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 32px 32px 28px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.office-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
}

.office-card__header {
    margin-bottom: 18px;
}

.office-card__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.office-card__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 4px 0 0;
}

.office-card__address {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--color-gray-light);
    border-bottom: 1px solid var(--color-gray-light);
    margin-bottom: 16px;
}

.office-card__address i {
    font-size: 1.4rem;
    color: var(--color-purple);
    flex-shrink: 0;
    margin-top: 2px;
}

.address-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.address-line {
    font-size: 0.92rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.4;
}

.office-card__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.detail-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.detail-item__icon {
    font-size: 1.1rem;
    color: var(--color-lime);
    flex-shrink: 0;
    margin-top: 2px;
}

.detail-item__label {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
}

.detail-item__value {
    display: block;
    font-size: 0.88rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
}

.detail-item__value--open {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #059669;
    box-shadow: 0 0 12px rgba(5, 150, 105, 0.3);
    animation: pulseDot 2s ease-in-out infinite;
}

.detail-item__note {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.office-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-light);
}

.btn-directions {
    padding: 10px 24px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-directions:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-schedule-visit {
    padding: 10px 24px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-schedule-visit:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   MAP CONTAINER
   ============================================================ */
.map-container {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    min-height: 380px;
}

.map-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
}

.map-container__placeholder {
    width: 100%;
    height: 100%;
    min-height: 380px;
    position: relative;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    overflow: hidden;
}

.map-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-placeholder__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Map Pin ----- */
.map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pin-icon {
    font-size: 2.8rem;
    color: var(--color-lime);
    filter: drop-shadow(0 4px 16px rgba(192, 227, 74, 0.4));
    animation: floatBubble 3s ease-in-out infinite;
}

.pin-label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pin-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(192, 227, 74, 0.15);
    animation: pingPulse 2s ease-in-out infinite;
}

@keyframes pingPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* ----- Map Grid ----- */
.map-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    pointer-events: none;
    opacity: 0.06;
}

.grid-line {
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.grid-line:nth-child(-n+6) {
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* ----- Map Controls ----- */
.map-controls {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}

.map-control {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-control:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
    transform: scale(1.05);
}

.map-control--fullscreen {
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ----- Nearby Places ----- */
.map-nearby {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 5;
    flex-wrap: wrap;
    justify-content: center;
}

.nearby-label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nearby-tag {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.7);
    padding: 2px 10px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
}

/* ----- Embed Placeholder ----- */
.map-embed-placeholder {
    position: absolute;
    bottom: 60px;
    right: 16px;
    text-align: right;
    z-index: 3;
}

.embed-text {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

.embed-subtext {
    font-size: 0.55rem;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.15);
    margin: 0;
}

.embed-icon {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.06);
    display: block;
    margin-top: 2px;
}

/* ============================================================
   GLOBAL PRESENCE
   ============================================================ */
.office-location__global {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.office-location__global:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.global-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
}

.global-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.global-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.global-card__icon {
    font-size: 1.4rem;
    color: var(--color-lime);
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.global-card__title {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.global-card__desc {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

/* ============================================================
   SERVICE REGIONS
   ============================================================ */
.office-location__regions {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.office-location__regions:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.regions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.region-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    transition: all 0.3s ease;
    cursor: default;
}

.region-badge:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.04);
}

/* ============================================================
   OFFICE HIGHLIGHTS
   ============================================================ */
.office-location__highlights {
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.office-location__highlights:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 12px;
}

.highlight-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.highlight-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.highlight-card__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.highlight-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ----- Focus States ----- */
.btn-directions:focus-visible,
.btn-schedule-visit:focus-visible,
.map-control:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Office Location, Interactive Map & Global Presence
================================================== */

/* ==================================================
START: Business Hours, Response Time & Customer Support Availability
================================================== */

/* ----- Container ----- */
#support-availability {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.support-availability__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.support-availability__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.support-availability__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.support-availability__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.support-availability__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.support-availability__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.support-availability__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.support-availability__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.support-availability__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.support-availability__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.support-availability__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.support-availability__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#support-availability .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#support-availability .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#support-availability .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#support-availability .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#support-availability .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#support-availability .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#support-availability .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.support-availability__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.support-availability__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.support-availability__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.support-availability__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.support-availability__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.support-availability__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   BUSINESS HOURS CARD
   ============================================================ */
.support-availability__hours {
    max-width: 750px;
    margin: 0 auto 48px;
}

.hours-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 32px 36px 28px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hours-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.06);
}

.hours-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.hours-card__icon {
    font-size: 1.6rem;
    color: var(--color-purple);
}

.hours-card__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hours-card__status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator--open {
    background: #059669;
    box-shadow: 0 0 16px rgba(5, 150, 105, 0.4);
    animation: pulseDot 2s ease-in-out infinite;
}

.status-indicator--closed {
    background: #dc2626;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.3);
}

.status-text {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.status-time {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-left: auto;
}

.hours-card__schedule {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 12px;
}

.schedule-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

.schedule-row--closed {
    opacity: 0.5;
}

.schedule-row--closed .schedule-time {
    color: #dc2626;
}

.schedule-day {
    font-size: 0.88rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.schedule-time {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.hours-card__timezone {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(124, 58, 237, 0.03);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-bottom: 16px;
}

.hours-card__timezone i {
    color: var(--color-purple);
}

.hours-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-hours-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-hours-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-hours-schedule {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-hours-schedule:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   RESPONSE TIME METRICS
   ============================================================ */
.support-availability__response {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-availability__response:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.response-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 14px;
}

.response-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 12px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.response-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.response-card--highlight {
    border-color: rgba(124, 58, 237, 0.12);
    background: rgba(124, 58, 237, 0.02);
}

.response-card--highlight:hover {
    border-color: rgba(124, 58, 237, 0.2);
    background: rgba(124, 58, 237, 0.04);
}

.response-card__icon {
    font-size: 1.6rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.response-card__channel {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.response-card__time {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    line-height: 1.2;
    margin-top: 2px;
}

.response-card__note {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
    margin-top: 2px;
}

.response-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 12px;
    border-radius: 50px;
    margin-top: 6px;
}

.response-card__badge--fast {
    background: rgba(5, 150, 105, 0.08);
    color: #059669;
}

.response-card__badge--standard {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

.response-card__badge--priority {
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
}

/* ============================================================
   SUPPORT CHANNELS
   ============================================================ */
.support-availability__channels {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-availability__channels:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.support-availability__channels .channels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 14px;
}

.channel-support-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.channel-support-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.channel-support-card__icon {
    font-size: 1.4rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.channel-support-card__info {
    flex: 1;
    min-width: 0;
}

.channel-support-card__name {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.channel-support-card__desc {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.channel-support-card__btn {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 3px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.channel-support-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   SUPPORT COMMITMENTS
   ============================================================ */
.support-availability__commitments {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-availability__commitments:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.commitments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.commitment-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.commitment-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.commitment-card__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.commitment-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   SERVICE LEVEL INDICATORS
   ============================================================ */
.support-availability__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.support-availability__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.support-availability__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.support-availability__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.support-availability__metrics .metric-stat__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.support-availability__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.support-availability__metrics .metric-stat__number .stat-suffix {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.support-availability__metrics .metric-stat__number .stat-label--hours {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.support-availability__metrics .metric-stat__number .stat-label--stars {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: #f59e0b;
}

.support-availability__metrics .metric-stat__number .stat-label--stars .stat-suffix {
    color: #f59e0b;
    font-size: 1.3rem;
}

.support-availability__metrics .metric-stat__number .stat-label--global {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.support-availability__metrics .metric-stat__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   SUPPORT PROCESS TIMELINE
   ============================================================ */
.support-availability__process {
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.support-availability__process:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    padding: 12px 0 8px;
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 44px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 8px;
}

.timeline-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.timeline-step:hover .timeline-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.timeline-step__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-step__label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.timeline-step__desc {
    font-size: 0.62rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
}

.timeline-step__connector {
    display: none;
}

/* ----- Focus States ----- */
.btn-hours-contact:focus-visible,
.btn-hours-schedule:focus-visible,
.channel-support-card__btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Business Hours, Response Time & Customer Support Availability
================================================== */

/* ==================================================
START: Why Contact XoHub Solutions & Client Success Highlights
================================================== */

/* ----- Container ----- */
#why-xohub {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.why-xohub__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.why-xohub__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.why-xohub__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.why-xohub__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.why-xohub__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.why-xohub__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.why-xohub__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.why-xohub__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.why-xohub__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.why-xohub__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.why-xohub__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.why-xohub__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#why-xohub .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#why-xohub .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#why-xohub .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#why-xohub .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#why-xohub .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#why-xohub .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#why-xohub .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.why-xohub__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.why-xohub__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.why-xohub__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.why-xohub__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.why-xohub__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.why-xohub__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED TRUST BANNER
   ============================================================ */
.why-xohub__banner {
    margin-bottom: 48px;
}

.trust-banner {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.trust-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.trust-banner__content {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trust-banner__badge {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 4px 14px;
    border-radius: 50px;
    width: fit-content;
}

.trust-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.trust-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

.trust-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-portfolio {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-portfolio:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Trust Banner Visual ----- */
.trust-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
}

.banner-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 280px;
}

.banner-stat {
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.banner-stat:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

.banner-stat__number {
    display: block;
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime);
    letter-spacing: -0.02em;
}

.banner-stat__label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.banner-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.b-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.b-shape--1 {
    width: 140px;
    height: 140px;
    top: -40px;
    right: -40px;
}

.b-shape--2 {
    width: 100px;
    height: 100px;
    bottom: -30px;
    left: -30px;
}

.b-shape--3 {
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   WHY BUSINESSES CHOOSE US
   ============================================================ */
.why-xohub__features {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-xohub__features:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.feature-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.feature-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.feature-card__desc {
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
    margin: 2px 0 4px;
}

.feature-card__btn {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 4px;
}

.feature-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   SUCCESS METRICS
   ============================================================ */
.why-xohub__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.why-xohub__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.why-xohub__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.why-xohub__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.why-xohub__metrics .metric-stat__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.why-xohub__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.why-xohub__metrics .metric-stat__number .stat-suffix {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.why-xohub__metrics .metric-stat__number .stat-label--hours {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.why-xohub__metrics .metric-stat__number .stat-label--global {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.why-xohub__metrics .metric-stat__number .stat-label--tech {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: #2563eb;
}

.why-xohub__metrics .metric-stat__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   PROJECT HIGHLIGHTS
   ============================================================ */
.why-xohub__projects {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-xohub__projects:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.project-card {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.project-card__image {
    position: relative;
    padding: 20px 16px 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.project-card__placeholder {
    font-size: 1.8rem;
    color: var(--color-purple);
    opacity: 0.3;
}

.project-card__category {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.08);
    padding: 1px 10px;
    border-radius: 50px;
}

.project-card__info {
    padding: 10px 14px 14px;
}

.project-card__title {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.project-card__desc {
    display: block;
    font-size: 0.62rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
    margin: 2px 0 6px;
}

.project-card__btn {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.project-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   CLIENT SUCCESS TIMELINE
   ============================================================ */
.why-xohub__timeline {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-xohub__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.timeline-horizontal {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
    padding: 12px 0 8px;
}

.timeline-horizontal::before {
    content: '';
    position: absolute;
    top: 44px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.why-xohub__timeline .timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.why-xohub__timeline .timeline-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.why-xohub__timeline .timeline-step:hover .timeline-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.why-xohub__timeline .timeline-step__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.why-xohub__timeline .timeline-step__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.why-xohub__timeline .timeline-step__desc {
    font-size: 0.58rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
}

/* ============================================================
   TRUST BADGES
   ============================================================ */
.why-xohub__trust {
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-xohub__trust:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.trust-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.trust-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    padding: 4px 16px 4px 12px;
    transition: all 0.3s ease;
    cursor: default;
}

.trust-badge-item i {
    color: var(--color-lime);
    font-size: 0.8rem;
}

.trust-badge-item:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.04);
}

/* ----- Focus States ----- */
.btn-banner-start:focus-visible,
.btn-banner-portfolio:focus-visible,
.feature-card__btn:focus-visible,
.project-card__btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Why Contact XoHub Solutions & Client Success Highlights
================================================== */

/* ==================================================
START: Meet Our Team, Departments & Direct Contacts
================================================== */

/* ----- Container ----- */
#team-directory {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.team-directory__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.team-directory__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.team-directory__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.team-directory__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.team-directory__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.team-directory__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.team-directory__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.team-directory__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.team-directory__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.team-directory__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.team-directory__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.team-directory__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#team-directory .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#team-directory .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#team-directory .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#team-directory .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#team-directory .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#team-directory .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#team-directory .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.team-directory__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.team-directory__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.team-directory__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.team-directory__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.team-directory__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.team-directory__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED LEADERSHIP CARD
   ============================================================ */
.team-directory__leadership {
    margin-bottom: 48px;
}

.leadership-card {
    display: grid;
    grid-template-columns: 30fr 70fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.leadership-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.leadership-card__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    gap: 14px;
}

.leadership-card__avatar {
    position: relative;
}

.leadership-card__avatar .avatar-placeholder {
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.15);
    display: block;
}

.leadership-card__avatar .avatar-status {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #059669;
    border: 2px solid #1A2A4A;
    box-shadow: 0 0 12px rgba(5, 150, 105, 0.4);
}

.leadership-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    justify-content: center;
}

.badge-item {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.badge-item i {
    font-size: 0.55rem;
    margin-right: 4px;
}

.badge-item:first-child i {
    color: #059669;
}

.badge-item:last-child i {
    color: var(--color-lime);
}

.leadership-card__content {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leadership-card__name {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
}

.leadership-card__title {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
}

.leadership-card__intro {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 4px 0 0;
}

.leadership-card__expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 4px 0;
}

.expertise-tag {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.06);
}

.leadership-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.btn-contact-leader {
    padding: 8px 24px;
    font-size: 0.82rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-contact-leader:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-linkedin {
    padding: 8px 24px;
    font-size: 0.82rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-linkedin:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   DEPARTMENTS GRID
   ============================================================ */
.team-directory__departments {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.team-directory__departments:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.departments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 16px;
}

.department-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 12px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.department-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.department-card__icon {
    font-size: 1.6rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.department-card__name {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.department-card__desc {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
    margin: 2px 0 4px;
}

.department-card__size {
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-bottom: 6px;
}

.department-card__size i {
    margin-right: 4px;
}

.department-card__btn {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.department-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   DEPARTMENT RESPONSIBILITIES (ACCORDION)
   ============================================================ */
.team-directory__responsibilities {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.team-directory__responsibilities:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.responsibilities-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resp-item {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.resp-item:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(124, 58, 237, 0.06);
}

.resp-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: left;
    transition: all 0.3s ease;
}

.resp-item__trigger:hover {
    background: rgba(124, 58, 237, 0.02);
}

.resp-item__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.resp-item__title {
    flex: 1;
}

.resp-item__toggle {
    font-size: 0.8rem;
    color: var(--color-gray-mid);
    transition: transform 0.3s ease;
}

.resp-item__trigger[aria-expanded="true"] .resp-item__toggle {
    transform: rotate(180deg);
}

.resp-item__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.resp-item__trigger[aria-expanded="true"] + .resp-item__content {
    max-height: 600px;
    padding: 0 20px 18px;
}

.resp-item__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.resp-detail__label {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
    margin-bottom: 4px;
}

.resp-detail__label i {
    margin-right: 4px;
}

.resp-detail__list {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 0.78rem;
    color: var(--color-gray-mid);
    line-height: 1.6;
}

.resp-detail__list li {
    margin-bottom: 2px;
}

.resp-detail__value {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.4;
}

.resp-detail__value--available {
    color: #059669;
}

.resp-detail__value--available::before {
    content: '● ';
}

/* ============================================================
   COMMUNICATION FLOW
   ============================================================ */
.team-directory__flow {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.team-directory__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.flow-timeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
    padding: 12px 0 8px;
}

.flow-timeline::before {
    content: '';
    position: absolute;
    top: 44px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.flow-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.flow-step:hover .flow-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

.flow-step__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.flow-step__desc {
    font-size: 0.58rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
    margin-top: 2px;
}

.flow-step__arrow {
    display: none;
}

/* ============================================================
   TEAM VALUES
   ============================================================ */
.team-directory__values {
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.team-directory__values:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.value-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.value-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.value-card__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.value-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ----- Focus States ----- */
.btn-contact-leader:focus-visible,
.btn-linkedin:focus-visible,
.department-card__btn:focus-visible,
.resp-item__trigger:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Meet Our Team, Departments & Direct Contacts
================================================== */

/* ==================================================
START: Contact FAQ, Consultation Process & Final CTA
================================================== */

/* ----- Container ----- */
#contact-faq-final {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.contact-faq-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.contact-faq-final__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.contact-faq-final__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.contact-faq-final__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.contact-faq-final__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.contact-faq-final__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.contact-faq-final__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.contact-faq-final__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.contact-faq-final__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.contact-faq-final__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.contact-faq-final__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.contact-faq-final__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#contact-faq-final .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#contact-faq-final .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#contact-faq-final .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#contact-faq-final .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#contact-faq-final .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#contact-faq-final .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#contact-faq-final .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.contact-faq-final__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.contact-faq-final__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.contact-faq-final__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.contact-faq-final__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.contact-faq-final__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.contact-faq-final__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */
.contact-faq-final__layout {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 32px;
    margin-bottom: 48px;
    align-items: start;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.contact-faq-final__faq {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-faq-final__faq:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.faq-final-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-final-item {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-final-item:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(124, 58, 237, 0.06);
}

.faq-final-item__trigger {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: left;
    transition: all 0.3s ease;
}

.faq-final-item__trigger:hover {
    background: rgba(124, 58, 237, 0.02);
}

.faq-final-item__category {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.08);
    padding: 1px 10px;
    border-radius: 50px;
    white-space: nowrap;
}

.faq-final-item__question {
    font-size: 0.82rem;
}

.faq-final-item__toggle {
    font-size: 0.75rem;
    color: var(--color-gray-mid);
    transition: transform 0.3s ease;
}

.faq-final-item__trigger[aria-expanded="true"] .faq-final-item__toggle {
    transform: rotate(180deg);
}

.faq-final-item__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    transition: max-height 0.4s ease, padding 0.4s ease;
    color: var(--color-gray-mid);
    font-size: 0.82rem;
    line-height: 1.6;
}

.faq-final-item__trigger[aria-expanded="true"] + .faq-final-item__content {
    max-height: 300px;
    padding: 0 16px 14px;
}

.faq-final-item__content p {
    margin: 0 0 8px;
}

.faq-final-item__actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.faq-final-item__vote,
.faq-final-item__copy {
    background: transparent;
    border: none;
    font-size: 0.65rem;
    color: var(--color-gray-mid);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.faq-final-item__vote:hover,
.faq-final-item__copy:hover {
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-purple);
}

/* ============================================================
   CONSULTATION PROCESS
   ============================================================ */
.contact-faq-final__process {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-faq-final__process:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.process-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.process-card {
    display: flex;
    gap: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.process-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.process-card__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-lime);
    color: var(--color-charcoal);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    margin-top: 2px;
}

.process-card__content {
    flex: 1;
    min-width: 0;
}

.process-card__title {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.process-card__desc {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.process-card__time {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-top: 2px;
}

.process-card__time i {
    margin-right: 3px;
}

/* ============================================================
   PROJECT JOURNEY TIMELINE
   ============================================================ */
.contact-faq-final__journey {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-faq-final__journey:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.journey-timeline {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    position: relative;
    padding: 16px 0 8px;
}

.journey-timeline::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.journey-step__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
    background: var(--color-white);
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.journey-step:hover .journey-step__icon {
    color: var(--color-lime);
    transform: scale(1.1);
}

.journey-step__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.journey-step__connector {
    display: none;
}

/* ============================================================
   TRUST & GUARANTEE CARDS
   ============================================================ */
.contact-faq-final__trust {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-faq-final__trust:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.trust-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.trust-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.trust-card__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.trust-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   FINAL PREMIUM CTA BANNER
   ============================================================ */
.contact-faq-final__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.final-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.final-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.final-cta-banner__content {
    padding: 40px 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.final-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.final-cta-banner__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.final-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.final-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-start {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-cta-consult {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-consult:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.final-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 220px;
}

.cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 4s ease-in-out infinite;
}
.cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 4s ease-in-out infinite 1s;
}
.cta-icon--3 {
    bottom: 20%;
    left: 25%;
    animation: floatIcon 4s ease-in-out infinite 2s;
}
.cta-icon--4 {
    bottom: 20%;
    right: 25%;
    animation: floatIcon 4s ease-in-out infinite 0.5s;
}

.cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

/* ----- Focus States ----- */
.faq-final-item__trigger:focus-visible,
.faq-final-item__vote:focus-visible,
.faq-final-item__copy:focus-visible,
.btn-cta-start:focus-visible,
.btn-cta-consult:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Contact FAQ, Consultation Process & Final CTA
================================================== */

/* ==================================================
START: Services Hero Banner
================================================== */

/* ----- Container ----- */
#services-hero {
    padding: 40px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ----- Background Decorations ----- */
.services-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.services-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.services-hero__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.services-hero__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.services-hero__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.services-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.services-hero__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.services-hero__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.services-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.services-hero__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.services-hero__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.services-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#services-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#services-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#services-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#services-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#services-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#services-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#services-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.services-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */
.services-hero__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.services-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.services-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.services-hero__title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.services-hero__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.services-hero__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.services-hero__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 540px;
    margin: 0;
}

.services-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-services-start {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-services-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-services-consult {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-services-consult:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Trust Badges ----- */
.services-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 14px 4px 10px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
}

.trust-badge i {
    color: var(--color-lime);
    font-size: 0.8rem;
}

.trust-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

/* ----- Hero Highlights ----- */
.services-hero__highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.highlight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 12px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.highlight-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.highlight-card__number {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.highlight-card__number i {
    font-size: 1.4rem;
    color: var(--color-lime);
}

.highlight-card__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin-top: 2px;
}

/* ============================================================
   HERO VISUAL
   ============================================================ */
.services-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 500px;
    margin: 0 auto;
}

/* ----- Browser Mockup ----- */
.visual-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.visual-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06);
}

.visual-card--browser {
    top: 5%;
    left: 10%;
    width: 220px;
    border-radius: 12px;
    overflow: hidden;
    animation: floatCard 5s ease-in-out infinite;
}

.browser-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--color-gray-light);
}

.browser-header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot--red { background: #ef4444; }
.dot--yellow { background: #f59e0b; }
.dot--green { background: #059669; }

.browser-url {
    font-size: 0.55rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-left: 4px;
    background: rgba(0, 0, 0, 0.03);
    padding: 1px 8px;
    border-radius: 4px;
}

.browser-body {
    padding: 10px 12px 12px;
}

.browser-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 50px;
    margin-bottom: 6px;
}

.bar {
    flex: 1;
    background: var(--color-purple);
    border-radius: 3px 3px 0 0;
    opacity: 0.4;
    transition: all 0.3s ease;
    min-height: 8px;
}

.bar--1 { opacity: 0.5; }
.bar--2 { opacity: 0.7; background: var(--color-lime); }
.bar--3 { opacity: 0.4; }
.bar--4 { opacity: 0.9; background: var(--color-lime); }
.bar--5 { opacity: 0.6; }
.bar--6 { opacity: 0.4; }

.browser-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.browser-stats .stat:first-child {
    color: #059669;
}

/* ----- Mobile Mockup ----- */
.visual-card--mobile {
    bottom: 15%;
    right: 8%;
    width: 80px;
    border-radius: 14px;
    padding: 6px 6px 10px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    animation: floatCard 6s ease-in-out infinite 1.5s;
}

.mobile-notch {
    width: 24px;
    height: 4px;
    background: var(--color-gray-light);
    border-radius: 4px;
    margin: 0 auto 6px;
}

.mobile-screen {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding: 4px;
}

.mobile-app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 0.6rem;
    transition: all 0.3s ease;
}

.mobile-app-icon:hover {
    background: rgba(124, 58, 237, 0.12);
    transform: scale(1.05);
}

.mobile-app-icon:nth-child(2) { background: rgba(192, 227, 74, 0.06); color: var(--color-lime-dark); }
.mobile-app-icon:nth-child(4) { background: rgba(192, 227, 74, 0.06); color: var(--color-lime-dark); }

/* ----- Analytics Card ----- */
.visual-card--analytics {
    bottom: 30%;
    left: 5%;
    width: 150px;
    padding: 12px 14px;
    animation: floatCard 5.5s ease-in-out infinite 2.5s;
}

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.analytics-title {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.analytics-trend {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: #059669;
}

.analytics-trend i {
    font-size: 0.5rem;
}

.analytics-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    padding: 2px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

.analytics-row .label {
    color: var(--color-gray-mid);
}

.analytics-row .value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.analytics-progress {
    margin-top: 6px;
    height: 3px;
    background: var(--color-gray-light);
    border-radius: 3px;
    overflow: hidden;
}

.analytics-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 3px;
}

/* ----- AI Node ----- */
.visual-card--ai {
    top: 45%;
    right: 5%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.08);
    animation: floatCard 4.5s ease-in-out infinite 1s;
}

.ai-icon {
    font-size: 1.4rem;
    color: var(--color-purple);
}

.ai-label {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin-top: 2px;
}

.ai-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    animation: pulseRing 3s ease-in-out infinite;
}

/* ----- Cloud Node ----- */
.visual-card--cloud {
    top: 15%;
    right: 20%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(192, 227, 74, 0.04);
    border: 1px solid rgba(192, 227, 74, 0.08);
    animation: floatCard 5s ease-in-out infinite 3s;
}

.cloud-icon {
    font-size: 1.2rem;
    color: var(--color-lime-dark);
}

.cloud-label {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin-top: 1px;
}

/* ----- Connection Lines ----- */
.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ----- Floating Orbs ----- */
.orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    animation: pulseGlow 4s ease-in-out infinite;
}

.orb--1 {
    width: 50px;
    height: 50px;
    top: 20%;
    right: 30%;
    animation-delay: 0s;
}

.orb--2 {
    width: 30px;
    height: 30px;
    bottom: 40%;
    left: 20%;
    background: rgba(192, 227, 74, 0.04);
    border-color: rgba(192, 227, 74, 0.04);
    animation-delay: 1.5s;
}

.orb--3 {
    width: 20px;
    height: 20px;
    top: 60%;
    right: 40%;
    background: rgba(192, 227, 74, 0.03);
    border-color: rgba(192, 227, 74, 0.03);
    animation-delay: 3s;
}

/* ----- Animations ----- */
@keyframes floatCard {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulseRing {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ----- Focus States ----- */
.btn-services-start:focus-visible,
.btn-services-consult:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Services Hero Banner
================================================== */

/* ==================================================
START: Services Categories Overview
================================================== */

/* ----- Container ----- */
#services-categories {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.services-categories__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.services-categories__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.services-categories__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.services-categories__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.services-categories__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.services-categories__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.services-categories__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.services-categories__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.services-categories__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.services-categories__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.services-categories__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.services-categories__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#services-categories .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#services-categories .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#services-categories .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#services-categories .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#services-categories .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#services-categories .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#services-categories .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.services-categories__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.services-categories__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.services-categories__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.services-categories__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.services-categories__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.services-categories__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   CATEGORIES GRID
   ============================================================ */
.services-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.category-card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.category-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.category-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.category-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(192, 227, 74, 0.08));
    font-size: 1.4rem;
    color: var(--color-purple);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.category-card:hover .category-card__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    transform: scale(1.05);
}

.category-card__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
}

.category-card__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 14px;
    flex: 1;
}

.category-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: 16px;
}

.chip {
    font-size: 0.68rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 4px 14px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.chip:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

.category-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    width: fit-content;
}

.category-card__btn i {
    transition: transform 0.3s ease;
}

.category-card__btn:hover {
    color: var(--color-lime-dark);
    border-bottom-color: var(--color-lime);
}

.category-card__btn:hover i {
    transform: translateX(4px);
}

/* ============================================================
   MINI STATISTICS BAR
   ============================================================ */
.services-categories__stats {
    max-width: 900px;
    margin: 0 auto 48px;
}

.stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    padding: 20px 28px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stats-bar:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px 0;
}

.stat-item__number {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.stat-item__number .stat-suffix {
    font-size: 1.2rem;
    color: var(--color-purple);
    margin-left: 2px;
}

.stat-item__number i {
    font-size: 1.6rem;
    color: var(--color-lime);
}

.stat-item__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin-top: 2px;
}

.stat-divider {
    width: 1px;
    background: var(--color-gray-light);
    align-self: stretch;
}

/* ============================================================
   SECTION CTA
   ============================================================ */
.services-categories__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.cta-card {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.cta-card__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cta-card__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cta-card__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.cta-card__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.cta-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-consult {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-consult:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-all-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-all-services:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.cta-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 200px;
}

.cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.cta-icon--1 {
    top: 20%;
    left: 20%;
    animation: floatIcon 4s ease-in-out infinite;
}
.cta-icon--2 {
    top: 20%;
    right: 20%;
    animation: floatIcon 4s ease-in-out infinite 1.2s;
}
.cta-icon--3 {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    animation: floatIcon 4s ease-in-out infinite 2.4s;
}

.cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

/* ----- Focus States ----- */
.category-card__btn:focus-visible,
.btn-cta-consult:focus-visible,
.btn-cta-all-services:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Services Categories Overview
================================================== */

/* ==================================================
START: Featured Services Grid
================================================== */

/* ----- Container ----- */
#featured-services {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.featured-services__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.featured-services__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.featured-services__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.featured-services__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.featured-services__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.featured-services__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.featured-services__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.featured-services__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.featured-services__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.featured-services__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.featured-services__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.featured-services__grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#featured-services .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#featured-services .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#featured-services .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#featured-services .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#featured-services .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#featured-services .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#featured-services .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.featured-services__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.featured-services__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.featured-services__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.featured-services__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.featured-services__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.featured-services__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.featured-services__filter {
    max-width: 850px;
    margin: 0 auto 36px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-services__filter:hover {
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.04);
}

.filter-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    color: var(--color-charcoal);
    background: rgba(0, 0, 0, 0.02);
}

.filter-btn--active {
    background: var(--color-purple);
    color: var(--color-white);
}

.filter-btn--active:hover {
    background: #5b2fbf;
    color: var(--color-white);
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.featured-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

/* ----- Service Card ----- */
.service-card {
    display: flex;
    flex-direction: column;
    padding: 24px 22px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    background: rgba(255, 255, 255, 0.6);
}

.service-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(192, 227, 74, 0.08));
    font-size: 1.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.service-card:hover .service-card__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    transform: scale(1.05);
}

.service-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    margin-left: auto;
}

.service-card__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.service-card__desc {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0 0 12px;
    flex: 1;
}

.service-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 10px;
}

.feature-chip {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 2px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.feature-chip:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

.service-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.tech-tag {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    padding: 1px 10px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.04);
    transition: all 0.3s ease;
    cursor: default;
}

.tech-tag:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.service-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    flex-wrap: wrap;
    gap: 8px;
}

.service-card__size {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.service-card__size i {
    margin-right: 4px;
    color: var(--color-purple);
}

.service-card__actions {
    display: flex;
    gap: 6px;
}

.service-btn {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    padding: 4px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.service-btn--learn {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
}

.service-btn--learn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.service-btn--quote {
    color: var(--color-charcoal);
    background: var(--color-lime);
}

.service-btn--quote:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 227, 74, 0.3);
}

/* ============================================================
   FEATURED SERVICE SPOTLIGHT
   ============================================================ */
.featured-services__spotlight {
    margin-bottom: 48px;
}

.spotlight-card {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.spotlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.spotlight-card__badge {
    position: absolute;
    top: 16px;
    left: 24px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-charcoal);
    background: var(--color-lime);
    padding: 2px 14px;
    border-radius: 50px;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

.spotlight-card__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spotlight-card__icon {
    font-size: 2rem;
    color: var(--color-purple);
}

.spotlight-card__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.spotlight-card__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
    max-width: 540px;
}

.spotlight-card__flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 12px 0 4px;
}

.flow-item {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 4px 14px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.flow-item:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
}

.flow-arrow {
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.spotlight-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-spotlight-discuss {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-spotlight-discuss:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-spotlight-schedule {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-spotlight-schedule:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Spotlight Visual ----- */
.spotlight-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.spotlight-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.spotlight-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.spotlight-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.2s;
}
.spotlight-icon--3 {
    bottom: 20%;
    left: 25%;
    animation: floatIcon 5s ease-in-out infinite 2.4s;
}
.spotlight-icon--4 {
    bottom: 20%;
    right: 25%;
    animation: floatIcon 5s ease-in-out infinite 3.6s;
}

.spotlight-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.spotlight-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.spotlight-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.spotlight-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   TECHNOLOGY PREVIEW
   ============================================================ */
.featured-services__tech-preview {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-services__tech-preview:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.tech-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.tech-preview-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 4px 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.tech-preview-item i {
    font-size: 0.9rem;
    color: var(--color-purple);
}

.tech-preview-item:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.04);
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.featured-services__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.services-cta-bottom {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-cta-bottom:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.services-cta-bottom__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.services-cta-bottom__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.services-cta-bottom__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.services-cta-bottom__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.services-cta-bottom__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-start-project {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-start-project:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-contact-sales {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-contact-sales:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Bottom CTA Visual ----- */
.services-cta-bottom__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.services-cta-bottom__visual .cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.services-cta-bottom__visual .cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.services-cta-bottom__visual .cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.services-cta-bottom__visual .cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.services-cta-bottom__visual .cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.services-cta-bottom__visual .cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.services-cta-bottom__visual .cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.services-cta-bottom__visual .cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.services-cta-bottom__visual .cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.services-cta-bottom__visual .cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.filter-btn:focus-visible,
.service-btn:focus-visible,
.btn-spotlight-discuss:focus-visible,
.btn-spotlight-schedule:focus-visible,
.btn-cta-start-project:focus-visible,
.btn-cta-contact-sales:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Featured Services Grid
================================================== */

/* ==================================================
START: Detailed Service Showcase
================================================== */

/* ----- Container ----- */
#service-showcase {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.service-showcase__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.service-showcase__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.service-showcase__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.service-showcase__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.service-showcase__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.service-showcase__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.service-showcase__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.service-showcase__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.service-showcase__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.service-showcase__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.service-showcase__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.service-showcase__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#service-showcase .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#service-showcase .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#service-showcase .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#service-showcase .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#service-showcase .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#service-showcase .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#service-showcase .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.service-showcase__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.service-showcase__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.service-showcase__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.service-showcase__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.service-showcase__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.service-showcase__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SHOWCASE BLOCKS
   ============================================================ */
.showcase-block {
    display: grid;
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    align-items: center;
}

.showcase-block:last-of-type {
    border-bottom: none;
}

.showcase-block--left {
    grid-template-columns: 40fr 60fr;
}

.showcase-block--right {
    grid-template-columns: 60fr 40fr;
}

.showcase-block--right .showcase-block__visual {
    order: 2;
}

.showcase-block--right .showcase-block__content {
    order: 1;
}

/* ----- Visual ----- */
.showcase-block__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.showcase-illustration {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.showcase-illustration:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.showcase-illustration .ill-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.showcase-illustration .ill-icon--1 {
    top: 15%;
    left: 12%;
    animation: floatIcon 5s ease-in-out infinite;
}
.showcase-illustration .ill-icon--2 {
    top: 15%;
    right: 12%;
    animation: floatIcon 5s ease-in-out infinite 1.2s;
}
.showcase-illustration .ill-icon--3 {
    bottom: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite 2.4s;
}
.showcase-illustration .ill-icon--4 {
    bottom: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 3.6s;
}

.showcase-illustration .ill-icon:hover {
    background: rgba(124, 58, 237, 0.12);
    transform: scale(1.1);
}

.showcase-illustration .ill-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
}

.showcase-illustration .ill-shape--1 {
    width: 140px;
    height: 140px;
    top: -40px;
    right: -30px;
}

.showcase-illustration .ill-shape--2 {
    width: 90px;
    height: 90px;
    bottom: -20px;
    left: -20px;
}

.showcase-illustration .ill-shape--3 {
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Illustration: Development ----- */
.showcase-illustration--dev .ill-code-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'Courier New', monospace;
    z-index: 2;
}

.ill-code-block .code-line {
    display: block;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    white-space: nowrap;
}

.ill-code-block .code-line:first-child {
    color: var(--color-lime);
    opacity: 0.7;
}
.ill-code-block .code-line:nth-child(2) {
    color: rgba(255, 255, 255, 0.5);
    padding-left: 4px;
}
.ill-code-block .code-line:nth-child(3) {
    color: var(--color-lime);
    padding-left: 4px;
}
.ill-code-block .code-line:last-child {
    color: rgba(255, 255, 255, 0.4);
}

/* ----- Illustration: ERP ----- */
.showcase-illustration--erp .ill-dashboard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    width: 180px;
    z-index: 2;
}

.ill-dashboard .dash-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    padding: 2px 0;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.ill-dashboard .dash-row .dash-value {
    color: var(--color-lime);
    font-weight: var(--font-weight-semibold);
}

.ill-dashboard .dash-progress {
    margin-top: 6px;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.ill-dashboard .dash-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 3px;
}

/* ----- Illustration: E-Commerce ----- */
.showcase-illustration--ecom .ill-ecom-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    z-index: 2;
    min-width: 140px;
}

.ill-ecom-card .ecom-product {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.7);
}

.ill-ecom-card .ecom-price {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime);
    margin: 4px 0;
}

.ill-ecom-card .ecom-cart {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: var(--color-lime);
    padding: 4px 16px;
    border-radius: 50px;
    cursor: default;
}

/* ----- Illustration: AI ----- */
.showcase-illustration--ai .ill-ai-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.ill-ai-node .ai-node-icon {
    font-size: 2.4rem;
    color: var(--color-lime);
    opacity: 0.6;
}

.ill-ai-node .ai-node-label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

.ill-ai-node .ai-node-pulse {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(192, 227, 74, 0.06);
    animation: pulseRing 3s ease-in-out infinite;
}

.showcase-illustration--ai .ill-ai-connections {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20% 15%;
    opacity: 0.2;
}

.ill-ai-connections .conn-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulseDot 2s ease-in-out infinite;
}

.ill-ai-connections .conn-dot:nth-child(2) { animation-delay: 0.5s; }
.ill-ai-connections .conn-dot:nth-child(3) { animation-delay: 1s; }
.ill-ai-connections .conn-dot:nth-child(4) { animation-delay: 1.5s; }

/* ----- Illustration: Marketing ----- */
.showcase-illustration--marketing .ill-marketing-chart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
    z-index: 2;
}

.ill-marketing-chart .m-chart-bar {
    width: 16px;
    border-radius: 4px 4px 0 0;
    background: rgba(192, 227, 74, 0.2);
    min-height: 12px;
    transition: all 0.3s ease;
}

.ill-marketing-chart .m-chart-bar:nth-child(2) { background: rgba(124, 58, 237, 0.2); }
.ill-marketing-chart .m-chart-bar:nth-child(4) { background: rgba(124, 58, 237, 0.2); }

/* ----- Illustration: Design ----- */
.showcase-illustration--design .ill-design-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    z-index: 2;
}

.ill-design-grid .design-box {
    width: 60px;
    height: 50px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.ill-design-grid .design-box:hover {
    transform: scale(1.05);
}

/* ============================================================
   SHOWCASE CONTENT
   ============================================================ */
.showcase-block__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.showcase-block__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 14px;
    border-radius: 50px;
    width: fit-content;
}

.showcase-block__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.showcase-block__problem {
    font-size: 0.92rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    margin: 0;
    padding-left: 14px;
    border-left: 3px solid var(--color-purple);
}

.showcase-block__solution {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
}

.showcase-block__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 2px 0;
}

.feature-group__title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
    margin-bottom: 4px;
    display: block;
}

.feature-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-group ul li {
    font-size: 0.8rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    padding: 2px 0;
    padding-left: 16px;
    position: relative;
}

.feature-group ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--color-lime);
    font-size: 0.7rem;
}

.tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 2px;
}

.tech-chip {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    padding: 2px 12px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.tech-chip:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.showcase-block__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 10px 14px;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.04);
    border-radius: 12px;
}

.meta-item__label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
}

.meta-item__value {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
}

.showcase-block__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.btn-showcase-learn {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-showcase-learn:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-showcase-proposal {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-showcase-proposal:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   ENTERPRISE CTA
   ============================================================ */
.service-showcase__cta {
    max-width: 1000px;
    margin: 48px auto 0;
}

.enterprise-cta {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.enterprise-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.enterprise-cta__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.enterprise-cta__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.enterprise-cta__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.enterprise-cta__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.enterprise-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-strategy {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-strategy:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-expert {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-expert:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Enterprise CTA Visual ----- */
.enterprise-cta__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.e-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.e-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.e-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.e-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.e-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.e-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.e-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.e-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.e-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.e-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-showcase-learn:focus-visible,
.btn-showcase-proposal:focus-visible,
.btn-cta-strategy:focus-visible,
.btn-cta-expert:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Detailed Service Showcase
================================================== */

/* ==================================================
START: Our Development Process & Delivery Methodology
================================================== */

/* ----- Container ----- */
#delivery-process {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.delivery-process__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.delivery-process__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.delivery-process__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.delivery-process__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.delivery-process__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.delivery-process__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.delivery-process__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.delivery-process__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.delivery-process__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.delivery-process__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.delivery-process__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.delivery-process__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#delivery-process .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#delivery-process .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#delivery-process .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#delivery-process .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#delivery-process .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#delivery-process .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#delivery-process .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.delivery-process__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.delivery-process__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.delivery-process__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.delivery-process__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.delivery-process__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.delivery-process__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.delivery-process__timeline {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 32px 28px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.delivery-process__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 8%;
    right: 8%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
    border-radius: 3px;
}

.timeline-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.timeline-phase__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-lime);
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.timeline-phase:hover .timeline-phase__dot {
    background: var(--color-lime);
    border-color: var(--color-lime);
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.timeline-phase:hover .phase-number {
    color: var(--color-charcoal);
}

.phase-number {
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.timeline-phase__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.phase-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.phase-details {
    display: none;
}

.timeline-phase__connector {
    display: none;
}

/* ============================================================
   PROCESS DETAIL CARDS (Accordion)
   ============================================================ */
.delivery-process__details {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.delivery-process__details:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.process-details-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.phase-detail-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.phase-detail-card:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(124, 58, 237, 0.06);
}

.phase-detail-card__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: left;
    transition: all 0.3s ease;
}

.phase-detail-card__trigger:hover {
    background: rgba(124, 58, 237, 0.02);
}

.phase-detail-card__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.phase-detail-card__title {
    flex: 1;
    font-size: 0.82rem;
}

.phase-detail-card__toggle {
    font-size: 0.75rem;
    color: var(--color-gray-mid);
    transition: transform 0.3s ease;
}

.phase-detail-card__trigger[aria-expanded="true"] .phase-detail-card__toggle {
    transform: rotate(180deg);
}

.phase-detail-card__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.phase-detail-card__trigger[aria-expanded="true"] + .phase-detail-card__content {
    max-height: 800px;
    padding: 0 18px 18px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.detail-group__label {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
    margin-bottom: 4px;
}

.detail-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail-group ul li {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    padding: 2px 0;
    padding-left: 14px;
    position: relative;
    line-height: 1.4;
}

.detail-group ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--color-lime);
    font-size: 0.65rem;
}

.tools-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 2px;
}

.tool-chip {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    padding: 2px 12px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.tool-chip:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.involvement-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #059669;
    background: rgba(5, 150, 105, 0.06);
    padding: 1px 12px;
    border-radius: 50px;
}

.involvement-badge--medium {
    color: #d97706;
    background: rgba(217, 119, 6, 0.06);
}

.involvement-badge--low {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

.involvement-text {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-top: 2px;
}

/* ============================================================
   PROJECT MANAGEMENT PANEL
   ============================================================ */
.delivery-process__management {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.delivery-process__management:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.management-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.management-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.management-card__icon {
    font-size: 1.1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.management-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   QUALITY ASSURANCE WORKFLOW
   ============================================================ */
.delivery-process__qa {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.delivery-process__qa:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.qa-workflow {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
    padding: 12px 0 8px;
}

.qa-workflow::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.qa-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.qa-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.qa-step:hover .qa-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.qa-step__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.qa-step__icon {
    display: none;
}

.qa-step__arrow {
    display: none;
}

/* ============================================================
   DELIVERY METRICS
   ============================================================ */
.delivery-process__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.delivery-process__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.delivery-process__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.delivery-process__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.delivery-process__metrics .metric-stat__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.delivery-process__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.delivery-process__metrics .metric-stat__number .stat-suffix {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.delivery-process__metrics .metric-stat__number .stat-label--ontime {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.delivery-process__metrics .metric-stat__number .stat-label--hours {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.delivery-process__metrics .metric-stat__number .stat-label--agile {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: #2563eb;
}

.delivery-process__metrics .metric-stat__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.delivery-process__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.process-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.process-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.process-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.process-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.process-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.process-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.process-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-process-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-process-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-process-discovery {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-process-discovery:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.process-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.p-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.p-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.p-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.p-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.p-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.p-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.p-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.p-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.p-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.p-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.phase-detail-card__trigger:focus-visible,
.btn-cta-process-start:focus-visible,
.btn-cta-process-discovery:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Our Development Process & Delivery Methodology
================================================== */

/* ==================================================
START: Our Development Process & Delivery Methodology Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #delivery-process {
        padding: 60px 0 40px;
    }

    .delivery-process__header {
        margin-bottom: 36px;
    }

    .delivery-process__title {
        font-size: 2.2rem;
    }

    .delivery-process__subtitle {
        font-size: 0.95rem;
    }

    .delivery-process__timeline {
        padding: 24px 16px 20px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .process-timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px 8px;
    }

    .process-timeline::before {
        display: none;
    }

    .timeline-phase {
        padding: 0 4px;
    }

    .timeline-phase__dot {
        width: 36px;
        height: 36px;
        margin-bottom: 6px;
    }
    .phase-number {
        font-size: 0.55rem;
    }
    .phase-label {
        font-size: 0.62rem;
    }

    .delivery-process__details {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .delivery-process__management {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

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

    .delivery-process__qa {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .qa-workflow {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 8px;
    }

    .qa-workflow::before {
        display: none;
    }

    .qa-step {
        padding: 0 4px;
    }
    .qa-step__number {
        width: 26px;
        height: 26px;
        font-size: 0.5rem;
    }
    .qa-step__label {
        font-size: 0.6rem;
    }

    .delivery-process__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .delivery-process__metrics .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .delivery-process__metrics .metric-stat__number {
        font-size: 1.5rem;
    }
    .delivery-process__metrics .metric-stat__number .stat-suffix {
        font-size: 1.1rem;
    }
    .delivery-process__metrics .metric-stat__number .stat-label--ontime,
    .delivery-process__metrics .metric-stat__number .stat-label--hours,
    .delivery-process__metrics .metric-stat__number .stat-label--agile {
        font-size: 1.3rem;
    }
    .delivery-process__metrics .metric-stat__label {
        font-size: 0.65rem;
    }

    .process-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .process-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .process-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .process-cta-banner__title {
        font-size: 1.2rem;
    }

    .delivery-process__orb--1,
    .delivery-process__orb--2 {
        display: none;
    }

    .delivery-process__shape--2 {
        display: none;
    }

    #delivery-process .particle--3,
    #delivery-process .particle--5,
    #delivery-process .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #delivery-process {
        padding: 40px 0 30px;
    }

    .delivery-process__header {
        margin-bottom: 28px;
    }

    .delivery-process__title {
        font-size: 1.8rem;
    }

    .delivery-process__subtitle {
        font-size: 0.88rem;
    }

    .delivery-process__timeline {
        padding: 16px 12px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .process-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 12px 8px;
    }

    .timeline-phase {
        flex-direction: row;
        gap: 10px;
        text-align: left;
        padding: 4px 0;
        align-items: center;
    }

    .timeline-phase__dot {
        width: 30px;
        height: 30px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .phase-number {
        font-size: 0.5rem;
    }
    .phase-label {
        font-size: 0.6rem;
    }

    .delivery-process__details {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .phase-detail-card__trigger {
        padding: 10px 12px;
        font-size: 0.78rem;
        gap: 8px;
    }
    .phase-detail-card__number {
        min-width: 24px;
        height: 24px;
        font-size: 0.55rem;
    }
    .phase-detail-card__title {
        font-size: 0.76rem;
    }

    .phase-detail-card__trigger[aria-expanded="true"] + .phase-detail-card__content {
        padding: 0 12px 12px;
    }

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

    .detail-group ul li {
        font-size: 0.72rem;
    }

    .involvement-text {
        font-size: 0.65rem;
    }

    .delivery-process__management {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .management-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .management-card {
        padding: 8px 10px;
    }
    .management-card__icon {
        font-size: 0.9rem;
    }
    .management-card__label {
        font-size: 0.65rem;
    }

    .delivery-process__qa {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .qa-workflow {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .qa-step {
        flex-direction: row;
        gap: 10px;
        text-align: left;
        padding: 4px 0;
        align-items: center;
    }

    .qa-step__number {
        width: 24px;
        height: 24px;
        font-size: 0.45rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .qa-step__label {
        font-size: 0.6rem;
    }

    .delivery-process__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .delivery-process__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        margin: 0 auto;
    }

    .delivery-process__metrics .metric-stat__number {
        font-size: 1.2rem;
    }
    .delivery-process__metrics .metric-stat__number .stat-suffix {
        font-size: 0.9rem;
    }
    .delivery-process__metrics .metric-stat__number .stat-label--ontime,
    .delivery-process__metrics .metric-stat__number .stat-label--hours,
    .delivery-process__metrics .metric-stat__number .stat-label--agile {
        font-size: 1rem;
    }
    .delivery-process__metrics .metric-stat__label {
        font-size: 0.58rem;
    }

    .process-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .process-cta-banner__title {
        font-size: 1.05rem;
    }
    .process-cta-banner__desc {
        font-size: 0.82rem;
    }

    .process-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-process-start,
    .btn-cta-process-discovery {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .process-cta-banner__visual {
        min-height: 100px;
    }

    .p-cta-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    #delivery-process .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .delivery-process__title {
        font-size: 1.5rem;
    }

    .delivery-process__subtitle {
        font-size: 0.8rem;
    }

    .process-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 8px 6px;
    }

    .phase-label {
        font-size: 0.55rem;
    }

    .management-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .management-card {
        padding: 6px 8px;
    }
    .management-card__label {
        font-size: 0.6rem;
    }

    .qa-workflow {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }
    .qa-step__label {
        font-size: 0.55rem;
    }

    .delivery-process__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 320px;
    }

    .delivery-process__metrics .metric-stat__number {
        font-size: 1rem;
    }
    .delivery-process__metrics .metric-stat__number .stat-suffix {
        font-size: 0.75rem;
    }
    .delivery-process__metrics .metric-stat__number .stat-label--ontime,
    .delivery-process__metrics .metric-stat__number .stat-label--hours,
    .delivery-process__metrics .metric-stat__number .stat-label--agile {
        font-size: 0.85rem;
    }
    .delivery-process__metrics .metric-stat__label {
        font-size: 0.5rem;
    }

    .process-cta-banner__title {
        font-size: 0.95rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .delivery-process__title {
        font-size: 1.3rem;
    }

    .process-timeline {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .management-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .qa-workflow {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .delivery-process__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .delivery-process__metrics .metric-stat__number {
        font-size: 0.85rem;
    }
    .delivery-process__metrics .metric-stat__number .stat-suffix {
        font-size: 0.6rem;
    }
    .delivery-process__metrics .metric-stat__number .stat-label--ontime,
    .delivery-process__metrics .metric-stat__number .stat-label--hours,
    .delivery-process__metrics .metric-stat__number .stat-label--agile {
        font-size: 0.7rem;
    }
    .delivery-process__metrics .metric-stat__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Our Development Process & Delivery Methodology Responsive
================================================== */

/* ==================================================
START: Technologies, Platforms & Tools We Use
================================================== */

/* ----- Container ----- */
#tech-ecosystem {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.tech-ecosystem__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.tech-ecosystem__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.tech-ecosystem__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.tech-ecosystem__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.tech-ecosystem__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.tech-ecosystem__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.tech-ecosystem__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.tech-ecosystem__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.tech-ecosystem__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.tech-ecosystem__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.tech-ecosystem__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.tech-ecosystem__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#tech-ecosystem .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#tech-ecosystem .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#tech-ecosystem .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#tech-ecosystem .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#tech-ecosystem .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#tech-ecosystem .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#tech-ecosystem .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.tech-ecosystem__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.tech-ecosystem__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.tech-ecosystem__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tech-ecosystem__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.tech-ecosystem__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.tech-ecosystem__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   TECHNOLOGY TABS
   ============================================================ */
.tech-ecosystem__tabs {
    max-width: 900px;
    margin: 0 auto 36px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tech-ecosystem__tabs:hover {
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.04);
}

.tech-tab {
    padding: 6px 18px;
    border: none;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tech-tab:hover {
    color: var(--color-charcoal);
    background: rgba(0, 0, 0, 0.02);
}

.tech-tab--active {
    background: var(--color-purple);
    color: var(--color-white);
}

.tech-tab--active:hover {
    background: #5b2fbf;
    color: var(--color-white);
}

/* ============================================================
   TECHNOLOGY GRID
   ============================================================ */
.tech-ecosystem__grid {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tech-ecosystem__grid:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.tech-category {
    margin-bottom: 24px;
}

.tech-category:last-child {
    margin-bottom: 0;
}

.tech-category__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    margin: 0 0 8px;
    letter-spacing: 0.02em;
}

.tech-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.tech-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 4px 16px 4px 12px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.tech-item i {
    font-size: 0.9rem;
    color: var(--color-purple);
}

.tech-item:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.06);
}

/* ============================================================
   FEATURED TECHNOLOGY SPOTLIGHT
   ============================================================ */
.tech-ecosystem__spotlight {
    margin-bottom: 48px;
}

.tech-spotlight {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tech-spotlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.tech-spotlight__content {
    padding: 32px 36px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tech-spotlight__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tech-spotlight__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.tech-spotlight__desc {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

.tech-spotlight__flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 8px 0 4px;
}

.flow-node {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.flow-node:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
}

.flow-node__icon {
    font-size: 0.75rem;
    color: var(--color-purple);
}

.flow-node__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.flow-arrow {
    font-size: 0.65rem;
    color: var(--color-gray-mid);
}

.tech-spotlight__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-spotlight-tech {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-spotlight-tech:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ----- Spotlight Visual ----- */
.tech-spotlight__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 200px;
}

.spotlight-tech-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.spotlight-tech-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.t-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.t-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.t-icon--3 { top: 50%; left: 5%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.t-icon--4 { top: 50%; right: 5%; animation: floatIcon 5s ease-in-out infinite 3.6s; }
.t-icon--5 { bottom: 15%; left: 15%; animation: floatIcon 5s ease-in-out infinite 0.6s; }
.t-icon--6 { bottom: 15%; right: 15%; animation: floatIcon 5s ease-in-out infinite 1.8s; }
.t-icon--7 { top: 30%; left: 30%; animation: floatIcon 5s ease-in-out infinite 3s; }
.t-icon--8 { bottom: 30%; right: 30%; animation: floatIcon 5s ease-in-out infinite 0.3s; }

.spotlight-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.s-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.s-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

/* ============================================================
   DEVELOPMENT WORKFLOW
   ============================================================ */
.tech-ecosystem__workflow {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tech-ecosystem__workflow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.workflow-visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 6px;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.workflow-step:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-2px);
}

.workflow-step__icon {
    font-size: 0.85rem;
    color: var(--color-purple);
}

.workflow-step__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.workflow-step__arrow {
    font-size: 0.7rem;
    color: var(--color-gray-mid);
    margin-left: 4px;
}

.workflow-step:last-child .workflow-step__arrow {
    display: none;
}

/* ============================================================
   TECHNOLOGY METRICS
   ============================================================ */
.tech-ecosystem__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.tech-ecosystem__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.tech-ecosystem__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.tech-ecosystem__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.tech-ecosystem__metrics .metric-stat__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.tech-ecosystem__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.tech-ecosystem__metrics .metric-stat__number .stat-suffix {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.tech-ecosystem__metrics .metric-stat__number .stat-label--cloud {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.tech-ecosystem__metrics .metric-stat__number .stat-label--scalable {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.tech-ecosystem__metrics .metric-stat__number .stat-label--secure {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: #2563eb;
}

.tech-ecosystem__metrics .metric-stat__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.tech-ecosystem__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.tech-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tech-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.tech-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tech-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tech-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.tech-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.tech-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-tech-discuss {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-tech-discuss:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-tech-architect {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-tech-architect:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.tech-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.t-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.t-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.t-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.t-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.t-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.t-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.t-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.t-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.t-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.t-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.tech-tab:focus-visible,
.btn-spotlight-tech:focus-visible,
.btn-cta-tech-discuss:focus-visible,
.btn-cta-tech-architect:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Technologies, Platforms & Tools We Use
================================================== */

/* ==================================================
START: Industries We Serve
================================================== */

/* ----- Container ----- */
#industries-served {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.industries-served__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.industries-served__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.industries-served__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.industries-served__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.industries-served__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.industries-served__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.industries-served__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.industries-served__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.industries-served__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.industries-served__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.industries-served__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.industries-served__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#industries-served .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#industries-served .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#industries-served .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#industries-served .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#industries-served .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#industries-served .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#industries-served .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.industries-served__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.industries-served__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.industries-served__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.industries-served__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.industries-served__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.industries-served__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED BANNER
   ============================================================ */
.industries-served__banner {
    margin-bottom: 48px;
}

.industry-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industry-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.industry-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.industry-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.industry-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.industry-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.industry-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-industry {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-industry:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-consult {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-consult:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.industry-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.banner-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.banner-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.b-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.b-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.b-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.b-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }
.b-icon--5 { top: 50%; left: 4%; animation: floatIcon 5s ease-in-out infinite 0.6s; }
.b-icon--6 { top: 50%; right: 4%; animation: floatIcon 5s ease-in-out infinite 1.8s; }

.banner-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.b-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.b-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.b-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   INDUSTRIES GRID
   ============================================================ */
.industries-served__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 48px;
}

.industry-card {
    display: flex;
    flex-direction: column;
    padding: 20px 18px 18px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.industry-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    background: rgba(255, 255, 255, 0.6);
}

.industry-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.industry-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(192, 227, 74, 0.08));
    font-size: 1.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.industry-card:hover .industry-card__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    transform: scale(1.05);
}

.industry-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    margin-left: auto;
}

.industry-card__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px;
}

.industry-card__overview {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0 0 10px;
    flex: 1;
}

.industry-card__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
}

.detail-value {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    line-height: 1.3;
}

.service-tags,
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 2px;
}

.svc-tag {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    padding: 1px 10px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.04);
    transition: all 0.3s ease;
    cursor: default;
}

.svc-tag:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.ind-tech {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 1px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.ind-tech:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    transform: translateY(-2px);
}

.industry-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 4px 18px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 4px;
    align-self: flex-start;
}

.industry-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   INDUSTRY SUCCESS METRICS
   ============================================================ */
.industries-served__metrics {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.industries-served__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.industries-served__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.industries-served__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.industries-served__metrics .metric-stat__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.industries-served__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.industries-served__metrics .metric-stat__number .stat-suffix {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.industries-served__metrics .metric-stat__number .stat-label--global {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.industries-served__metrics .metric-stat__number .stat-label--custom {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.industries-served__metrics .metric-stat__number .stat-label--modern {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: #2563eb;
}

.industries-served__metrics .metric-stat__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   INDUSTRY EXPERTISE TIMELINE
   ============================================================ */
.industries-served__timeline {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industries-served__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.expertise-timeline {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    position: relative;
    padding: 12px 0 8px;
}

.expertise-timeline::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.expertise-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.expertise-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.expertise-step:hover .expertise-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.expertise-step__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.expertise-step__arrow {
    display: none;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.industries-served__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.industry-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industry-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.industry-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.industry-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.industry-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.industry-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.industry-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-industry-expert {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-industry-expert:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-industry-proposal {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-industry-proposal:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.industry-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.i-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.i-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.i-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.i-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.i-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.i-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.i-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.i-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.i-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.i-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-banner-industry:focus-visible,
.btn-banner-consult:focus-visible,
.industry-card__btn:focus-visible,
.btn-cta-industry-expert:focus-visible,
.btn-cta-industry-proposal:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Industries We Serve
================================================== */

/* ==================================================
START: Why Choose XoHub Solutions & Competitive Advantages
================================================== */

/* ----- Container ----- */
#why-choose-xohub {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.why-choose-xohub__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.why-choose-xohub__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.why-choose-xohub__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.why-choose-xohub__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.why-choose-xohub__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.why-choose-xohub__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.why-choose-xohub__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.why-choose-xohub__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.why-choose-xohub__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.why-choose-xohub__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.why-choose-xohub__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.why-choose-xohub__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#why-choose-xohub .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#why-choose-xohub .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#why-choose-xohub .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#why-choose-xohub .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#why-choose-xohub .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#why-choose-xohub .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#why-choose-xohub .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.why-choose-xohub__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.why-choose-xohub__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.why-choose-xohub__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.why-choose-xohub__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.why-choose-xohub__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.why-choose-xohub__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED TRUST BANNER
   ============================================================ */
.why-choose-xohub__banner {
    margin-bottom: 48px;
}

.trust-banner-advantage {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.trust-banner-advantage:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.trust-banner-advantage__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trust-banner-advantage__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trust-banner-advantage__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.trust-banner-advantage__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.trust-banner-advantage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-strategy {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-strategy:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.trust-banner-advantage__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.tb-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.tb-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.tb-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.tb-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.tb-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.tb-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }
.tb-icon--5 { top: 50%; left: 4%; animation: floatIcon 5s ease-in-out infinite 0.6s; }
.tb-icon--6 { top: 50%; right: 4%; animation: floatIcon 5s ease-in-out infinite 1.8s; }

.tb-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.tb-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.tb-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.tb-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   ADVANTAGES GRID
   ============================================================ */
.why-choose-xohub__advantages {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-choose-xohub__advantages:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.advantage-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.advantage-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.advantage-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.advantage-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.advantage-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 4px 0 6px;
    flex: 1;
}

.advantage-card__benefit {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 8px;
}

.advantage-card__btn {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 3px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}

.advantage-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.why-choose-xohub__comparison {
    max-width: 1000px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.why-choose-xohub__comparison:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    overflow-x: auto;
}

.comparison-table__header {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr 1.5fr;
    gap: 0;
    border-bottom: 2px solid var(--color-gray-light);
    padding-bottom: 8px;
    margin-bottom: 6px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.comparison-table__row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr 1.5fr;
    gap: 0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.comparison-table__row:hover {
    background: rgba(124, 58, 237, 0.02);
}

.comparison-table__row--highlight-row {
    background: rgba(192, 227, 74, 0.03);
    border-bottom: 2px solid var(--color-lime);
}

.comparison-table__row--highlight-row:hover {
    background: rgba(192, 227, 74, 0.06);
}

.comparison-table__cell {
    padding: 4px 8px;
    display: flex;
    align-items: center;
}

.comparison-table__cell--label {
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.comparison-table__cell--agency {
    color: var(--color-gray-mid);
}

.comparison-table__cell--freelancer {
    color: var(--color-gray-mid);
}

.comparison-table__cell--xohub {
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
}

.comparison-table__cell--highlight {
    color: var(--color-lime-dark);
}

.comparison-table__cell--highlight-gold {
    color: #f59e0b;
}

.comparison-table__cell--head {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
}

.comparison-table__cell--agency {
    color: var(--color-gray-mid);
}

.comparison-table__cell--freelancer {
    color: var(--color-gray-mid);
}

.comparison-table__cell--xohub {
    color: var(--color-purple);
}

/* ============================================================
   CLIENT SUCCESS PRINCIPLES
   ============================================================ */
.why-choose-xohub__principles {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-choose-xohub__principles:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.principle-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.principle-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.principle-card__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.principle-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   TRUST METRICS
   ============================================================ */
.why-choose-xohub__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.why-choose-xohub__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.why-choose-xohub__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.why-choose-xohub__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.why-choose-xohub__metrics .metric-stat__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.why-choose-xohub__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.why-choose-xohub__metrics .metric-stat__number .stat-suffix {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.why-choose-xohub__metrics .metric-stat__number .stat-label--hours {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.why-choose-xohub__metrics .metric-stat__number .stat-label--global {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.why-choose-xohub__metrics .metric-stat__number .stat-label--agile {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: #2563eb;
}

.why-choose-xohub__metrics .metric-stat__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.why-choose-xohub__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.choose-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.choose-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.choose-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.choose-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.choose-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.choose-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.choose-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-choose-proposal {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-choose-proposal:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-choose-experts {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-choose-experts:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.choose-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.c-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.c-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.c-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.c-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.c-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.c-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.c-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.c-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.c-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.c-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-banner-start:focus-visible,
.btn-banner-strategy:focus-visible,
.advantage-card__btn:focus-visible,
.btn-cta-choose-proposal:focus-visible,
.btn-cta-choose-experts:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Why Choose XoHub Solutions & Competitive Advantages
================================================== */

/* ==================================================
START: Services FAQ & Final Call-to-Action
================================================== */

/* ----- Container ----- */
#services-faq-final {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.services-faq-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.services-faq-final__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.services-faq-final__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.services-faq-final__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.services-faq-final__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.services-faq-final__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.services-faq-final__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.services-faq-final__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.services-faq-final__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.services-faq-final__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.services-faq-final__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.services-faq-final__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#services-faq-final .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#services-faq-final .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#services-faq-final .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#services-faq-final .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#services-faq-final .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#services-faq-final .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#services-faq-final .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.services-faq-final__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.services-faq-final__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.services-faq-final__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.services-faq-final__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.services-faq-final__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.services-faq-final__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */
.services-faq-final__layout {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 32px;
    margin-bottom: 48px;
    align-items: start;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.services-faq-final__faq {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-faq-final__faq:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.faq-final-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-final-item {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-final-item:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(124, 58, 237, 0.06);
}

.faq-final-item__trigger {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: left;
    transition: all 0.3s ease;
}

.faq-final-item__trigger:hover {
    background: rgba(124, 58, 237, 0.02);
}

.faq-final-item__category {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.08);
    padding: 1px 10px;
    border-radius: 50px;
    white-space: nowrap;
}

.faq-final-item__question {
    font-size: 0.82rem;
}

.faq-final-item__toggle {
    font-size: 0.75rem;
    color: var(--color-gray-mid);
    transition: transform 0.3s ease;
}

.faq-final-item__trigger[aria-expanded="true"] .faq-final-item__toggle {
    transform: rotate(180deg);
}

.faq-final-item__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    transition: max-height 0.4s ease, padding 0.4s ease;
    color: var(--color-gray-mid);
    font-size: 0.82rem;
    line-height: 1.6;
}

.faq-final-item__trigger[aria-expanded="true"] + .faq-final-item__content {
    max-height: 300px;
    padding: 0 16px 14px;
}

.faq-final-item__content p {
    margin: 0 0 8px;
}

.faq-final-item__actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.faq-final-item__vote,
.faq-final-item__copy {
    background: transparent;
    border: none;
    font-size: 0.65rem;
    color: var(--color-gray-mid);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.faq-final-item__vote:hover,
.faq-final-item__copy:hover {
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-purple);
}

/* ============================================================
   ENGAGEMENT MODELS
   ============================================================ */
.services-faq-final__models {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-faq-final__models:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.model-card {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.model-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.model-card__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.model-card__title {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.model-card__desc {
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 2px 0 6px;
    flex: 1;
}

.model-card__best {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: #059669;
    margin-bottom: 6px;
}

.model-card__best i {
    margin-right: 4px;
}

.model-card__btn {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}

.model-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   PROJECT ONBOARDING TIMELINE
   ============================================================ */
.services-faq-final__onboarding {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-faq-final__onboarding:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.onboarding-timeline {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0;
    position: relative;
    padding: 12px 0 8px;
}

.onboarding-timeline::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 2px;
}

.onboarding-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.55rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.onboarding-step:hover .onboarding-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.onboarding-step__label {
    font-size: 0.58rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.onboarding-step__connector {
    display: none;
}

/* ============================================================
   SERVICE GUARANTEES
   ============================================================ */
.services-faq-final__guarantees {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-faq-final__guarantees:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.guarantees-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.guarantee-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.guarantee-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.guarantee-card__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.guarantee-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   FINAL PREMIUM CTA
   ============================================================ */
.services-faq-final__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.final-services-cta {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.final-services-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.final-services-cta__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.final-services-cta__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.final-services-cta__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.final-services-cta__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.final-services-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-services-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-services-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-services-consult {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-services-consult:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.final-services-cta__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.fs-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.fs-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.fs-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.fs-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.fs-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.fs-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.fs-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.fs-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.fs-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.fs-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.faq-final-item__trigger:focus-visible,
.faq-final-item__vote:focus-visible,
.faq-final-item__copy:focus-visible,
.model-card__btn:focus-visible,
.btn-cta-services-start:focus-visible,
.btn-cta-services-consult:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Services FAQ & Final Call-to-Action
================================================== */

/* ==================================================
START: Web Development Hero Banner
================================================== */

/* ----- Container ----- */
#webdev-hero {
    padding: 40px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ----- Background Decorations ----- */
.webdev-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.webdev-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.webdev-hero__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.webdev-hero__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.webdev-hero__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.webdev-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.webdev-hero__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.webdev-hero__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.webdev-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.webdev-hero__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.webdev-hero__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.webdev-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#webdev-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#webdev-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#webdev-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#webdev-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#webdev-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#webdev-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#webdev-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.webdev-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */
.webdev-hero__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.webdev-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.webdev-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.webdev-hero__title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.webdev-hero__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.webdev-hero__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.webdev-hero__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 540px;
    margin: 0;
}

.webdev-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-webdev-start {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-webdev-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-webdev-portfolio {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-webdev-portfolio:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Trust Badges ----- */
.webdev-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
}

.webdev-hero__trust .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 14px 4px 10px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
}

.webdev-hero__trust .trust-badge i {
    color: var(--color-lime);
    font-size: 0.8rem;
}

.webdev-hero__trust .trust-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

/* ----- Hero Highlights ----- */
.webdev-hero__highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
    margin-top: 4px;
}

.highlight-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.highlight-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.highlight-card__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.highlight-card__label {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   HERO VISUAL
   ============================================================ */
.webdev-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 500px;
    margin: 0 auto;
}

/* ----- Browser Mockup ----- */
.visual-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.visual-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06);
}

.visual-card--browser {
    top: 5%;
    left: 10%;
    width: 240px;
    border-radius: 12px;
    overflow: hidden;
    animation: floatCard 5s ease-in-out infinite;
}

.browser-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--color-gray-light);
}

.browser-header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.browser-header .dot--red { background: #ef4444; }
.browser-header .dot--yellow { background: #f59e0b; }
.browser-header .dot--green { background: #059669; }

.browser-url {
    font-size: 0.55rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-left: 4px;
    background: rgba(0, 0, 0, 0.03);
    padding: 1px 8px;
    border-radius: 4px;
}

.browser-body {
    padding: 10px 12px 12px;
}

.browser-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 50px;
    margin-bottom: 6px;
}

.bar {
    flex: 1;
    background: var(--color-purple);
    border-radius: 3px 3px 0 0;
    opacity: 0.4;
    transition: all 0.3s ease;
    min-height: 8px;
}

.bar--1 { opacity: 0.5; }
.bar--2 { opacity: 0.7; background: var(--color-lime); }
.bar--3 { opacity: 0.4; }
.bar--4 { opacity: 0.9; background: var(--color-lime); }
.bar--5 { opacity: 0.6; }
.bar--6 { opacity: 0.4; }

.browser-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.browser-stats .stat:first-child {
    color: #059669;
}

/* ----- Code Block ----- */
.visual-card--code {
    bottom: 25%;
    left: 5%;
    width: 140px;
    padding: 12px 14px;
    border-radius: 12px;
    animation: floatCard 6s ease-in-out infinite 1.5s;
}

.code-block .code-line {
    display: block;
    font-size: 0.55rem;
    font-family: 'Courier New', monospace;
    color: var(--color-gray-mid);
    line-height: 1.6;
    white-space: nowrap;
}

.code-block .code-line:first-child {
    color: var(--color-lime);
    opacity: 0.7;
}
.code-block .code-line:nth-child(2) {
    color: rgba(124, 58, 237, 0.6);
    padding-left: 4px;
}
.code-block .code-line:nth-child(3) {
    color: var(--color-lime);
    padding-left: 4px;
}
.code-block .code-line:last-child {
    color: rgba(0, 0, 0, 0.2);
}

/* ----- Mobile Device ----- */
.visual-card--mobile {
    bottom: 10%;
    right: 8%;
    width: 80px;
    border-radius: 14px;
    padding: 6px 6px 10px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    animation: floatCard 7s ease-in-out infinite 2.5s;
}

.mobile-notch {
    width: 24px;
    height: 4px;
    background: var(--color-gray-light);
    border-radius: 4px;
    margin: 0 auto 6px;
}

.mobile-screen {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding: 4px;
}

.mobile-app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 0.6rem;
    transition: all 0.3s ease;
}

.mobile-app-icon:hover {
    background: rgba(124, 58, 237, 0.12);
    transform: scale(1.05);
}

.mobile-app-icon:nth-child(2) { background: rgba(192, 227, 74, 0.06); color: var(--color-lime-dark); }
.mobile-app-icon:nth-child(4) { background: rgba(192, 227, 74, 0.06); color: var(--color-lime-dark); }

/* ----- Code Icons ----- */
.code-icon {
    position: absolute;
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    color: rgba(124, 58, 237, 0.1);
    font-family: 'Courier New', monospace;
    animation: floatIcon 5s ease-in-out infinite;
}

.code-icon--1 {
    top: 15%;
    right: 15%;
    animation-delay: 0s;
    font-size: 1.4rem;
}

.code-icon--2 {
    bottom: 35%;
    left: 25%;
    animation-delay: 1.8s;
    font-size: 1.2rem;
}

.code-icon--3 {
    top: 55%;
    right: 30%;
    animation-delay: 3.2s;
    font-size: 1rem;
}

/* ----- Connection Lines ----- */
.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ----- Floating Orbs ----- */
.orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    animation: pulseGlow 4s ease-in-out infinite;
}

.orb--1 {
    width: 50px;
    height: 50px;
    top: 20%;
    right: 30%;
    animation-delay: 0s;
}

.orb--2 {
    width: 30px;
    height: 30px;
    bottom: 40%;
    left: 20%;
    background: rgba(192, 227, 74, 0.04);
    border-color: rgba(192, 227, 74, 0.04);
    animation-delay: 1.5s;
}

.orb--3 {
    width: 20px;
    height: 20px;
    top: 60%;
    right: 40%;
    background: rgba(192, 227, 74, 0.03);
    border-color: rgba(192, 227, 74, 0.03);
    animation-delay: 3s;
}

/* ----- Animations ----- */
@keyframes floatCard {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes floatOrb {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-12px) scale(1.05);
    }
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.8;
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(3deg);
    }
}

/* ----- Focus States ----- */
.btn-webdev-start:focus-visible,
.btn-webdev-portfolio:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Web Development Hero Banner
================================================== */

/* ==================================================
START: Why Professional Web Development Matters
================================================== */

/* ----- Container ----- */
#why-webdev-matters {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.why-webdev-matters__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.why-webdev-matters__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.why-webdev-matters__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.why-webdev-matters__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.why-webdev-matters__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.why-webdev-matters__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.why-webdev-matters__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.why-webdev-matters__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.why-webdev-matters__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.why-webdev-matters__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.why-webdev-matters__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.why-webdev-matters__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#why-webdev-matters .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#why-webdev-matters .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#why-webdev-matters .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#why-webdev-matters .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#why-webdev-matters .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#why-webdev-matters .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#why-webdev-matters .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.why-webdev-matters__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.why-webdev-matters__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.why-webdev-matters__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.why-webdev-matters__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.why-webdev-matters__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.why-webdev-matters__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.why-webdev-matters__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.why-webdev-matters__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED INSIGHT BANNER
   ============================================================ */
.why-webdev-matters__banner {
    margin-bottom: 48px;
}

.insight-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.insight-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.insight-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insight-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.insight-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.insight-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.insight-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-discuss {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-discuss:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-consult {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-consult:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.insight-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ib-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ib-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ib-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ib-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ib-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ib-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ib-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ib-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ib-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ib-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   BUSINESS BENEFITS GRID
   ============================================================ */
.why-webdev-matters__benefits {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-webdev-matters__benefits:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.benefit-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.benefit-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.benefit-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.benefit-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.benefit-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 4px 0 6px;
    flex: 1;
}

.benefit-card__outcome {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
}

/* ============================================================
   BUSINESS IMPACT STATISTICS
   ============================================================ */
.why-webdev-matters__stats {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.why-webdev-matters__stats:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.stats-impact-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.impact-stat {
    text-align: center;
    padding: 8px 4px;
    transition: all 0.3s ease;
}

.impact-stat:hover {
    transform: translateY(-3px);
}

.impact-stat__icon {
    font-size: 2rem;
    color: var(--color-purple);
    display: block;
    margin-bottom: 6px;
}

.impact-stat__label {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
    margin-bottom: 2px;
}

.impact-stat__desc {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
}

/* ============================================================
   INTERACTIVE COMPARISON
   ============================================================ */
.why-webdev-matters__comparison {
    max-width: 1000px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.why-webdev-matters__comparison:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.why-webdev-matters__comparison .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    overflow-x: auto;
}

.why-webdev-matters__comparison .comparison-table__header {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.5fr;
    gap: 0;
    border-bottom: 2px solid var(--color-gray-light);
    padding-bottom: 8px;
    margin-bottom: 6px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.why-webdev-matters__comparison .comparison-table__row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.5fr;
    gap: 0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.why-webdev-matters__comparison .comparison-table__row:hover {
    background: rgba(124, 58, 237, 0.02);
}

.why-webdev-matters__comparison .comparison-table__row--highlight-row {
    background: rgba(192, 227, 74, 0.03);
    border-bottom: 2px solid var(--color-lime);
}

.why-webdev-matters__comparison .comparison-table__row--highlight-row:hover {
    background: rgba(192, 227, 74, 0.06);
}

.why-webdev-matters__comparison .comparison-table__cell {
    padding: 4px 8px;
    display: flex;
    align-items: center;
}

.why-webdev-matters__comparison .comparison-table__cell--label {
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.why-webdev-matters__comparison .comparison-table__cell--basic {
    color: var(--color-gray-mid);
}

.why-webdev-matters__comparison .comparison-table__cell--professional {
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
}

.why-webdev-matters__comparison .comparison-table__cell--highlight {
    color: var(--color-lime-dark);
}

.why-webdev-matters__comparison .comparison-table__cell--highlight-gold {
    color: #f59e0b;
}

.why-webdev-matters__comparison .comparison-table__cell--head {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
}

.why-webdev-matters__comparison .comparison-table__cell--basic {
    color: var(--color-gray-mid);
}

.why-webdev-matters__comparison .comparison-table__cell--professional {
    color: var(--color-purple);
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.why-webdev-matters__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.webdev-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.webdev-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.webdev-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.webdev-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.webdev-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.webdev-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-webdev-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-webdev-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-webdev-portfolio {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-webdev-portfolio:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.webdev-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.wd-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.wd-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.wd-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.wd-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.wd-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.wd-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.wd-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.wd-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.wd-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.wd-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-banner-discuss:focus-visible,
.btn-banner-consult:focus-visible,
.btn-cta-webdev-start:focus-visible,
.btn-cta-webdev-portfolio:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Why Professional Web Development Matters
================================================== */

/* ==================================================
START: Web Development Services Overview
================================================== */

/* ----- Container ----- */
#webdev-services {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.webdev-services__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.webdev-services__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.webdev-services__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.webdev-services__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.webdev-services__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.webdev-services__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.webdev-services__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.webdev-services__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.webdev-services__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.webdev-services__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.webdev-services__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.webdev-services__grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#webdev-services .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#webdev-services .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#webdev-services .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#webdev-services .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#webdev-services .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#webdev-services .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#webdev-services .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.webdev-services__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.webdev-services__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.webdev-services__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.webdev-services__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.webdev-services__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.webdev-services__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.webdev-services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 48px;
}

/* ----- Service Card ----- */
.service-card {
    display: flex;
    flex-direction: column;
    padding: 22px 18px 18px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    background: rgba(255, 255, 255, 0.6);
}

.service-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(192, 227, 74, 0.08));
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.service-card:hover .service-card__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    transform: scale(1.05);
}

.service-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    margin-left: auto;
}

.service-card__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.service-card__desc {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0 0 10px;
    flex: 1;
}

.service-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 10px;
}

.feature-chip {
    font-size: 0.58rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 2px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.feature-chip:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

.service-card__ideal {
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.service-card__ideal i {
    color: var(--color-lime);
    font-size: 0.7rem;
}

.service-card__actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.service-btn {
    font-size: 0.68rem;
    font-weight: var(--font-weight-medium);
    padding: 4px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.service-btn--learn {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
}

.service-btn--learn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.service-btn--quote {
    color: var(--color-charcoal);
    background: var(--color-lime);
}

.service-btn--quote:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 227, 74, 0.3);
}

/* ============================================================
   SERVICE SPOTLIGHT
   ============================================================ */
.webdev-services__spotlight {
    margin-bottom: 48px;
}

.spotlight-card {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.spotlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.spotlight-card__badge {
    position: absolute;
    top: 16px;
    left: 24px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-charcoal);
    background: var(--color-lime);
    padding: 2px 14px;
    border-radius: 50px;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

.spotlight-card__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spotlight-card__icon {
    font-size: 2rem;
    color: var(--color-purple);
}

.spotlight-card__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.spotlight-card__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
    max-width: 540px;
}

.spotlight-card__pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 6px 0 2px;
}

.pillar {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 4px 14px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.pillar:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
}

.spotlight-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-spotlight-discuss {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-spotlight-discuss:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-spotlight-process {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-spotlight-process:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Spotlight Visual ----- */
.spotlight-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.sp-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.sp-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.sp-icon--1 { top: 20%; left: 15%; animation: floatIcon 5s ease-in-out infinite; }
.sp-icon--2 { top: 20%; right: 15%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.sp-icon--3 { bottom: 20%; left: 20%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.sp-icon--4 { bottom: 20%; right: 20%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.sp-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.sp-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.sp-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

/* ============================================================
   TECHNOLOGY HIGHLIGHTS
   ============================================================ */
.webdev-services__tech {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-services__tech:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.tech-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 4px 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.tech-item i {
    font-size: 0.9rem;
    color: var(--color-purple);
}

.tech-item:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.04);
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.webdev-services__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.services-cta-bottom {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-cta-bottom:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.services-cta-bottom__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.services-cta-bottom__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.services-cta-bottom__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.services-cta-bottom__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.services-cta-bottom__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-start-project {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-start-project:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-view-portfolio {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-view-portfolio:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Bottom CTA Visual ----- */
.services-cta-bottom__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.services-cta-bottom__visual .s-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.services-cta-bottom__visual .s-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.services-cta-bottom__visual .s-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.services-cta-bottom__visual .s-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.services-cta-bottom__visual .s-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.services-cta-bottom__visual .s-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.services-cta-bottom__visual .s-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.services-cta-bottom__visual .s-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.services-cta-bottom__visual .s-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.services-cta-bottom__visual .s-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.service-btn:focus-visible,
.btn-spotlight-discuss:focus-visible,
.btn-spotlight-process:focus-visible,
.btn-cta-start-project:focus-visible,
.btn-cta-view-portfolio:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Web Development Services Overview
================================================== */

/* ==================================================
START: Our Web Development Process
================================================== */

/* ----- Container ----- */
#webdev-process {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.webdev-process__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.webdev-process__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.webdev-process__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.webdev-process__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.webdev-process__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.webdev-process__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.webdev-process__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.webdev-process__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.webdev-process__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.webdev-process__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.webdev-process__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.webdev-process__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#webdev-process .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#webdev-process .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#webdev-process .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#webdev-process .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#webdev-process .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#webdev-process .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#webdev-process .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.webdev-process__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.webdev-process__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.webdev-process__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.webdev-process__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.webdev-process__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.webdev-process__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.webdev-process__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.webdev-process__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.webdev-process__timeline {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 32px 28px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-process__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 8%;
    right: 8%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
    border-radius: 3px;
}

.timeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.timeline-stage__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-lime);
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.timeline-stage:hover .timeline-stage__dot {
    background: var(--color-lime);
    border-color: var(--color-lime);
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.timeline-stage:hover .stage-number {
    color: var(--color-charcoal);
}

.stage-number {
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.timeline-stage__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stage-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.stage-details {
    display: none;
}

.timeline-stage__connector {
    display: none;
}

/* ============================================================
   PROCESS DETAIL CARDS (Accordion)
   ============================================================ */
.webdev-process__details {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-process__details:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.process-details-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stage-detail-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.stage-detail-card:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(124, 58, 237, 0.06);
}

.stage-detail-card__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: left;
    transition: all 0.3s ease;
}

.stage-detail-card__trigger:hover {
    background: rgba(124, 58, 237, 0.02);
}

.stage-detail-card__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.stage-detail-card__title {
    flex: 1;
    font-size: 0.82rem;
}

.stage-detail-card__toggle {
    font-size: 0.75rem;
    color: var(--color-gray-mid);
    transition: transform 0.3s ease;
}

.stage-detail-card__trigger[aria-expanded="true"] .stage-detail-card__toggle {
    transform: rotate(180deg);
}

.stage-detail-card__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.stage-detail-card__trigger[aria-expanded="true"] + .stage-detail-card__content {
    max-height: 800px;
    padding: 0 18px 18px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px 16px;
}

.detail-group__label {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
    margin-bottom: 4px;
}

.detail-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail-group ul li {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    padding: 2px 0;
    padding-left: 14px;
    position: relative;
    line-height: 1.4;
}

.detail-group ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--color-lime);
    font-size: 0.65rem;
}

.detail-timeline {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    padding: 2px 12px;
    background: rgba(124, 58, 237, 0.04);
    border-radius: 50px;
}

.detail-collab {
    display: block;
    font-size: 0.76rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
}

/* ============================================================
   QUALITY ASSURANCE WORKFLOW
   ============================================================ */
.webdev-process__qa {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-process__qa:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.qa-workflow {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
    padding: 12px 0 8px;
}

.qa-workflow::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.qa-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.qa-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.qa-step:hover .qa-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.qa-step__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.qa-step__icon {
    display: none;
}

.qa-step__arrow {
    display: none;
}

/* ============================================================
   PROJECT COLLABORATION PANEL
   ============================================================ */
.webdev-process__collaboration {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-process__collaboration:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.collab-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.collab-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.collab-card__icon {
    font-size: 1.1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.collab-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.webdev-process__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.process-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.process-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.process-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.process-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.process-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.process-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.process-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-process-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-process-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-process-discovery {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-process-discovery:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.process-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.p-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.p-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.p-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.p-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.p-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.p-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.p-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.p-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.p-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.p-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.stage-detail-card__trigger:focus-visible,
.btn-cta-process-start:focus-visible,
.btn-cta-process-discovery:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Our Web Development Process
================================================== */

/* ==================================================
START: Technologies & Frameworks We Use
================================================== */

/* ----- Container ----- */
#webdev-tech-stack {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.webdev-tech-stack__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.webdev-tech-stack__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.webdev-tech-stack__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.webdev-tech-stack__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.webdev-tech-stack__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.webdev-tech-stack__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.webdev-tech-stack__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.webdev-tech-stack__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.webdev-tech-stack__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.webdev-tech-stack__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.webdev-tech-stack__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.webdev-tech-stack__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#webdev-tech-stack .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#webdev-tech-stack .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#webdev-tech-stack .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#webdev-tech-stack .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#webdev-tech-stack .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#webdev-tech-stack .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#webdev-tech-stack .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.webdev-tech-stack__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.webdev-tech-stack__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.webdev-tech-stack__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.webdev-tech-stack__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.webdev-tech-stack__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.webdev-tech-stack__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.webdev-tech-stack__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.webdev-tech-stack__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   TECHNOLOGY TABS
   ============================================================ */
.webdev-tech-stack__tabs {
    max-width: 850px;
    margin: 0 auto 36px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-tech-stack__tabs:hover {
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.04);
}

.tech-tab {
    padding: 6px 16px;
    border: none;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tech-tab:hover {
    color: var(--color-charcoal);
    background: rgba(0, 0, 0, 0.02);
}

.tech-tab--active {
    background: var(--color-purple);
    color: var(--color-white);
}

.tech-tab--active:hover {
    background: #5b2fbf;
    color: var(--color-white);
}

/* ============================================================
   TECHNOLOGY GRID
   ============================================================ */
.webdev-tech-stack__grid {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-tech-stack__grid:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.tech-category {
    margin-bottom: 28px;
}

.tech-category:last-child {
    margin-bottom: 0;
}

.tech-category__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    margin: 0 0 10px;
    letter-spacing: 0.02em;
}

.tech-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 14px;
}

.tech-card {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.tech-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.tech-card__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.tech-card__name {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.tech-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
    margin: 2px 0 4px;
    flex: 1;
}

.tech-card__benefit {
    font-size: 0.62rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
}

/* ============================================================
   ARCHITECTURE FLOW
   ============================================================ */
.webdev-tech-stack__architecture {
    max-width: 1000px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.webdev-tech-stack__architecture:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.architecture-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.arch-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.arch-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.arch-node:hover .arch-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.arch-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.arch-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.arch-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.arch-node--end .arch-node__connector {
    display: none;
}

/* ============================================================
   DEVELOPMENT PRINCIPLES
   ============================================================ */
.webdev-tech-stack__principles {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-tech-stack__principles:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.principle-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.principle-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.principle-card__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.principle-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   TECHNOLOGY METRICS
   ============================================================ */
.webdev-tech-stack__metrics {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
}

.webdev-tech-stack__metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.webdev-tech-stack__metrics .metric-stat {
    text-align: center;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.webdev-tech-stack__metrics .metric-stat:hover {
    transform: translateY(-3px);
}

.webdev-tech-stack__metrics .metric-stat__number {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.webdev-tech-stack__metrics .metric-stat__number .stat-number {
    display: inline-block;
}

.webdev-tech-stack__metrics .metric-stat__number .stat-suffix {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-left: 2px;
}

.webdev-tech-stack__metrics .metric-stat__number .stat-label--modern {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime-dark);
}

.webdev-tech-stack__metrics .metric-stat__number .stat-label--secure {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
}

.webdev-tech-stack__metrics .metric-stat__number .stat-label--optimized {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: #2563eb;
}

.webdev-tech-stack__metrics .metric-stat__number .stat-label--scalable {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: #059669;
}

.webdev-tech-stack__metrics .metric-stat__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    margin: 0;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.webdev-tech-stack__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.tech-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tech-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.tech-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tech-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tech-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.tech-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.tech-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-tech-discuss {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-tech-discuss:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-tech-architect {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-tech-architect:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.tech-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.t-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.t-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.t-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.t-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.t-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.t-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.t-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.t-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.t-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.t-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.tech-tab:focus-visible,
.btn-cta-tech-discuss:focus-visible,
.btn-cta-tech-architect:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Technologies & Frameworks We Use
================================================== */

/* ==================================================
START: Types of Websites & Web Applications We Build
================================================== */

/* ----- Container ----- */
#webdev-solutions {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.webdev-solutions__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.webdev-solutions__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.webdev-solutions__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.webdev-solutions__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.webdev-solutions__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.webdev-solutions__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.webdev-solutions__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.webdev-solutions__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.webdev-solutions__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.webdev-solutions__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.webdev-solutions__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.webdev-solutions__grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#webdev-solutions .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#webdev-solutions .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#webdev-solutions .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#webdev-solutions .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#webdev-solutions .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#webdev-solutions .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#webdev-solutions .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.webdev-solutions__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.webdev-solutions__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.webdev-solutions__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.webdev-solutions__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.webdev-solutions__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.webdev-solutions__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.webdev-solutions__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.webdev-solutions__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED SOLUTION BANNER
   ============================================================ */
.webdev-solutions__banner {
    margin-bottom: 48px;
}

.solution-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.solution-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.solution-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.solution-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.solution-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.solution-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.solution-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-solutions-discuss {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-solutions-discuss:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-solutions-explore {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-solutions-explore:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.solution-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.sb-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.sb-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.sb-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.sb-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.sb-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.sb-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.sb-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.sb-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.sb-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.sb-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   SOLUTIONS GRID
   ============================================================ */
.webdev-solutions__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 48px;
}

/* ----- Solution Card ----- */
.solution-card {
    display: flex;
    flex-direction: column;
    padding: 22px 18px 18px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.solution-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    background: rgba(255, 255, 255, 0.6);
}

.solution-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.solution-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(192, 227, 74, 0.08));
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.solution-card:hover .solution-card__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    transform: scale(1.05);
}

.solution-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    margin-left: auto;
}

.solution-card__title {
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.solution-card__desc {
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0 0 8px;
    flex: 1;
}

.solution-card__ideal {
    font-size: 0.62rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 8px;
}

.solution-card__ideal i {
    margin-right: 4px;
    color: var(--color-lime);
}

.solution-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 10px;
}

.feat-chip {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 2px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.feat-chip:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

.solution-card__actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.sol-btn {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    padding: 4px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sol-btn--learn {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
}

.sol-btn--learn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.sol-btn--quote {
    color: var(--color-charcoal);
    background: var(--color-lime);
}

.sol-btn--quote:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 227, 74, 0.3);
}

/* ============================================================
   BUSINESS USE CASES
   ============================================================ */
.webdev-solutions__use-cases {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-solutions__use-cases:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.usecases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.usecase-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.usecase-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.usecase-card__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.usecase-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   SOLUTION BENEFITS
   ============================================================ */
.webdev-solutions__benefits {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-solutions__benefits:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.benefit-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.benefit-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.benefit-card__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.benefit-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.webdev-solutions__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.solutions-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.solutions-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.solutions-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.solutions-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.solutions-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.solutions-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.solutions-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-solutions-consult {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-solutions-consult:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-solutions-experts {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-solutions-experts:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.solutions-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.s-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.s-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.s-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.s-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.s-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.s-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.s-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.s-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.s-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.s-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.sol-btn:focus-visible,
.btn-banner-solutions-discuss:focus-visible,
.btn-banner-solutions-explore:focus-visible,
.btn-cta-solutions-consult:focus-visible,
.btn-cta-solutions-experts:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Types of Websites & Web Applications We Build
================================================== */

/* ==================================================
START: Features Included in Every Website We Build
================================================== */

/* ----- Container ----- */
#webdev-features {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.webdev-features__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.webdev-features__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.webdev-features__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.webdev-features__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.webdev-features__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.webdev-features__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.webdev-features__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.webdev-features__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.webdev-features__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.webdev-features__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.webdev-features__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.webdev-features__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#webdev-features .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#webdev-features .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#webdev-features .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#webdev-features .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#webdev-features .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#webdev-features .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#webdev-features .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.webdev-features__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.webdev-features__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.webdev-features__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.webdev-features__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.webdev-features__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.webdev-features__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.webdev-features__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.webdev-features__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED QUALITY BANNER
   ============================================================ */
.webdev-features__banner {
    margin-bottom: 48px;
}

.quality-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.quality-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.quality-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quality-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quality-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.quality-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.quality-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-features-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-features-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-features-discuss {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-features-discuss:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.quality-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.qb-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.qb-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.qb-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.qb-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.qb-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.qb-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.qb-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.qb-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.qb-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.qb-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   FEATURE GRID
   ============================================================ */
.webdev-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 18px;
    margin-bottom: 48px;
}

.feature-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    position: relative;
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    background: rgba(255, 255, 255, 0.6);
}

.feature-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.feature-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.feature-card__benefit {
    font-size: 0.68rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime-dark);
    margin: 2px 0 4px;
}

.feature-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    flex: 1;
}

.feature-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 1px 10px;
    border-radius: 50px;
}

/* ============================================================
   DEVELOPMENT STANDARDS PANEL
   ============================================================ */
.webdev-features__standards {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-features__standards:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.standards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.standard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.standard-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.standard-card__icon {
    font-size: 1.2rem;
    color: var(--color-lime);
    margin-bottom: 4px;
}

.standard-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.standard-card__desc {
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
    margin-top: 2px;
}

/* ============================================================
   QUALITY COMMITMENT BANNER
   ============================================================ */
.webdev-features__commitment {
    max-width: 1000px;
    margin: 0 auto 40px;
}

.commitment-banner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 32px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.commitment-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.06);
}

.commitment-banner__content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.commitment-banner__icon {
    font-size: 2.4rem;
    color: var(--color-lime);
    flex-shrink: 0;
    margin-top: 2px;
}

.commitment-banner__title {
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}

.commitment-banner__desc {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.commitment-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-left: 64px;
}

.btn-commitment-maintenance {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-commitment-maintenance:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-commitment-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-commitment-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.webdev-features__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.features-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.features-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.features-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.features-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.features-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.features-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.features-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-features-proposal {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-features-proposal:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-features-discovery {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-features-discovery:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.features-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.f-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.f-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.f-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.f-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.f-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.f-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.f-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.f-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.f-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.f-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-banner-features-start:focus-visible,
.btn-banner-features-discuss:focus-visible,
.btn-commitment-maintenance:focus-visible,
.btn-commitment-contact:focus-visible,
.btn-cta-features-proposal:focus-visible,
.btn-cta-features-discovery:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Features Included in Every Website We Build
================================================== */

/* ==================================================
START: Industries We Build Websites For
================================================== */

/* ----- Container ----- */
#webdev-industries {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.webdev-industries__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.webdev-industries__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.webdev-industries__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.webdev-industries__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.webdev-industries__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.webdev-industries__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.webdev-industries__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.webdev-industries__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.webdev-industries__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.webdev-industries__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.webdev-industries__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.webdev-industries__grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#webdev-industries .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#webdev-industries .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#webdev-industries .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#webdev-industries .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#webdev-industries .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#webdev-industries .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#webdev-industries .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.webdev-industries__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.webdev-industries__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.webdev-industries__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.webdev-industries__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.webdev-industries__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.webdev-industries__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.webdev-industries__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.webdev-industries__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED INDUSTRY BANNER
   ============================================================ */
.webdev-industries__banner {
    margin-bottom: 48px;
}

.industry-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industry-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.industry-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.industry-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.industry-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.industry-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.industry-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-industry-discuss {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-industry-discuss:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-industry-explore {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-industry-explore:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.industry-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ib-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ib-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ib-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ib-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ib-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ib-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ib-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ib-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ib-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ib-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   INDUSTRY SOLUTIONS GRID
   ============================================================ */
.webdev-industries__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 48px;
}

/* ----- Industry Solution Card ----- */
.industry-solution-card {
    display: flex;
    flex-direction: column;
    padding: 20px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.industry-solution-card:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
    background: rgba(255, 255, 255, 0.6);
}

.industry-solution-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.industry-solution-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(192, 227, 74, 0.08));
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.industry-solution-card:hover .industry-solution-card__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    transform: scale(1.05);
}

.industry-solution-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    margin-left: auto;
}

.industry-solution-card__title {
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.industry-solution-card__desc {
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0 0 8px;
    flex: 1;
}

.industry-solution-card__needs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 6px;
}

.need-tag {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 2px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.need-tag:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

.industry-solution-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 10px;
}

.ind-feat {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    padding: 1px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.ind-feat:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.industry-solution-card__actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.ind-btn {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    padding: 4px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ind-btn--learn {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
}

.ind-btn--learn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.ind-btn--consult {
    color: var(--color-charcoal);
    background: var(--color-lime);
}

.ind-btn--consult:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 227, 74, 0.3);
}

/* ============================================================
   INDUSTRY CHALLENGES & SOLUTIONS
   ============================================================ */
.webdev-industries__challenges {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-industries__challenges:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.challenges-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 16px;
}

.challenge-solution {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.challenge-solution:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.challenge-solution__challenge,
.challenge-solution__solution {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cs-icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.cs-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.challenge-solution__solution .cs-icon {
    color: var(--color-lime);
}

.challenge-solution__solution .cs-label {
    color: var(--color-purple);
}

.cs-arrow {
    font-size: 0.7rem;
    color: var(--color-gray-mid);
    margin: 2px 0;
}

/* ============================================================
   BUSINESS VALUE HIGHLIGHTS
   ============================================================ */
.webdev-industries__values {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 24px 28px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-industries__values:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
}

.value-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.value-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.value-card__icon {
    font-size: 1rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.value-card__label {
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.webdev-industries__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.industries-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industries-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.industries-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.industries-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.industries-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.industries-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.industries-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-industries-consult {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-industries-consult:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-industries-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-industries-start:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.industries-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.i-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.i-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.i-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.i-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.i-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.i-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.i-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.i-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.i-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.i-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.ind-btn:focus-visible,
.btn-banner-industry-discuss:focus-visible,
.btn-banner-industry-explore:focus-visible,
.btn-cta-industries-consult:focus-visible,
.btn-cta-industries-start:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Industries We Build Websites For
================================================== */

/* ==================================================
START: Portfolio & Case Studies Preview
================================================== */

/* ----- Container ----- */
#webdev-portfolio-preview {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.webdev-portfolio-preview__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.webdev-portfolio-preview__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.webdev-portfolio-preview__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.webdev-portfolio-preview__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.webdev-portfolio-preview__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.webdev-portfolio-preview__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.webdev-portfolio-preview__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.webdev-portfolio-preview__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.webdev-portfolio-preview__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.webdev-portfolio-preview__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.webdev-portfolio-preview__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.webdev-portfolio-preview__grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#webdev-portfolio-preview .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#webdev-portfolio-preview .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#webdev-portfolio-preview .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#webdev-portfolio-preview .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#webdev-portfolio-preview .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#webdev-portfolio-preview .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#webdev-portfolio-preview .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.webdev-portfolio-preview__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.webdev-portfolio-preview__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.webdev-portfolio-preview__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.webdev-portfolio-preview__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.webdev-portfolio-preview__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.webdev-portfolio-preview__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.webdev-portfolio-preview__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.webdev-portfolio-preview__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED PROJECT SHOWCASE
   ============================================================ */
.webdev-portfolio-preview__featured {
    margin-bottom: 48px;
}

.featured-project {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-project:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.featured-project__image {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-project__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.featured-project__placeholder .placeholder-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.15);
}

.featured-project__placeholder .placeholder-label {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.featured-project__placeholder .placeholder-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.featured-project__placeholder .ps {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.featured-project__placeholder .ps--1 {
    width: 160px;
    height: 160px;
    top: -50px;
    right: -30px;
}

.featured-project__placeholder .ps--2 {
    width: 120px;
    height: 120px;
    bottom: -40px;
    left: -20px;
}

.featured-project__placeholder .ps--3 {
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.featured-project__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.badge-category,
.badge-industry {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 14px;
    border-radius: 50px;
}

.badge-category {
    color: var(--color-charcoal);
    background: var(--color-lime);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.2);
}

.badge-industry {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.featured-project__status {
    position: absolute;
    bottom: 14px;
    right: 14px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 3px 14px;
    border-radius: 50px;
    z-index: 5;
}

.featured-project__content {
    padding: 32px 36px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.featured-project__client {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.featured-project__title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.featured-project__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin: 2px 0;
}

.featured-project__details .detail-block__label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
}

.featured-project__details .detail-block__text {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 2px 0 0;
}

.featured-project__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 2px 0;
}

.featured-project__tech .tech-badge {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    padding: 2px 12px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.featured-project__tech .tech-badge:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.featured-project__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-featured-view {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-featured-view:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-featured-case {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-featured-case:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   PROJECT PREVIEW CARDS
   ============================================================ */
.webdev-portfolio-preview__cards {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-portfolio-preview__cards:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.project-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.project-card {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(192, 227, 74, 0.04);
}

.project-card__image {
    position: relative;
    padding: 20px 16px 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.project-card__placeholder {
    font-size: 1.8rem;
    color: var(--color-purple);
    opacity: 0.3;
}

.project-card__category {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.08);
    padding: 1px 12px;
    border-radius: 50px;
}

.project-card__body {
    padding: 12px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.3;
}

.project-card__industry {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.project-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 2px 0 4px;
    flex: 1;
}

.project-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 4px;
    margin: 2px 0 6px;
}

.p-tech {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    padding: 1px 8px;
    border-radius: 50px;
    cursor: default;
}

.p-tech:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
}

.project-card__btn {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 3px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
    margin-top: auto;
}

.project-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   CASE STUDY HIGHLIGHTS
   ============================================================ */
.webdev-portfolio-preview__case-studies {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-portfolio-preview__case-studies:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.case-study-card {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    align-items: flex-start;
}

.case-study-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.case-study-card__number {
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-lime);
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.case-study-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.case-study-card__title {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.case-study-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
}

.case-study-card__solution {
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-purple);
    line-height: 1.4;
}

.case-study-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 4px;
    margin-top: 2px;
}

.cs-tech {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 1px 8px;
    border-radius: 50px;
    cursor: default;
}

.cs-tech:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
}

.case-study-card__btn {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 2px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
    margin-top: 2px;
}

.case-study-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.webdev-portfolio-preview__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.portfolio-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.portfolio-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portfolio-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.portfolio-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.portfolio-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.portfolio-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-portfolio-view {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-portfolio-view:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-portfolio-cases {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-portfolio-cases:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.portfolio-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.p-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.p-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.p-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.p-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.p-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.p-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.p-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.p-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.p-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.p-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-featured-view:focus-visible,
.btn-featured-case:focus-visible,
.project-card__btn:focus-visible,
.case-study-card__btn:focus-visible,
.btn-cta-portfolio-view:focus-visible,
.btn-cta-portfolio-cases:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Portfolio & Case Studies Preview
================================================== */

/* ==================================================
START: Web Development FAQ & Final CTA
================================================== */

/* ----- Container ----- */
#webdev-faq-final {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.webdev-faq-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.webdev-faq-final__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.webdev-faq-final__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.webdev-faq-final__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.webdev-faq-final__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.webdev-faq-final__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.webdev-faq-final__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.webdev-faq-final__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.webdev-faq-final__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.webdev-faq-final__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.webdev-faq-final__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.webdev-faq-final__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#webdev-faq-final .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#webdev-faq-final .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#webdev-faq-final .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#webdev-faq-final .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#webdev-faq-final .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#webdev-faq-final .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#webdev-faq-final .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.webdev-faq-final__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.webdev-faq-final__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.webdev-faq-final__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.webdev-faq-final__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.webdev-faq-final__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.webdev-faq-final__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.webdev-faq-final__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.webdev-faq-final__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */
.webdev-faq-final__layout {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 32px;
    margin-bottom: 48px;
    align-items: start;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.webdev-faq-final__faq {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.webdev-faq-final__faq:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-item {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(124, 58, 237, 0.06);
}

.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: left;
    transition: all 0.3s ease;
}

.faq-item__trigger:hover {
    background: rgba(124, 58, 237, 0.02);
}

.faq-item__question {
    flex: 1;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.faq-item__toggle {
    font-size: 0.75rem;
    color: var(--color-gray-mid);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item__trigger[aria-expanded="true"] .faq-item__toggle {
    transform: rotate(180deg);
}

.faq-item__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    transition: max-height 0.4s ease, padding 0.4s ease;
    color: var(--color-gray-mid);
    font-size: 0.82rem;
    line-height: 1.6;
}

.faq-item__trigger[aria-expanded="true"] + .faq-item__content {
    max-height: 400px;
    padding: 0 18px 18px;
}

.faq-item__content p {
    margin: 0 0 8px;
}

.faq-item__actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.faq-item__vote,
.faq-item__copy {
    background: transparent;
    border: none;
    font-size: 0.65rem;
    color: var(--color-gray-mid);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.faq-item__vote:hover,
.faq-item__copy:hover {
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-purple);
}

/* ============================================================
   QUICK CONTACT PANEL
   ============================================================ */
.webdev-faq-final__contact {
    position: sticky;
    top: 100px;
}

.contact-panel {
    display: flex;
    flex-direction: column;
    padding: 28px 28px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.contact-panel__icon {
    font-size: 2.2rem;
    color: var(--color-lime);
    margin-bottom: 8px;
}

.contact-panel__title {
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.contact-panel__desc {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0 0 16px;
}

.contact-panel__features {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
}

.feature-item i {
    color: var(--color-lime);
    font-size: 0.7rem;
}

.contact-panel__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-contact-proposal {
    padding: 10px 24px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    width: 100%;
    text-align: center;
}

.btn-contact-proposal:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

.btn-contact-consult {
    padding: 10px 24px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
}

.btn-contact-consult:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   FINAL CONVERSION BANNER
   ============================================================ */
.webdev-faq-final__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.final-conversion-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.final-conversion-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.final-conversion-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.final-conversion-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.final-conversion-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.final-conversion-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.final-conversion-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-final-start {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-final-start:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-final-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-final-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.final-conversion-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.fc-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.fc-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.fc-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.fc-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.fc-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.fc-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.fc-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.fc-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.fc-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.fc-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.faq-item__trigger:focus-visible,
.faq-item__vote:focus-visible,
.faq-item__copy:focus-visible,
.btn-contact-proposal:focus-visible,
.btn-contact-consult:focus-visible,
.btn-cta-final-start:focus-visible,
.btn-cta-final-contact:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Web Development FAQ & Final CTA
================================================== */

/* ==================================================
START: Privacy Policy Hero Banner
================================================== */

/* ----- Container ----- */
#privacy-hero {
    padding: 40px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ----- Background Decorations ----- */
.privacy-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.privacy-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.privacy-hero__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.privacy-hero__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.privacy-hero__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.privacy-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.privacy-hero__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.privacy-hero__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.privacy-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.privacy-hero__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.privacy-hero__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.privacy-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#privacy-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#privacy-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#privacy-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#privacy-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#privacy-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#privacy-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#privacy-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.privacy-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */
.privacy-hero__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.privacy-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.privacy-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.privacy-hero__title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.privacy-hero__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.privacy-hero__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.privacy-hero__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 540px;
    margin: 0;
}

/* ----- Document Metadata ----- */
.privacy-hero__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.meta-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.meta-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.meta-card__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.meta-card__label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.meta-card__value {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ----- Hero Actions ----- */
.privacy-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-privacy-contact {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-privacy-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-privacy-home {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-privacy-home:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Trust Badges ----- */
.privacy-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
}

.privacy-hero__trust .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 14px 4px 10px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
}

.privacy-hero__trust .trust-badge i {
    color: var(--color-lime);
    font-size: 0.8rem;
}

.privacy-hero__trust .trust-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

/* ============================================================
   HERO VISUAL
   ============================================================ */
.privacy-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}

/* ----- Glass Shield ----- */
.glass-shield {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 200px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 30px 30px 50px 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: floatShield 6s ease-in-out infinite;
    z-index: 3;
}

.glass-shield .shield-icon {
    font-size: 4.5rem;
    color: rgba(124, 58, 237, 0.15);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.glass-shield .lock-icon {
    font-size: 2.2rem;
    color: var(--color-lime);
    position: relative;
    z-index: 2;
    animation: pulseLock 3s ease-in-out infinite;
    margin-top: 10px;
}

.shield-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 30px 30px 50px 50px;
    border: 2px solid rgba(192, 227, 74, 0.15);
    animation: pulseRing 4s ease-in-out infinite;
}

@keyframes floatShield {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-12px);
    }
}

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

@keyframes pulseRing {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.1;
    }
}

/* ----- Data Nodes ----- */
.data-node {
    position: absolute;
    color: var(--color-purple);
    opacity: 0.25;
    font-size: 0.5rem;
    animation: floatNode 5s ease-in-out infinite;
}

.data-node--1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
    color: var(--color-lime);
}
.data-node--2 {
    top: 15%;
    right: 15%;
    animation-delay: 1.2s;
}
.data-node--3 {
    bottom: 25%;
    left: 8%;
    animation-delay: 2.4s;
}
.data-node--4 {
    bottom: 20%;
    right: 10%;
    animation-delay: 3.6s;
    color: var(--color-lime);
}
.data-node--5 {
    top: 50%;
    left: 5%;
    animation-delay: 0.6s;
}

@keyframes floatNode {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 0.5;
    }
}

/* ----- Connection Lines ----- */
.visual-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ----- Floating Orbs ----- */
.orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    animation: pulseGlow 4s ease-in-out infinite;
}

.orb--1 {
    width: 60px;
    height: 60px;
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.orb--2 {
    width: 40px;
    height: 40px;
    bottom: 30%;
    left: 15%;
    background: rgba(192, 227, 74, 0.04);
    border-color: rgba(192, 227, 74, 0.04);
    animation-delay: 1.5s;
}

.orb--3 {
    width: 25px;
    height: 25px;
    top: 55%;
    right: 30%;
    background: rgba(192, 227, 74, 0.03);
    border-color: rgba(192, 227, 74, 0.03);
    animation-delay: 3s;
}

/* ----- Focus States ----- */
.btn-privacy-contact:focus-visible,
.btn-privacy-home:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Privacy Policy Hero Banner
================================================== */

/* ==================================================
START: Privacy Overview & Our Commitment
================================================== */

/* ----- Container ----- */
#privacy-overview {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.privacy-overview__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.privacy-overview__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.privacy-overview__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.privacy-overview__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.privacy-overview__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.privacy-overview__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.privacy-overview__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.privacy-overview__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.privacy-overview__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.privacy-overview__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.privacy-overview__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.privacy-overview__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#privacy-overview .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#privacy-overview .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#privacy-overview .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#privacy-overview .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#privacy-overview .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#privacy-overview .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#privacy-overview .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.privacy-overview__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.privacy-overview__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.privacy-overview__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.privacy-overview__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.privacy-overview__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.privacy-overview__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.privacy-overview__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.privacy-overview__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED COMMITMENT BANNER
   ============================================================ */
.privacy-overview__banner {
    margin-bottom: 48px;
}

.commitment-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.commitment-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.commitment-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.commitment-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.commitment-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.commitment-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.commitment-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-view {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-view:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.commitment-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.cb-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.cb-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.cb-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.cb-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.cb-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.cb-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.cb-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.cb-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.cb-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.cb-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   PRIVACY PRINCIPLES GRID
   ============================================================ */
.privacy-overview__principles {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-overview__principles:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.principle-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.principle-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.principle-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.principle-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.principle-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
}

/* ============================================================
   QUICK SUMMARY CARDS
   ============================================================ */
.privacy-overview__summary {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-overview__summary:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.summary-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.summary-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.summary-card__icon {
    font-size: 1.3rem;
    color: var(--color-lime);
    margin-bottom: 6px;
}

.summary-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.summary-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   INFORMATION BANNER
   ============================================================ */
.privacy-overview__info-banner {
    max-width: 900px;
    margin: 0 auto 0;
}

.info-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 20px;
}

.info-banner:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.info-banner__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.info-banner__icon {
    font-size: 2.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.info-banner__title {
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.info-banner__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.info-banner__actions {
    flex-shrink: 0;
}

.btn-banner-read-policy {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    white-space: nowrap;
}

.btn-banner-read-policy:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.4);
}

/* ----- Focus States ----- */
.btn-banner-contact:focus-visible,
.btn-banner-view:focus-visible,
.btn-banner-read-policy:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Privacy Overview & Our Commitment
================================================== */

/* ==================================================
START: Information We Collect
================================================== */

/* ----- Container ----- */
#privacy-collect {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.privacy-collect__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.privacy-collect__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.privacy-collect__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.privacy-collect__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.privacy-collect__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.privacy-collect__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.privacy-collect__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.privacy-collect__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.privacy-collect__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.privacy-collect__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.privacy-collect__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.privacy-collect__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#privacy-collect .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#privacy-collect .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#privacy-collect .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#privacy-collect .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#privacy-collect .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#privacy-collect .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#privacy-collect .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.privacy-collect__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.privacy-collect__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.privacy-collect__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.privacy-collect__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.privacy-collect__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.privacy-collect__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.privacy-collect__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.privacy-collect__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED INFORMATION BANNER
   ============================================================ */
.privacy-collect__banner {
    margin-bottom: 48px;
}

.info-banner-collect {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.info-banner-collect:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.info-banner-collect__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-banner-collect__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.info-banner-collect__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.info-banner-collect__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.info-banner-collect__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-collect-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-collect-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-collect-question {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-collect-question:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.info-banner-collect__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ic-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ic-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ic-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ic-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ic-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ic-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ic-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ic-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ic-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ic-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   COLLECTION CATEGORIES GRID
   ============================================================ */
.privacy-collect__categories {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-collect__categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.category-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.category-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.category-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.category-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.category-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 4px 0 8px;
    flex: 1;
}

.category-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 4px;
}

.cat-chip {
    font-size: 0.58rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 2px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.cat-chip:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

.category-card__link {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    text-decoration: none;
    margin-top: 4px;
    display: inline-block;
    transition: all 0.3s ease;
}

.category-card__link:hover {
    color: var(--color-lime-dark);
    transform: translateX(4px);
}

/* ============================================================
   COLLECTION SOURCES TIMELINE
   ============================================================ */
.privacy-collect__sources {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-collect__sources:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.sources-timeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
    padding: 12px 0 8px;
}

.sources-timeline::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.source-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.source-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.source-step:hover .source-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.source-step__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.source-step__desc {
    font-size: 0.58rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
    margin-top: 2px;
}

.source-step__connector {
    display: none;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.privacy-collect__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner__badge {
    flex-shrink: 0;
}

.notice-banner__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-collect-contact:focus-visible,
.btn-banner-collect-question:focus-visible,
.category-card__link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Information We Collect
================================================== */

/* ==================================================
START: How We Use Your Information
================================================== */

/* ----- Container ----- */
#privacy-use {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.privacy-use__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.privacy-use__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.privacy-use__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.privacy-use__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.privacy-use__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.privacy-use__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.privacy-use__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.privacy-use__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.privacy-use__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.privacy-use__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.privacy-use__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.privacy-use__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#privacy-use .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#privacy-use .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#privacy-use .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#privacy-use .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#privacy-use .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#privacy-use .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#privacy-use .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.privacy-use__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.privacy-use__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.privacy-use__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.privacy-use__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.privacy-use__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.privacy-use__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.privacy-use__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.privacy-use__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED PURPOSE BANNER
   ============================================================ */
.privacy-use__banner {
    margin-bottom: 48px;
}

.purpose-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.purpose-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.purpose-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.purpose-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.purpose-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.purpose-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.purpose-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-use-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-use-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-use-security {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-use-security:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.purpose-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.pu-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.pu-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.pu-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.pu-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.pu-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.pu-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.pu-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.pu-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.pu-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.pu-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   PURPOSE CARDS GRID
   ============================================================ */
.privacy-use__purposes {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-use__purposes:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.purposes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.purpose-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.purpose-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.purpose-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.purpose-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.purpose-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 4px 0 6px;
    flex: 1;
}

.purpose-card__benefit {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
}

/* ============================================================
   INFORMATION FLOW DIAGRAM
   ============================================================ */
.privacy-use__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.privacy-use__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.flow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.flow-node:hover .flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.flow-node--end .flow-node__connector {
    display: none;
}

/* ============================================================
   COMMITMENT BANNER
   ============================================================ */
.privacy-use__commitment {
    max-width: 900px;
    margin: 0 auto 0;
}

.commitment-banner-use {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.commitment-banner-use:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.commitment-banner-use__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.commitment-banner-use__icon {
    font-size: 2.2rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.commitment-banner-use__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.commitment-banner-use__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.commitment-banner-use__badge {
    flex-shrink: 0;
}

.commitment-banner-use__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-use-contact:focus-visible,
.btn-banner-use-security:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: How We Use Your Information
================================================== */

/* ==================================================
START: Cookies & Tracking Technologies
================================================== */

/* ----- Container ----- */
#privacy-cookies {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.privacy-cookies__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.privacy-cookies__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.privacy-cookies__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.privacy-cookies__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.privacy-cookies__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.privacy-cookies__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.privacy-cookies__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.privacy-cookies__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.privacy-cookies__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.privacy-cookies__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.privacy-cookies__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.privacy-cookies__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#privacy-cookies .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#privacy-cookies .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#privacy-cookies .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#privacy-cookies .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#privacy-cookies .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#privacy-cookies .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#privacy-cookies .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.privacy-cookies__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.privacy-cookies__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.privacy-cookies__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.privacy-cookies__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.privacy-cookies__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.privacy-cookies__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.privacy-cookies__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.privacy-cookies__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED COOKIES BANNER
   ============================================================ */
.privacy-cookies__banner {
    margin-bottom: 48px;
}

.cookies-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookies-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.cookies-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cookies-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cookies-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.cookies-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.cookies-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-cookies-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-cookies-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-cookies-privacy {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-cookies-privacy:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.cookies-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ck-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ck-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ck-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ck-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ck-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ck-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ck-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ck-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ck-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ck-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   COOKIE CATEGORIES GRID
   ============================================================ */
.privacy-cookies__categories {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-cookies__categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.cookie-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.cookie-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    position: relative;
}

.cookie-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.cookie-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.cookie-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.cookie-card__purpose {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 4px 0 8px;
    flex: 1;
}

.cookie-card__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 8px;
}

.cookie-chip {
    font-size: 0.58rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 2px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.cookie-chip:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

.cookie-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
}

.cookie-card__badge--essential {
    color: #059669;
    background: rgba(5, 150, 105, 0.06);
    border: 1px solid rgba(5, 150, 105, 0.12);
}

.cookie-card__badge--optional {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.06);
}

/* ============================================================
   COOKIE LIFECYCLE DIAGRAM
   ============================================================ */
.privacy-cookies__lifecycle {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.privacy-cookies__lifecycle:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.lifecycle-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.lifecycle-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.lifecycle-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.lifecycle-node:hover .lifecycle-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.lifecycle-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.lifecycle-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.lifecycle-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.lifecycle-node--end .lifecycle-node__connector {
    display: none;
}

/* ============================================================
   MANAGING PREFERENCES PANEL
   ============================================================ */
.privacy-cookies__preferences {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-cookies__preferences:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.preferences-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 14px;
}

.preference-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.preference-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.preference-card__icon {
    font-size: 1.2rem;
    color: var(--color-lime);
    margin-bottom: 4px;
}

.preference-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.preference-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   BOTTOM INFORMATION BANNER
   ============================================================ */
.privacy-cookies__info {
    max-width: 900px;
    margin: 0 auto 0;
}

.info-banner-cookies {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.info-banner-cookies:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.info-banner-cookies__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.info-banner-cookies__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.info-banner-cookies__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.info-banner-cookies__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.info-banner-cookies__badge {
    flex-shrink: 0;
}

.info-banner-cookies__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-cookies-contact:focus-visible,
.btn-banner-cookies-privacy:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Cookies & Tracking Technologies
================================================== */

/* ==================================================
START: Data Sharing & Third-Party Services
================================================== */

/* ----- Container ----- */
#privacy-sharing {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.privacy-sharing__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.privacy-sharing__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.privacy-sharing__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.privacy-sharing__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.privacy-sharing__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.privacy-sharing__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.privacy-sharing__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.privacy-sharing__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.privacy-sharing__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.privacy-sharing__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.privacy-sharing__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.privacy-sharing__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#privacy-sharing .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#privacy-sharing .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#privacy-sharing .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#privacy-sharing .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#privacy-sharing .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#privacy-sharing .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#privacy-sharing .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.privacy-sharing__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.privacy-sharing__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.privacy-sharing__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.privacy-sharing__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.privacy-sharing__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.privacy-sharing__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.privacy-sharing__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.privacy-sharing__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED TRANSPARENCY BANNER
   ============================================================ */
.privacy-sharing__banner {
    margin-bottom: 48px;
}

.sharing-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sharing-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.sharing-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sharing-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sharing-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.sharing-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.sharing-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-sharing-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-sharing-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-sharing-question {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-sharing-question:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.sharing-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.sh-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.sh-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.sh-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.sh-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.sh-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.sh-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.sh-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.sh-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.sh-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.sh-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   THIRD-PARTY CATEGORIES GRID
   ============================================================ */
.privacy-sharing__categories {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-sharing__categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.sharing-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.sharing-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.sharing-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.sharing-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.sharing-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.sharing-card__purpose {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 4px 0 8px;
    flex: 1;
}

.sharing-card__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.share-chip {
    font-size: 0.58rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 2px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.share-chip:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

/* ============================================================
   INFORMATION SHARING FLOW
   ============================================================ */
.privacy-sharing__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.privacy-sharing__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.share-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.share-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.share-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.share-flow-node:hover .share-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.share-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.share-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.share-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.share-flow-node--end .share-flow-node__connector {
    display: none;
}

/* ============================================================
   TRUST & RESPONSIBILITY PANEL
   ============================================================ */
.privacy-sharing__trust {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-sharing__trust:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.trust-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 14px;
}

.trust-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.trust-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.trust-card__icon {
    font-size: 1.2rem;
    color: var(--color-lime);
    margin-bottom: 4px;
}

.trust-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.trust-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   BOTTOM INFORMATION BANNER
   ============================================================ */
.privacy-sharing__info {
    max-width: 900px;
    margin: 0 auto 0;
}

.info-banner-sharing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.info-banner-sharing:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.info-banner-sharing__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.info-banner-sharing__icon {
    font-size: 2rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.info-banner-sharing__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.info-banner-sharing__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.info-banner-sharing__badge {
    flex-shrink: 0;
}

.info-banner-sharing__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-sharing-contact:focus-visible,
.btn-banner-sharing-question:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Data Sharing & Third-Party Services
================================================== */

/* ==================================================
START: Data Security, Retention & Your Privacy Rights
================================================== */

/* ----- Container ----- */
#privacy-security-rights {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.privacy-security-rights__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.privacy-security-rights__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.privacy-security-rights__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.privacy-security-rights__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.privacy-security-rights__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.privacy-security-rights__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.privacy-security-rights__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.privacy-security-rights__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.privacy-security-rights__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.privacy-security-rights__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.privacy-security-rights__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.privacy-security-rights__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#privacy-security-rights .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#privacy-security-rights .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#privacy-security-rights .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#privacy-security-rights .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#privacy-security-rights .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#privacy-security-rights .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#privacy-security-rights .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.privacy-security-rights__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.privacy-security-rights__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.privacy-security-rights__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.privacy-security-rights__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.privacy-security-rights__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.privacy-security-rights__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.privacy-security-rights__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.privacy-security-rights__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   SECURITY COMMITMENT BANNER
   ============================================================ */
.privacy-security-rights__banner {
    margin-bottom: 48px;
}

.security-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.security-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.security-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.security-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.security-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.security-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.security-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-security-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-security-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-security-question {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-security-question:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.security-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.sec-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.sec-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.sec-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.sec-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.sec-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.sec-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.sec-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.sec-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.sec-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.sec-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   SECURITY MEASURES GRID
   ============================================================ */
.privacy-security-rights__measures {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-security-rights__measures:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.measure-card {
    display: flex;
    flex-direction: column;
    padding: 16px 14px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.measure-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.measure-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.measure-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.measure-card__desc {
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   DATA RETENTION TIMELINE
   ============================================================ */
.privacy-security-rights__retention {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-security-rights__retention:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.retention-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 8px 0 4px;
}

.retention-timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 18px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.retention-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0 8px 0;
    position: relative;
}

.retention-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.retention-step:hover .retention-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.retention-step__content {
    flex: 1;
    padding-top: 2px;
}

.retention-step__label {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.retention-step__desc {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 2px;
}

.retention-step__connector {
    display: none;
}

.retention-timeline__note {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.04);
    border-radius: 10px;
    text-align: center;
}

/* ============================================================
   PRIVACY RIGHTS GRID
   ============================================================ */
.privacy-security-rights__rights {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-security-rights__rights:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.rights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 14px;
}

.right-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.right-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.right-card__icon {
    font-size: 1.2rem;
    color: var(--color-lime);
    margin-bottom: 4px;
}

.right-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.right-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   REQUEST PROCESS FLOW
   ============================================================ */
.privacy-security-rights__process {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.privacy-security-rights__process:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.request-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.request-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.request-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.request-node:hover .request-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.request-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.request-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.request-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.request-node--end .request-node__connector {
    display: none;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.privacy-security-rights__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.rights-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rights-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.rights-cta-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rights-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rights-cta-banner__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.rights-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.rights-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-rights-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-rights-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-rights-visit {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-rights-visit:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.rights-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.r-cta-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.r-cta-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.r-cta-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.r-cta-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.r-cta-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.r-cta-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.r-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.r-cta-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.r-cta-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.r-cta-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-banner-security-contact:focus-visible,
.btn-banner-security-question:focus-visible,
.btn-cta-rights-contact:focus-visible,
.btn-cta-rights-visit:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Data Security, Retention & Your Privacy Rights
================================================== */

/* ==================================================
START: Policy Updates, Contact Information & Final Notice
================================================== */

/* ----- Container ----- */
#privacy-final {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.privacy-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.privacy-final__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.privacy-final__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.privacy-final__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.privacy-final__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.privacy-final__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.privacy-final__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.privacy-final__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.privacy-final__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.privacy-final__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.privacy-final__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.privacy-final__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#privacy-final .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#privacy-final .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#privacy-final .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#privacy-final .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#privacy-final .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#privacy-final .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#privacy-final .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.privacy-final__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.privacy-final__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.privacy-final__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.privacy-final__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.privacy-final__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.privacy-final__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.privacy-final__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.privacy-final__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   POLICY UPDATES BANNER
   ============================================================ */
.privacy-final__banner {
    margin-bottom: 48px;
}

.updates-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.updates-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.updates-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.updates-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.updates-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.updates-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.updates-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-updates-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-updates-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-updates-home {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-updates-home:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.updates-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.up-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.up-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.up-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.up-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.up-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.up-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.up-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.up-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.up-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.up-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   POLICY TIMELINE
   ============================================================ */
.privacy-final__timeline {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-final__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.policy-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 8px 0 4px;
}

.policy-timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 18px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.policy-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0 8px 0;
    position: relative;
}

.policy-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.policy-step:hover .policy-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.policy-step__content {
    flex: 1;
    padding-top: 2px;
}

.policy-step__label {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.policy-step__desc {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 2px;
}

.policy-step__connector {
    display: none;
}

/* ============================================================
   CONTACT INFORMATION CARDS
   ============================================================ */
.privacy-final__contact {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.privacy-final__contact:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.contact-final-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.contact-final-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.contact-final-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.contact-final-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.contact-final-card__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
}

.contact-final-card__value {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 2px 0 8px;
    flex: 1;
}

.contact-final-card__btn {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 3px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}

.contact-final-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   FINAL NOTICE BANNER
   ============================================================ */
.privacy-final__notice {
    max-width: 900px;
    margin: 0 auto 40px;
}

.notice-final-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-final-banner:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-final-banner__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-final-banner__icon {
    font-size: 2.2rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.notice-final-banner__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-final-banner__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-final-banner__badge {
    flex-shrink: 0;
}

.notice-final-banner__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.privacy-final__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.final-privacy-cta {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.final-privacy-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.final-privacy-cta__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.final-privacy-cta__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.final-privacy-cta__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.final-privacy-cta__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.final-privacy-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-privacy-final-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-privacy-final-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-privacy-final-chat {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-privacy-final-chat:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.final-privacy-cta__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.fp-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.fp-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.fp-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.fp-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.fp-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.fp-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.fp-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.fp-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.fp-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.fp-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-banner-updates-contact:focus-visible,
.btn-banner-updates-home:focus-visible,
.contact-final-card__btn:focus-visible,
.btn-cta-privacy-final-contact:focus-visible,
.btn-cta-privacy-final-chat:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Policy Updates, Contact Information & Final Notice
================================================== */

/* ==================================================
START: Terms & Conditions Hero Banner
================================================== */

/* ----- Container ----- */
#terms-hero {
    padding: 40px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ----- Background Decorations ----- */
.terms-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.terms-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.terms-hero__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.terms-hero__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.terms-hero__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.terms-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.terms-hero__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.terms-hero__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.terms-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.terms-hero__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.terms-hero__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.terms-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#terms-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#terms-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#terms-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#terms-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#terms-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#terms-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#terms-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.terms-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */
.terms-hero__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.terms-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.terms-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.terms-hero__title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.terms-hero__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.terms-hero__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.terms-hero__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 540px;
    margin: 0;
}

/* ----- Document Metadata ----- */
.terms-hero__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.terms-hero__meta .meta-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-hero__meta .meta-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.terms-hero__meta .meta-card__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.terms-hero__meta .meta-card__label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.terms-hero__meta .meta-card__value {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ----- Hero Actions ----- */
.terms-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-terms-contact {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-terms-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-terms-home {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-terms-home:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Trust Badges ----- */
.terms-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
}

.terms-hero__trust .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 14px 4px 10px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
}

.terms-hero__trust .trust-badge i {
    color: var(--color-lime);
    font-size: 0.8rem;
}

.terms-hero__trust .trust-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

/* ============================================================
   HERO VISUAL
   ============================================================ */
.terms-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}

/* ----- Glass Document ----- */
.glass-document {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 220px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: floatDocument 6s ease-in-out infinite;
    z-index: 3;
    padding: 20px;
}

.glass-document .document-icon {
    font-size: 2.8rem;
    color: rgba(124, 58, 237, 0.15);
    margin-bottom: 8px;
}

.glass-document .document-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 80%;
}

.glass-document .document-lines .line {
    height: 3px;
    border-radius: 3px;
    background: rgba(124, 58, 237, 0.08);
}

.glass-document .document-lines .line:nth-child(1) { width: 90%; }
.glass-document .document-lines .line:nth-child(2) { width: 70%; }
.glass-document .document-lines .line:nth-child(3) { width: 80%; }
.glass-document .document-lines .line:nth-child(4) { width: 60%; }
.glass-document .document-lines .line:nth-child(5) { width: 75%; }

.glass-document .document-check {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 1.4rem;
    color: var(--color-lime);
    opacity: 0.7;
}

.glass-document .document-shield {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 1.4rem;
    color: var(--color-purple);
    opacity: 0.4;
}

.document-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    border: 2px solid rgba(192, 227, 74, 0.1);
    animation: pulseRing 4s ease-in-out infinite;
}

@keyframes floatDocument {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-12px);
    }
}

/* ----- Floating Icons ----- */
.float-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    font-size: 1.1rem;
    color: var(--color-purple);
    animation: floatIcon 5s ease-in-out infinite;
    z-index: 2;
}

.float-icon--1 {
    top: 12%;
    left: 8%;
    animation-delay: 0s;
    color: var(--color-lime);
}
.float-icon--2 {
    top: 20%;
    right: 12%;
    animation-delay: 1.2s;
}
.float-icon--3 {
    bottom: 25%;
    left: 10%;
    animation-delay: 2.4s;
}
.float-icon--4 {
    bottom: 20%;
    right: 8%;
    animation-delay: 3.6s;
}

.float-icon:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.9);
}

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

/* ----- Connection Lines ----- */
.visual-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ----- Floating Orbs ----- */
.orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    animation: pulseGlow 4s ease-in-out infinite;
}

.orb--1 {
    width: 60px;
    height: 60px;
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.orb--2 {
    width: 40px;
    height: 40px;
    bottom: 30%;
    left: 15%;
    background: rgba(192, 227, 74, 0.04);
    border-color: rgba(192, 227, 74, 0.04);
    animation-delay: 1.5s;
}

.orb--3 {
    width: 25px;
    height: 25px;
    top: 55%;
    right: 30%;
    background: rgba(192, 227, 74, 0.03);
    border-color: rgba(192, 227, 74, 0.03);
    animation-delay: 3s;
}

/* ----- Focus States ----- */
.btn-terms-contact:focus-visible,
.btn-terms-home:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Terms & Conditions Hero Banner
================================================== */

/* ==================================================
START: Agreement Overview & Acceptance
================================================== */

/* ----- Container ----- */
#terms-overview {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.terms-overview__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.terms-overview__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.terms-overview__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.terms-overview__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.terms-overview__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.terms-overview__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.terms-overview__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.terms-overview__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.terms-overview__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.terms-overview__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.terms-overview__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.terms-overview__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#terms-overview .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#terms-overview .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#terms-overview .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#terms-overview .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#terms-overview .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#terms-overview .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#terms-overview .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.terms-overview__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.terms-overview__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.terms-overview__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.terms-overview__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.terms-overview__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.terms-overview__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.terms-overview__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.terms-overview__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED AGREEMENT BANNER
   ============================================================ */
.terms-overview__banner {
    margin-bottom: 48px;
}

.agreement-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.agreement-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.agreement-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agreement-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agreement-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.agreement-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.agreement-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-agreement-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-agreement-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-agreement-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-agreement-services:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.agreement-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ag-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ag-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ag-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ag-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ag-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ag-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ag-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ag-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ag-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ag-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   AGREEMENT PRINCIPLES GRID
   ============================================================ */
.terms-overview__principles {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-overview__principles:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.principle-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.principle-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.principle-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.principle-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.principle-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
}

/* ============================================================
   ACCEPTANCE TIMELINE
   ============================================================ */
.terms-overview__timeline {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-overview__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.acceptance-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 8px 0 4px;
}

.acceptance-timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 18px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.acceptance-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0 8px 0;
    position: relative;
}

.acceptance-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.acceptance-step:hover .acceptance-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.acceptance-step__content {
    flex: 1;
    padding-top: 2px;
}

.acceptance-step__label {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.acceptance-step__desc {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 2px;
}

.acceptance-step__connector {
    display: none;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.terms-overview__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-terms {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-terms:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-terms__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-terms__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-terms__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-terms__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-terms__badge {
    flex-shrink: 0;
}

.notice-banner-terms__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(220, 38, 38, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-agreement-contact:focus-visible,
.btn-banner-agreement-services:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Agreement Overview & Acceptance
================================================== */

/* ==================================================
START: Website Use & User Responsibilities
================================================== */

/* ----- Container ----- */
#terms-use {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.terms-use__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.terms-use__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.terms-use__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.terms-use__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.terms-use__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.terms-use__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.terms-use__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.terms-use__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.terms-use__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.terms-use__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.terms-use__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.terms-use__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#terms-use .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#terms-use .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#terms-use .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#terms-use .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#terms-use .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#terms-use .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#terms-use .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.terms-use__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.terms-use__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.terms-use__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.terms-use__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.terms-use__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.terms-use__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.terms-use__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.terms-use__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   ACCEPTABLE USE BANNER
   ============================================================ */
.terms-use__banner {
    margin-bottom: 48px;
}

.use-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.use-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.use-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.use-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.use-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.use-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.use-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-use-explore {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-use-explore:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-use-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-use-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.use-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ub-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ub-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ub-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ub-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ub-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ub-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ub-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ub-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ub-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ub-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   USER RESPONSIBILITIES GRID
   ============================================================ */
.terms-use__responsibilities {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-use__responsibilities:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.responsibilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.resp-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.resp-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.resp-card__icon {
    font-size: 1.3rem;
    color: var(--color-lime);
    margin-bottom: 4px;
}

.resp-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.resp-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   PROHIBITED ACTIVITIES GRID
   ============================================================ */
.terms-use__prohibited {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-use__prohibited:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.prohibited-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.prohibited-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.prohibited-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(220, 38, 38, 0.08);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.02);
}

.prohibited-card__icon {
    font-size: 1.2rem;
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 2px;
}

.prohibited-card__content {
    flex: 1;
    min-width: 0;
}

.prohibited-card__title {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.prohibited-card__desc {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 2px;
}

.prohibited-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
    padding: 2px 12px;
    border-radius: 50px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIBLE USAGE FLOW
   ============================================================ */
.terms-use__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.terms-use__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.use-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.use-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.use-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.use-flow-node:hover .use-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.use-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.use-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.use-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.use-flow-node--end .use-flow-node__connector {
    display: none;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.terms-use__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-use {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-use:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-use__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-use__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-use__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-use__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-use__badge {
    flex-shrink: 0;
}

.notice-banner-use__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-use-explore:focus-visible,
.btn-banner-use-contact:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Website Use & User Responsibilities
================================================== */

/* ==================================================
START: Services, Quotes & Payments
================================================== */

/* ----- Container ----- */
#terms-services-payments {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.terms-services-payments__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.terms-services-payments__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.terms-services-payments__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.terms-services-payments__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.terms-services-payments__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.terms-services-payments__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.terms-services-payments__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.terms-services-payments__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.terms-services-payments__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.terms-services-payments__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.terms-services-payments__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.terms-services-payments__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#terms-services-payments .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#terms-services-payments .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#terms-services-payments .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#terms-services-payments .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#terms-services-payments .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#terms-services-payments .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#terms-services-payments .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.terms-services-payments__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.terms-services-payments__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.terms-services-payments__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.terms-services-payments__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.terms-services-payments__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.terms-services-payments__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.terms-services-payments__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.terms-services-payments__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED SERVICE BANNER
   ============================================================ */
.terms-services-payments__banner {
    margin-bottom: 48px;
}

.service-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.service-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.service-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.service-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.service-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-service-quote {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-service-quote:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-service-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-service-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.service-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.sv-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.sv-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.sv-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.sv-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.sv-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.sv-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.sv-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.sv-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.sv-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.sv-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   SERVICE PROCESS TIMELINE
   ============================================================ */
.terms-services-payments__timeline {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-services-payments__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.service-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 8px 0 4px;
}

.service-timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 18px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.service-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0 8px 0;
    position: relative;
}

.service-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.service-step:hover .service-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.service-step__content {
    flex: 1;
    padding-top: 2px;
}

.service-step__label {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.service-step__desc {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 2px;
}

.service-step__connector {
    display: none;
}

/* ============================================================
   BUSINESS TERMS GRID
   ============================================================ */
.terms-services-payments__terms {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-services-payments__terms:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.term-card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.term-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.term-card__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.term-card__title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.term-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   PAYMENT & PROJECT CARDS
   ============================================================ */
.terms-services-payments__payment {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-services-payments__payment:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 14px;
}

.payment-card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.payment-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.payment-card__icon {
    font-size: 1.3rem;
    color: var(--color-lime);
    margin-bottom: 4px;
}

.payment-card__title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.payment-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.terms-services-payments__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-services {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-services:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-services__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-services__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-services__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-services__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-services__badge {
    flex-shrink: 0;
}

.notice-banner-services__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-service-quote:focus-visible,
.btn-banner-service-contact:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Services, Quotes & Payments
================================================== */

/* ==================================================
START: Intellectual Property & Content Ownership
================================================== */

/* ----- Container ----- */
#terms-ip {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.terms-ip__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.terms-ip__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.terms-ip__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.terms-ip__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.terms-ip__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.terms-ip__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.terms-ip__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.terms-ip__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.terms-ip__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.terms-ip__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.terms-ip__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.terms-ip__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#terms-ip .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#terms-ip .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#terms-ip .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#terms-ip .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#terms-ip .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#terms-ip .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#terms-ip .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.terms-ip__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.terms-ip__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.terms-ip__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.terms-ip__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.terms-ip__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.terms-ip__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.terms-ip__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.terms-ip__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED OWNERSHIP BANNER
   ============================================================ */
.terms-ip__banner {
    margin-bottom: 48px;
}

.ip-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ip-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.ip-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ip-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ip-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.ip-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.ip-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-ip-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-ip-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-ip-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-ip-services:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.ip-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ip-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ip-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ip-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ip-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ip-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ip-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ip-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ip-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ip-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ip-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   OWNERSHIP CATEGORIES GRID
   ============================================================ */
.terms-ip__categories {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-ip__categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.ip-category-card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.ip-category-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.ip-category-card__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.ip-category-card__title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.ip-category-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   CONTENT OWNERSHIP FLOW
   ============================================================ */
.terms-ip__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.terms-ip__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.ip-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.ip-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.ip-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.ip-flow-node:hover .ip-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.ip-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.ip-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.ip-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.ip-flow-node--end .ip-flow-node__connector {
    display: none;
}

/* ============================================================
   LICENSING & USAGE CARDS
   ============================================================ */
.terms-ip__licensing {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-ip__licensing:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.licensing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 14px;
}

.license-card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.license-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.license-card__icon {
    font-size: 1.2rem;
    color: var(--color-lime);
    margin-bottom: 4px;
}

.license-card__title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.license-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.terms-ip__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-ip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-ip:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-ip__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-ip__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-ip__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-ip__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-ip__badge {
    flex-shrink: 0;
}

.notice-banner-ip__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-ip-contact:focus-visible,
.btn-banner-ip-services:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Intellectual Property & Content Ownership
================================================== */

/* ==================================================
START: Warranties, Liability & Third-Party Services
================================================== */

/* ----- Container ----- */
#terms-liability {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.terms-liability__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.terms-liability__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.terms-liability__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.terms-liability__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.terms-liability__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.terms-liability__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.terms-liability__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.terms-liability__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.terms-liability__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.terms-liability__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.terms-liability__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.terms-liability__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#terms-liability .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#terms-liability .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#terms-liability .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#terms-liability .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#terms-liability .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#terms-liability .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#terms-liability .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.terms-liability__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.terms-liability__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.terms-liability__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.terms-liability__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.terms-liability__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.terms-liability__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.terms-liability__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.terms-liability__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   PROFESSIONAL COMMITMENT BANNER
   ============================================================ */
.terms-liability__banner {
    margin-bottom: 48px;
}

.liability-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.liability-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.liability-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.liability-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.liability-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.liability-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.liability-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-liability-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-liability-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-liability-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-liability-services:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.liability-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.lb-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.lb-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.lb-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.lb-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.lb-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.lb-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.lb-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.lb-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.lb-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.lb-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   WARRANTY & LIABILITY GRID
   ============================================================ */
.terms-liability__grid {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-liability__grid:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.liability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.liability-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.liability-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.liability-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.liability-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.liability-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   THIRD-PARTY SERVICES FLOW
   ============================================================ */
.terms-liability__thirdparty {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.terms-liability__thirdparty:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.thirdparty-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.thirdparty-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.thirdparty-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.thirdparty-node:hover .thirdparty-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.thirdparty-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.thirdparty-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.thirdparty-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.thirdparty-node--end .thirdparty-node__connector {
    display: none;
}

.thirdparty-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: center;
    margin: 12px 0 10px;
}

.thirdparty-tag {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 4px 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.thirdparty-tag:hover {
    border-color: var(--color-purple);
    background: rgba(124, 58, 237, 0.04);
    transform: translateY(-2px);
}

.thirdparty-note {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    text-align: center;
    margin: 0;
    padding: 10px 16px;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.04);
    border-radius: 10px;
}

/* ============================================================
   FORCE MAJEURE CARDS
   ============================================================ */
.terms-liability__force {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-liability__force:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.force-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 14px;
}

.force-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    text-align: center;
    align-items: center;
}

.force-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.force-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.force-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.force-card__desc {
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.terms-liability__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-liability {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-liability:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-liability__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-liability__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-liability__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-liability__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-liability__badge {
    flex-shrink: 0;
}

.notice-banner-liability__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-liability-contact:focus-visible,
.btn-banner-liability-services:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Warranties, Liability & Third-Party Services
================================================== */

/* ==================================================
START: Termination, Governing Law, Policy Updates & Contact Information
================================================== */

/* ----- Container ----- */
#terms-final {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.terms-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.terms-final__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.terms-final__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.terms-final__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.terms-final__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.terms-final__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.terms-final__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.terms-final__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.terms-final__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.terms-final__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.terms-final__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.terms-final__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#terms-final .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#terms-final .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#terms-final .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#terms-final .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#terms-final .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#terms-final .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#terms-final .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.terms-final__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.terms-final__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.terms-final__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.terms-final__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.terms-final__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.terms-final__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.terms-final__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.terms-final__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   TERMINATION & GOVERNING LAW BANNER
   ============================================================ */
.terms-final__banner {
    margin-bottom: 48px;
}

.final-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.final-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.final-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.final-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.final-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.final-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.final-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-final-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-final-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-final-home {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-final-home:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.final-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.fn-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.fn-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.fn-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.fn-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.fn-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.fn-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.fn-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.fn-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.fn-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.fn-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   LEGAL INFORMATION GRID
   ============================================================ */
.terms-final__legal {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-final__legal:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.legal-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.legal-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.legal-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.legal-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.legal-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   TERMS LIFECYCLE TIMELINE
   ============================================================ */
.terms-final__lifecycle {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-final__lifecycle:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.lifecycle-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 8px 0 4px;
}

.lifecycle-timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 18px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.lifecycle-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0 8px 0;
    position: relative;
}

.lifecycle-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.lifecycle-step:hover .lifecycle-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.lifecycle-step__content {
    flex: 1;
    padding-top: 2px;
}

.lifecycle-step__label {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.lifecycle-step__desc {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 2px;
}

.lifecycle-step__connector {
    display: none;
}

/* ============================================================
   OFFICIAL CONTACT CARDS
   ============================================================ */
.terms-final__contact {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.terms-final__contact:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.contact-final-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.contact-final-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.contact-final-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.contact-final-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.contact-final-card__label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
}

.contact-final-card__value {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin: 2px 0 8px;
    flex: 1;
}

.contact-final-card__btn {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 3px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}

.contact-final-card__btn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   FINAL NOTICE BANNER
   ============================================================ */
.terms-final__notice {
    max-width: 900px;
    margin: 0 auto 40px;
}

.notice-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-final:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-final__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-final__icon {
    font-size: 2.2rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.notice-final__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-final__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-final__badge {
    flex-shrink: 0;
}

.notice-final__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.terms-final__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.closing-cta {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.closing-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.closing-cta__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.closing-cta__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.closing-cta__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.closing-cta__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.closing-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-final-team {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-final-team:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-final-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-final-services:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.closing-cta__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.cl-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.cl-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.cl-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.cl-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.cl-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.cl-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.cl-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.cl-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.cl-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.cl-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-banner-final-contact:focus-visible,
.btn-banner-final-home:focus-visible,
.contact-final-card__btn:focus-visible,
.btn-cta-final-team:focus-visible,
.btn-cta-final-services:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Termination, Governing Law, Policy Updates & Contact Information
================================================== */

/* ==================================================
START: Cookie Policy Hero Banner
================================================== */

/* ----- Container ----- */
#cookie-hero {
    padding: 40px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ----- Background Decorations ----- */
.cookie-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.cookie-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.cookie-hero__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.cookie-hero__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.cookie-hero__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.cookie-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.cookie-hero__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.cookie-hero__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.cookie-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.cookie-hero__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.cookie-hero__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.cookie-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#cookie-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#cookie-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#cookie-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#cookie-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#cookie-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#cookie-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#cookie-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.cookie-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */
.cookie-hero__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cookie-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.cookie-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.cookie-hero__title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.cookie-hero__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.cookie-hero__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.cookie-hero__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 540px;
    margin: 0;
}

/* ----- Document Metadata ----- */
.cookie-hero__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.cookie-hero__meta .meta-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-hero__meta .meta-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.cookie-hero__meta .meta-card__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.cookie-hero__meta .meta-card__label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.cookie-hero__meta .meta-card__value {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ----- Hero Actions ----- */
.cookie-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-cookie-preferences {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cookie-preferences:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-cookie-learn {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cookie-learn:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Trust Badges ----- */
.cookie-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
}

.cookie-hero__trust .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 14px 4px 10px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
}

.cookie-hero__trust .trust-badge i {
    color: var(--color-lime);
    font-size: 0.8rem;
}

.cookie-hero__trust .trust-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

/* ============================================================
   HERO VISUAL
   ============================================================ */
.cookie-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}

/* ----- Glass Cookie Container ----- */
.glass-cookie {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatCookie 6s ease-in-out infinite;
    z-index: 3;
}

.glass-cookie .cookie-icon {
    font-size: 3.2rem;
    color: rgba(192, 227, 74, 0.6);
    position: relative;
    z-index: 2;
}

.glass-cookie .cookie-shield {
    position: absolute;
    font-size: 1.8rem;
    color: rgba(124, 58, 237, 0.3);
    top: 10px;
    right: 10px;
    z-index: 2;
}

.cookie-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(192, 227, 74, 0.1);
    animation: pulseRing 4s ease-in-out infinite;
}

@keyframes floatCookie {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-12px);
    }
}

/* ----- Browser Window ----- */
.visual-browser {
    position: absolute;
    top: 10%;
    left: 8%;
    width: 160px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: floatBrowser 6s ease-in-out infinite 1.5s;
    z-index: 2;
}

.visual-browser .browser-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--color-gray-light);
}

.visual-browser .browser-bar .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.visual-browser .browser-bar .dot--red { background: #ef4444; }
.visual-browser .browser-bar .dot--yellow { background: #f59e0b; }
.visual-browser .browser-bar .dot--green { background: #059669; }

.visual-browser .browser-bar .browser-url {
    font-size: 0.45rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin-left: 4px;
    background: rgba(0, 0, 0, 0.03);
    padding: 1px 6px;
    border-radius: 3px;
    flex: 1;
    text-align: center;
}

.visual-browser .browser-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
}

.visual-browser .browser-content .browser-cookie-icon {
    font-size: 1.2rem;
    color: rgba(192, 227, 74, 0.7);
}

.visual-browser .browser-content .browser-text {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

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

/* ----- Preference Toggles ----- */
.toggle-group {
    position: absolute;
    bottom: 15%;
    right: 10%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: floatToggles 7s ease-in-out infinite 2.5s;
    z-index: 2;
    min-width: 110px;
}

.toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.toggle-label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.toggle-switch {
    display: inline-block;
    width: 28px;
    height: 16px;
    border-radius: 10px;
    background: var(--color-gray-light);
    position: relative;
    transition: all 0.3s ease;
    cursor: default;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-white);
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.toggle-switch--on {
    background: var(--color-lime);
}

.toggle-switch--on::after {
    left: 14px;
}

.toggle-switch--off {
    background: #d1d5db;
}

.toggle-switch--off::after {
    left: 2px;
}

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

/* ----- Floating Icons ----- */
.float-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    font-size: 1rem;
    color: var(--color-purple);
    animation: floatIcon 5s ease-in-out infinite;
    z-index: 2;
}

.float-icon--1 {
    top: 12%;
    right: 12%;
    animation-delay: 0s;
    color: var(--color-lime);
}
.float-icon--2 {
    top: 25%;
    left: 10%;
    animation-delay: 1.2s;
}
.float-icon--3 {
    bottom: 30%;
    left: 6%;
    animation-delay: 2.4s;
}
.float-icon--4 {
    bottom: 18%;
    right: 6%;
    animation-delay: 3.6s;
}

.float-icon:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.9);
}

/* ----- Connection Lines ----- */
.visual-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ----- Floating Orbs ----- */
.orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    animation: pulseGlow 4s ease-in-out infinite;
}

.orb--1 {
    width: 60px;
    height: 60px;
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.orb--2 {
    width: 40px;
    height: 40px;
    bottom: 30%;
    left: 15%;
    background: rgba(192, 227, 74, 0.04);
    border-color: rgba(192, 227, 74, 0.04);
    animation-delay: 1.5s;
}

.orb--3 {
    width: 25px;
    height: 25px;
    top: 55%;
    right: 30%;
    background: rgba(192, 227, 74, 0.03);
    border-color: rgba(192, 227, 74, 0.03);
    animation-delay: 3s;
}

/* ----- Focus States ----- */
.btn-cookie-preferences:focus-visible,
.btn-cookie-learn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Cookie Policy Hero Banner
================================================== */

/* ==================================================
START: What Are Cookies & Why We Use Them
================================================== */

/* ----- Container ----- */
#cookie-overview {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.cookie-overview__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.cookie-overview__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.cookie-overview__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.cookie-overview__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.cookie-overview__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.cookie-overview__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.cookie-overview__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.cookie-overview__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.cookie-overview__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.cookie-overview__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.cookie-overview__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.cookie-overview__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#cookie-overview .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#cookie-overview .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#cookie-overview .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#cookie-overview .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#cookie-overview .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#cookie-overview .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#cookie-overview .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.cookie-overview__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.cookie-overview__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.cookie-overview__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cookie-overview__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.cookie-overview__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.cookie-overview__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.cookie-overview__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.cookie-overview__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED EXPLANATION BANNER
   ============================================================ */
.cookie-overview__banner {
    margin-bottom: 48px;
}

.explanation-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.explanation-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.explanation-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.explanation-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.explanation-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.explanation-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.explanation-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-cookie-manage {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-cookie-manage:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-cookie-privacy {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-cookie-privacy:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.explanation-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ex-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ex-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ex-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ex-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ex-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ex-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ex-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ex-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ex-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ex-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   HOW COOKIES WORK FLOW
   ============================================================ */
.cookie-overview__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.cookie-overview__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.cookie-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.flow-node:hover .flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.flow-node--end .flow-node__connector {
    display: none;
}

/* ============================================================
   REASONS WE USE COOKIES GRID
   ============================================================ */
.cookie-overview__reasons {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-overview__reasons:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.reason-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.reason-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.reason-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.reason-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.reason-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.cookie-overview__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-cookie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-cookie:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-cookie__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-cookie__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-cookie__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-cookie__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-cookie__badge {
    flex-shrink: 0;
}

.notice-banner-cookie__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-cookie-manage:focus-visible,
.btn-banner-cookie-privacy:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: What Are Cookies & Why We Use Them
================================================== */

/* ==================================================
START: Types of Cookies We Use
================================================== */

/* ----- Container ----- */
#cookie-types {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.cookie-types__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.cookie-types__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.cookie-types__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.cookie-types__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.cookie-types__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.cookie-types__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.cookie-types__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.cookie-types__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.cookie-types__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.cookie-types__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.cookie-types__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.cookie-types__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#cookie-types .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#cookie-types .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#cookie-types .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#cookie-types .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#cookie-types .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#cookie-types .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#cookie-types .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.cookie-types__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.cookie-types__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.cookie-types__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cookie-types__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.cookie-types__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.cookie-types__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.cookie-types__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.cookie-types__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED CATEGORIES BANNER
   ============================================================ */
.cookie-types__banner {
    margin-bottom: 48px;
}

.categories-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.categories-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.categories-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.categories-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.categories-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.categories-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.categories-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-categories-manage {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-categories-manage:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-categories-privacy {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-categories-privacy:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.categories-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ct-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ct-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ct-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ct-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ct-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ct-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ct-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ct-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ct-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ct-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   COOKIE CATEGORIES GRID
   ============================================================ */
.cookie-types__categories {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-types__categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.category-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    position: relative;
}

.category-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.category-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.category-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.category-card__purpose {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 4px 0 8px;
    flex: 1;
}

.category-card__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 8px;
}

.cat-example {
    font-size: 0.58rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 2px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.cat-example:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

.category-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
}

.category-card__badge--always {
    color: #059669;
    background: rgba(5, 150, 105, 0.06);
    border: 1px solid rgba(5, 150, 105, 0.12);
}

.category-card__badge--optional {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.06);
}

.category-card__badge--where {
    color: #d97706;
    background: rgba(217, 119, 6, 0.06);
    border: 1px solid rgba(217, 119, 6, 0.12);
}

.category-card__badge--future {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

/* ============================================================
   COOKIE LIFECYCLE DIAGRAM
   ============================================================ */
.cookie-types__lifecycle {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.cookie-types__lifecycle:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.lifecycle-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.lifecycle-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.lifecycle-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.lifecycle-node:hover .lifecycle-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.lifecycle-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.lifecycle-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.lifecycle-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.lifecycle-node--end .lifecycle-node__connector {
    display: none;
}

/* ============================================================
   COOKIE SUMMARY TABLE
   ============================================================ */
.cookie-types__table {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-types__table:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.cookie-table-wrapper {
    overflow-x: auto;
}

.cookie-summary-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    min-width: 700px;
}

.cookie-summary-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
    border-bottom: 2px solid var(--color-gray-light);
}

.cookie-summary-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    color: var(--color-charcoal);
    vertical-align: middle;
    transition: background 0.2s ease;
}

.cookie-summary-table tbody tr:hover td {
    background: rgba(124, 58, 237, 0.02);
}

.table-badge {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
}

.table-badge--essential {
    color: #059669;
    background: rgba(5, 150, 105, 0.06);
}
.table-badge--functional {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
}
.table-badge--performance {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}
.table-badge--analytics {
    color: #d97706;
    background: rgba(217, 119, 6, 0.06);
}
.table-badge--marketing {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
}
.table-badge--future {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
}

.status-badge {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
}

.status-badge--active {
    color: #059669;
    background: rgba(5, 150, 105, 0.06);
}
.status-badge--optional {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
}
.status-badge--where {
    color: #d97706;
    background: rgba(217, 119, 6, 0.06);
}
.status-badge--future {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

/* ============================================================
   INFORMATION BANNER
   ============================================================ */
.cookie-types__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-categories {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-categories__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-categories__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-categories__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-categories__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-categories__badge {
    flex-shrink: 0;
}

.notice-banner-categories__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-categories-manage:focus-visible,
.btn-banner-categories-privacy:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Types of Cookies We Use
================================================== */

/* ==================================================
START: Managing Cookie Preferences
================================================== */

/* ----- Container ----- */
#cookie-preferences {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.cookie-preferences__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.cookie-preferences__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.cookie-preferences__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.cookie-preferences__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.cookie-preferences__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.cookie-preferences__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.cookie-preferences__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.cookie-preferences__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.cookie-preferences__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.cookie-preferences__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.cookie-preferences__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.cookie-preferences__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#cookie-preferences .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#cookie-preferences .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#cookie-preferences .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#cookie-preferences .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#cookie-preferences .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#cookie-preferences .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#cookie-preferences .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.cookie-preferences__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.cookie-preferences__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.cookie-preferences__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cookie-preferences__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.cookie-preferences__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.cookie-preferences__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.cookie-preferences__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.cookie-preferences__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   PREFERENCE MANAGEMENT BANNER
   ============================================================ */
.cookie-preferences__banner {
    margin-bottom: 48px;
}

.pref-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pref-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.pref-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pref-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pref-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.pref-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.pref-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-pref-manage {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-pref-manage:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-pref-privacy {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-pref-privacy:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.pref-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.pf-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.pf-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.pf-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.pf-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.pf-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.pf-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.pf-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.pf-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.pf-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.pf-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   PREFERENCE OPTIONS GRID
   ============================================================ */
.cookie-preferences__options {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-preferences__options:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.option-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.option-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.option-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.option-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.option-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   PREFERENCE MANAGEMENT FLOW
   ============================================================ */
.cookie-preferences__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.cookie-preferences__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.pref-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.pref-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.pref-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.pref-flow-node:hover .pref-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.pref-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.pref-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.pref-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.pref-flow-node--end .pref-flow-node__connector {
    display: none;
}

/* ============================================================
   BROWSER SUPPORT CARDS
   ============================================================ */
.cookie-preferences__browsers {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-preferences__browsers:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.browsers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.browser-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.browser-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.browser-card__icon {
    font-size: 2.2rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.browser-card__name {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.browser-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.cookie-preferences__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-pref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-pref:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-pref__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-pref__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-pref__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-pref__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-pref__badge {
    flex-shrink: 0;
}

.notice-banner-pref__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #059669;
    background: rgba(5, 150, 105, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(5, 150, 105, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-pref-manage:focus-visible,
.btn-banner-pref-privacy:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Managing Cookie Preferences
================================================== */

/* ==================================================
START: Third-Party Cookies & Technologies
================================================== */

/* ----- Container ----- */
#cookie-thirdparty {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.cookie-thirdparty__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.cookie-thirdparty__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.cookie-thirdparty__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.cookie-thirdparty__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.cookie-thirdparty__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.cookie-thirdparty__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.cookie-thirdparty__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.cookie-thirdparty__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.cookie-thirdparty__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.cookie-thirdparty__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.cookie-thirdparty__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.cookie-thirdparty__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#cookie-thirdparty .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#cookie-thirdparty .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#cookie-thirdparty .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#cookie-thirdparty .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#cookie-thirdparty .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#cookie-thirdparty .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#cookie-thirdparty .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.cookie-thirdparty__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.cookie-thirdparty__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.cookie-thirdparty__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cookie-thirdparty__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.cookie-thirdparty__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.cookie-thirdparty__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.cookie-thirdparty__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.cookie-thirdparty__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   THIRD-PARTY TRANSPARENCY BANNER
   ============================================================ */
.cookie-thirdparty__banner {
    margin-bottom: 48px;
}

.thirdparty-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.thirdparty-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.thirdparty-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.thirdparty-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.thirdparty-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.thirdparty-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.thirdparty-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-thirdparty-privacy {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-thirdparty-privacy:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-thirdparty-manage {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-thirdparty-manage:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.thirdparty-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.tp-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.tp-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.tp-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.tp-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.tp-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.tp-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.tp-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.tp-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.tp-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.tp-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   TECHNOLOGY CATEGORIES GRID
   ============================================================ */
.cookie-thirdparty__categories {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-thirdparty__categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.thirdparty-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.thirdparty-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    position: relative;
}

.thirdparty-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.thirdparty-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.thirdparty-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.thirdparty-card__purpose {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 4px 0 8px;
    flex: 1;
}

.thirdparty-card__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 8px;
}

.tp-example {
    font-size: 0.58rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    padding: 2px 10px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.tp-example:hover {
    background: rgba(124, 58, 237, 0.04);
    border-color: rgba(124, 58, 237, 0.12);
    color: var(--color-purple);
    transform: translateY(-2px);
}

.thirdparty-card__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 12px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
}

.thirdparty-card__badge--where {
    color: #d97706;
    background: rgba(217, 119, 6, 0.06);
    border: 1px solid rgba(217, 119, 6, 0.12);
}

.thirdparty-card__badge--essential {
    color: #059669;
    background: rgba(5, 150, 105, 0.06);
    border: 1px solid rgba(5, 150, 105, 0.12);
}

.thirdparty-card__badge--future {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

/* ============================================================
   INFORMATION FLOW DIAGRAM
   ============================================================ */
.cookie-thirdparty__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.cookie-thirdparty__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.thirdparty-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.thirdparty-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.thirdparty-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.thirdparty-flow-node:hover .thirdparty-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.thirdparty-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.thirdparty-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.thirdparty-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.thirdparty-flow-node--end .thirdparty-flow-node__connector {
    display: none;
}

/* ============================================================
   TRANSPARENCY & USER CHOICE CARDS
   ============================================================ */
.cookie-thirdparty__transparency {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-thirdparty__transparency:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.transparency-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.transparency-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.transparency-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.transparency-card__icon {
    font-size: 1.3rem;
    color: var(--color-lime);
    margin-bottom: 4px;
}

.transparency-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.transparency-card__desc {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.cookie-thirdparty__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-thirdparty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-thirdparty:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-thirdparty__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-thirdparty__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-thirdparty__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-thirdparty__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-thirdparty__badge {
    flex-shrink: 0;
}

.notice-banner-thirdparty__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-thirdparty-privacy:focus-visible,
.btn-banner-thirdparty-manage:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Third-Party Cookies & Technologies
================================================== */

/* ==================================================
START: Policy Updates & Your Choices
================================================== */

/* ----- Container ----- */
#cookie-updates {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.cookie-updates__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.cookie-updates__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.cookie-updates__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.cookie-updates__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.cookie-updates__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.cookie-updates__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.cookie-updates__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.cookie-updates__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.cookie-updates__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.cookie-updates__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.cookie-updates__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.cookie-updates__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#cookie-updates .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#cookie-updates .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#cookie-updates .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#cookie-updates .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#cookie-updates .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#cookie-updates .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#cookie-updates .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.cookie-updates__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.cookie-updates__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.cookie-updates__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cookie-updates__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.cookie-updates__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.cookie-updates__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.cookie-updates__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.cookie-updates__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   POLICY UPDATES BANNER
   ============================================================ */
.cookie-updates__banner {
    margin-bottom: 48px;
}

.updates-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.updates-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.updates-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.updates-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.updates-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.updates-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.updates-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-updates-privacy {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-updates-privacy:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-updates-manage {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-updates-manage:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.updates-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.up-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.up-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.up-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.up-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.up-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.up-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.up-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.up-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.up-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.up-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   POLICY LIFECYCLE TIMELINE
   ============================================================ */
.cookie-updates__lifecycle {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-updates__lifecycle:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.lifecycle-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 8px 0 4px;
}

.lifecycle-timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 18px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-lime), var(--color-purple));
    opacity: 0.15;
}

.lifecycle-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0 8px 0;
    position: relative;
}

.lifecycle-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-lime);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-purple);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.lifecycle-step:hover .lifecycle-step__number {
    background: var(--color-lime);
    color: var(--color-charcoal);
    transform: scale(1.1);
}

.lifecycle-step__content {
    flex: 1;
    padding-top: 2px;
}

.lifecycle-step__label {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.lifecycle-step__desc {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 2px;
}

.lifecycle-step__connector {
    display: none;
}

/* ============================================================
   YOUR CHOICES GRID
   ============================================================ */
.cookie-updates__choices {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-updates__choices:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.choices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.choice-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.choice-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.choice-card__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 6px;
}

.choice-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.choice-card__desc {
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin-top: 4px;
    flex: 1;
}

/* ============================================================
   IMPORTANT NOTICE BANNER
   ============================================================ */
.cookie-updates__notice {
    max-width: 900px;
    margin: 0 auto 40px;
}

.notice-banner-updates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-updates:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-updates__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-updates__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-updates__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-updates__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-updates__badge {
    flex-shrink: 0;
}

.notice-banner-updates__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.cookie-updates__cta {
    max-width: 1000px;
    margin: 0 auto 0;
}

.closing-updates-cta {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.closing-updates-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.closing-updates-cta__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.closing-updates-cta__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.closing-updates-cta__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.closing-updates-cta__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 480px;
    margin: 0;
}

.closing-updates-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-updates-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-cta-updates-contact:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-cta-updates-privacy {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta-updates-privacy:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- CTA Visual ----- */
.closing-updates-cta__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.cu-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.cu-icon--1 {
    top: 20%;
    left: 15%;
    animation: floatIcon 5s ease-in-out infinite;
}
.cu-icon--2 {
    top: 20%;
    right: 15%;
    animation: floatIcon 5s ease-in-out infinite 1.5s;
}
.cu-icon--3 {
    bottom: 20%;
    left: 20%;
    animation: floatIcon 5s ease-in-out infinite 3s;
}
.cu-icon--4 {
    bottom: 20%;
    right: 20%;
    animation: floatIcon 5s ease-in-out infinite 0.5s;
}

.cu-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.cu-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.cu-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.cu-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.cu-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- Focus States ----- */
.btn-banner-updates-privacy:focus-visible,
.btn-banner-updates-manage:focus-visible,
.btn-cta-updates-contact:focus-visible,
.btn-cta-updates-privacy:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Policy Updates & Your Choices
================================================== */

/* ==================================================
START: Global Cookie Consent Banner
================================================== */

/* ----- Base Banner ----- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
    animation: cookieSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.cookie-banner__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.cookie-banner__overlay--visible {
    opacity: 1;
}

.cookie-banner__container {
    position: relative;
    max-width: 1400px;
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.1);
    padding: 28px 36px;
    pointer-events: auto;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-banner__container:hover {
    box-shadow: 0 20px 80px rgba(124, 58, 237, 0.04), 0 0 0 1px rgba(124, 58, 237, 0.04);
}

/* ----- Banner Content ----- */
.cookie-banner__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ----- Badge ----- */
.cookie-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 10px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    width: fit-content;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
}

.cookie-banner__badge-icon {
    font-size: 0.85rem;
}

/* ----- Title ----- */
.cookie-banner__title {
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* ----- Description ----- */
.cookie-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
    max-width: 780px;
}

.cookie-banner__link {
    color: var(--color-purple);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease;
    border-bottom: 1.5px solid transparent;
}

.cookie-banner__link:hover {
    color: var(--color-purple);
    border-bottom-color: var(--color-purple);
}

/* ----- Actions / Buttons ----- */
.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 4px;
}

.cookie-banner__btn {
    position: relative;
    padding: 10px 24px;
    border: none;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}

/* Accept Button */
.cookie-banner__btn--accept {
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.cookie-banner__btn--accept:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.4);
}

.cookie-banner__btn--accept:active {
    transform: translateY(0) scale(0.98);
}

/* Reject Button */
.cookie-banner__btn--reject {
    background: rgba(0, 0, 0, 0.03);
    color: var(--color-charcoal);
    border: 1px solid var(--color-gray-light);
}

.cookie-banner__btn--reject:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Customize Button */
.cookie-banner__btn--customize {
    background: transparent;
    color: var(--color-purple);
    border: 1px solid var(--color-purple);
}

.cookie-banner__btn--customize:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15);
}

.cookie-banner__btn--customize .btn-icon {
    font-size: 0.8rem;
}

/* Button Ripple Effect */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0);
    animation: rippleAnim 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ----- Animations ----- */
@keyframes cookieSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.cookie-banner--hidden {
    animation: cookieSlideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes cookieSlideDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* ----- Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        animation: none;
    }
    .cookie-banner--hidden {
        animation: none;
        opacity: 0;
        transform: translateY(30px);
    }
    .btn-ripple {
        display: none;
    }
}

/* ==================================================
END: Global Cookie Consent Banner
================================================== */

/* ==================================================
START: Global Cookie Preferences Modal
================================================== */

/* ----- Modal Container ----- */
.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: modalFadeIn 0.3s ease forwards;
}

.cookie-modal--open {
    display: flex;
}

/* ----- Backdrop ----- */
.cookie-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: -1;
    animation: backdropFadeIn 0.3s ease forwards;
}

@keyframes backdropFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.cookie-modal--closing {
    animation: modalFadeOut 0.25s ease forwards;
}

@keyframes modalFadeOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.96) translateY(20px);
    }
}

/* ----- Modal Container ----- */
.cookie-modal__container {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ----- Close Button ----- */
.cookie-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.03);
    color: var(--color-gray-mid);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 10;
}

.cookie-modal__close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-charcoal);
    transform: rotate(90deg);
}

.cookie-modal__close:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 2px;
}

/* ----- Header ----- */
.cookie-modal__header {
    padding: 28px 32px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
}

.cookie-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 14px 3px 10px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    margin-bottom: 8px;
}

.cookie-modal__badge-icon {
    font-size: 0.75rem;
}

.cookie-modal__title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.cookie-modal__desc {
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
}

/* ----- Body ----- */
.cookie-modal__body {
    display: grid;
    grid-template-columns: 32fr 68fr;
    gap: 0;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ----- Left Panel: Information ----- */
.cookie-modal__info {
    padding: 24px 24px 20px 28px;
    background: rgba(124, 58, 237, 0.02);
    border-right: 1px solid rgba(0, 0, 0, 0.03);
    overflow-y: auto;
}

.cookie-modal__info-title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.cookie-modal__info-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.25s ease;
}

.info-card:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(4px);
}

.info-card__icon {
    font-size: 1.1rem;
    color: var(--color-lime);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-card__content {
    flex: 1;
    min-width: 0;
}

.info-card__title {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.info-card__desc {
    display: block;
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.3;
    margin-top: 2px;
}

/* ----- Right Panel: Controls ----- */
.cookie-modal__controls {
    padding: 20px 24px 16px 24px;
    overflow-y: auto;
    flex: 1;
}

.cookie-controls-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cookie-control {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.25s ease;
}

.cookie-control:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(124, 58, 237, 0.04);
}

.cookie-control--essential {
    background: rgba(5, 150, 105, 0.03);
    border-color: rgba(5, 150, 105, 0.06);
}

.cookie-control--essential:hover {
    background: rgba(5, 150, 105, 0.05);
    border-color: rgba(5, 150, 105, 0.08);
}

.cookie-control__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cookie-control__info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cookie-control__name {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.cookie-control__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 12px;
    border-radius: 50px;
}

.cookie-control__badge--active {
    color: #059669;
    background: rgba(5, 150, 105, 0.06);
    border: 1px solid rgba(5, 150, 105, 0.08);
}

.cookie-control__badge--optional {
    color: var(--color-purple);
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.06);
}

.cookie-control__badge--future {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.08);
}

.cookie-control__desc {
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
    margin: 4px 0 0;
}

/* ----- Toggle Switch ----- */
.cookie-control__toggle {
    flex-shrink: 0;
}

.toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.toggle-label {
    display: block;
    width: 44px;
    height: 26px;
    background: #d1d5db;
    border-radius: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.toggle-label .toggle-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--color-white);
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.toggle-input:checked + .toggle-label {
    background: var(--color-lime);
}

.toggle-input:checked + .toggle-label .toggle-slider {
    left: 21px;
}

.toggle-input:focus-visible + .toggle-label {
    outline: 3px solid var(--color-lime);
    outline-offset: 2px;
}

.toggle-input:disabled + .toggle-label {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-input:disabled + .toggle-label .toggle-slider {
    opacity: 0.7;
}

/* ----- Footer Action Bar ----- */
.cookie-modal__footer {
    padding: 16px 28px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cookie-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.cookie-modal__btn {
    padding: 10px 24px;
    border: none;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.cookie-modal__btn--accept {
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.3);
}

.cookie-modal__btn--accept:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.4);
}

.cookie-modal__btn--save {
    background: var(--color-purple);
    color: var(--color-white);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
}

.cookie-modal__btn--save:hover {
    background: #5b2fbf;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.3);
}

.cookie-modal__btn--reject {
    background: rgba(0, 0, 0, 0.03);
    color: var(--color-charcoal);
    border: 1px solid var(--color-gray-light);
}

.cookie-modal__btn--reject:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.08);
}

.cookie-modal__btn--reset {
    background: transparent;
    color: var(--color-gray-mid);
    border: 1px solid transparent;
    padding: 10px 16px;
}

.cookie-modal__btn--reset:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.04);
    border-color: rgba(220, 38, 38, 0.08);
}

.cookie-modal__footer-note {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cookie-modal__footer-note i {
    color: var(--color-lime);
}

.cookie-modal__link {
    color: var(--color-purple);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.2s ease;
}

.cookie-modal__link:hover {
    border-bottom-color: var(--color-purple);
}

/* ----- Ripple Effect ----- */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0);
    animation: rippleAnim 0.6s ease-out forwards;
    pointer-events: none;
}

/* ----- Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
    .cookie-modal,
    .cookie-modal__container,
    .cookie-modal__backdrop {
        animation: none !important;
    }
    .btn-ripple {
        display: none;
    }
}

/* ==================================================
END: Global Cookie Preferences Modal
================================================== */

/* ==================================================
START: Global Floating Cookie Settings Button
================================================== */

/* ----- Base Button ----- */
.cookie-settings-btn {
    position: fixed;
    bottom: 32px;
    left: 32px;
    z-index: 9998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: var(--color-purple);
    animation: cookieFloat 4s ease-in-out infinite;
    pointer-events: auto;
    text-decoration: none;
    outline: none;
}

.cookie-settings-btn:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 12px 48px rgba(124, 58, 237, 0.06), 0 0 0 2px rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.08);
    background: rgba(255, 255, 255, 0.8);
}

.cookie-settings-btn:active {
    transform: translateY(-2px) scale(0.96);
}

.cookie-settings-btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ----- Icon ----- */
.cookie-settings-btn__icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    line-height: 1;
}

.cookie-settings-btn:hover .cookie-settings-btn__icon {
    color: var(--color-lime-dark);
    transform: scale(1.05) rotate(-8deg);
}

/* ----- Floating Animation ----- */
@keyframes cookieFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.cookie-settings-btn--no-animation {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .cookie-settings-btn {
        animation: none !important;
    }
}

/* ----- Pulse Ring ----- */
.cookie-settings-btn__ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(192, 227, 74, 0.15);
    pointer-events: none;
    animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.12);
        opacity: 0.1;
    }
}

.cookie-settings-btn--no-animation .cookie-settings-btn__ring {
    animation: none !important;
    opacity: 0.3;
}

/* ----- Notification Dot ----- */
.cookie-settings-btn__dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-lime);
    border: 2px solid var(--color-white);
    box-shadow: 0 2px 8px rgba(192, 227, 74, 0.3);
    z-index: 3;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.cookie-settings-btn__dot--hidden {
    opacity: 0;
    transform: scale(0);
}

/* ----- Tooltip ----- */
.cookie-settings-btn__tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) scale(0.92) translateY(4px);
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    text-align: center;
    min-width: 120px;
    z-index: 10;
}

.cookie-settings-btn__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.85);
}

.cookie-settings-btn:hover .cookie-settings-btn__tooltip,
.cookie-settings-btn:focus .cookie-settings-btn__tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
}

.cookie-settings-btn__tooltip .tooltip-title {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.3;
}

.cookie-settings-btn__tooltip .tooltip-desc {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
    margin-top: 1px;
}

/* ----- Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
    .cookie-settings-btn,
    .cookie-settings-btn__ring,
    .cookie-settings-btn__dot {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================================================
END: Global Floating Cookie Settings Button
================================================== */

/* ==================================================
START: Sitemap Hero Banner
================================================== */

/* ----- Container ----- */
#sitemap-hero {
    padding: 40px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ----- Background Decorations ----- */
.sitemap-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.sitemap-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.sitemap-hero__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.sitemap-hero__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.sitemap-hero__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.sitemap-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.sitemap-hero__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.sitemap-hero__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.sitemap-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.sitemap-hero__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.sitemap-hero__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.sitemap-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#sitemap-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#sitemap-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#sitemap-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#sitemap-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#sitemap-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#sitemap-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#sitemap-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.sitemap-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */
.sitemap-hero__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sitemap-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.sitemap-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.sitemap-hero__title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.sitemap-hero__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.sitemap-hero__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.sitemap-hero__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 540px;
    margin: 0;
}

/* ----- Sitemap Metadata ----- */
.sitemap-hero__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.sitemap-hero__meta .meta-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sitemap-hero__meta .meta-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.04);
}

.sitemap-hero__meta .meta-card__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.sitemap-hero__meta .meta-card__label {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.sitemap-hero__meta .meta-card__value {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

/* ----- Hero Actions ----- */
.sitemap-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-sitemap-services {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-sitemap-services:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-sitemap-contact {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-sitemap-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Quick Navigation Badges ----- */
.sitemap-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 14px 4px 10px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
}

.nav-badge i {
    color: var(--color-lime);
    font-size: 0.8rem;
}

.nav-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

/* ============================================================
   HERO VISUAL
   ============================================================ */
.sitemap-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}

/* ----- Structure Tree ----- */
.structure-tree {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    height: 340px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.08);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    animation: floatTree 6s ease-in-out infinite;
}

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

/* Tree Root */
.tree-root {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.root-icon {
    font-size: 0.9rem;
    color: var(--color-lime);
}

.root-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

/* Branch Lines */
.tree-branches {
    position: relative;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.branch-line {
    position: absolute;
    height: 2px;
    background: rgba(124, 58, 237, 0.08);
    top: 50%;
    transform: translateY(-50%);
}

.branch-line--1 {
    left: 8%;
    right: 58%;
    width: 34%;
}

.branch-line--2 {
    left: 33%;
    right: 33%;
    width: 34%;
}

.branch-line--3 {
    left: 58%;
    right: 8%;
    width: 34%;
}

.branch-line::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.08);
}

/* Tree Nodes */
.tree-nodes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 12px;
    width: 100%;
    flex: 1;
    align-items: start;
    padding-top: 4px;
}

.tree-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: default;
}

.tree-node:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.06);
}

.tree-node .node-icon {
    font-size: 0.8rem;
    color: var(--color-purple);
}

.tree-node .node-label {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.tree-node--1 .node-icon { color: var(--color-lime); }
.tree-node--2 .node-icon { color: #2563eb; }
.tree-node--3 .node-icon { color: var(--color-purple); }
.tree-node--4 .node-icon { color: #f59e0b; }
.tree-node--5 .node-icon { color: #ec4899; }
.tree-node--6 .node-icon { color: #059669; }

/* ----- Floating Icons ----- */
.float-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    font-size: 1rem;
    color: var(--color-purple);
    animation: floatIcon 5s ease-in-out infinite;
    z-index: 2;
}

.float-icon--1 {
    top: 8%;
    right: 10%;
    animation-delay: 0s;
    color: var(--color-lime);
}
.float-icon--2 {
    top: 18%;
    left: 8%;
    animation-delay: 1.2s;
}
.float-icon--3 {
    bottom: 25%;
    right: 8%;
    animation-delay: 2.4s;
}
.float-icon--4 {
    bottom: 15%;
    left: 6%;
    animation-delay: 3.6s;
}

.float-icon:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.9);
}

/* ----- Connection Lines ----- */
.visual-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ----- Floating Orbs ----- */
.orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    animation: pulseGlow 4s ease-in-out infinite;
}

.orb--1 {
    width: 60px;
    height: 60px;
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.orb--2 {
    width: 40px;
    height: 40px;
    bottom: 30%;
    left: 15%;
    background: rgba(192, 227, 74, 0.04);
    border-color: rgba(192, 227, 74, 0.04);
    animation-delay: 1.5s;
}

.orb--3 {
    width: 25px;
    height: 25px;
    top: 55%;
    right: 30%;
    background: rgba(192, 227, 74, 0.03);
    border-color: rgba(192, 227, 74, 0.03);
    animation-delay: 3s;
}

/* ----- Focus States ----- */
.btn-sitemap-services:focus-visible,
.btn-sitemap-contact:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Sitemap Hero Banner
================================================== */

/* ==================================================
START: Main Website Pages
================================================== */

/* ----- Container ----- */
#sitemap-pages {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.sitemap-pages__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.sitemap-pages__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.sitemap-pages__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.sitemap-pages__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.sitemap-pages__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.sitemap-pages__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.sitemap-pages__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.sitemap-pages__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.sitemap-pages__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.sitemap-pages__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.sitemap-pages__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.sitemap-pages__grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#sitemap-pages .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#sitemap-pages .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#sitemap-pages .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#sitemap-pages .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#sitemap-pages .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#sitemap-pages .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#sitemap-pages .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.sitemap-pages__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sitemap-pages__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.sitemap-pages__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sitemap-pages__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.sitemap-pages__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.sitemap-pages__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.sitemap-pages__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.sitemap-pages__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED NAVIGATION BANNER
   ============================================================ */
.sitemap-pages__banner {
    margin-bottom: 48px;
}

.nav-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.nav-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nav-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.nav-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.nav-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-pages-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-pages-services:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-pages-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-pages-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.nav-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.nb-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.nb-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.nb-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.nb-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.nb-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.nb-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.nb-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.nb-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.nb-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.nb-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   MAIN PAGES GRID
   ============================================================ */
.sitemap-pages__grid {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sitemap-pages__grid:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.pages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.page-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.page-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px) translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.page-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.page-card__info {
    flex: 1;
    min-width: 0;
}

.page-card__title {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.page-card__desc {
    display: block;
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.page-card__badge {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-charcoal);
    background: var(--color-lime);
    padding: 1px 10px;
    border-radius: 50px;
    flex-shrink: 0;
    position: absolute;
    top: -6px;
    right: -4px;
    box-shadow: 0 2px 8px rgba(192, 227, 74, 0.2);
}

.page-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.page-card__link:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateX(2px);
}

/* ============================================================
   WEBSITE NAVIGATION FLOW
   ============================================================ */
.sitemap-pages__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.sitemap-pages__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.nav-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.nav-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.nav-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.nav-flow-node:hover .nav-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.nav-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.nav-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.nav-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.nav-flow-node--end .nav-flow-node__connector {
    display: none;
}

/* ============================================================
   QUICK NAVIGATION PANEL
   ============================================================ */
.sitemap-pages__quick {
    max-width: 900px;
    margin: 0 auto 40px;
}

.quick-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.quick-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.quick-panel__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-panel__section--search {
    grid-column: 1 / -1;
}

.quick-panel__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-mid);
}

.quick-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-panel__list li {
    padding: 3px 0;
}

.quick-panel__list li a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    text-decoration: none;
    transition: all 0.25s ease;
}

.quick-panel__list li a i {
    font-size: 0.55rem;
    color: var(--color-purple);
    transition: transform 0.25s ease;
}

.quick-panel__list li a:hover {
    color: var(--color-purple);
}

.quick-panel__list li a:hover i {
    transform: translateX(2px);
}

.quick-panel__list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.quick-panel__list--inline li {
    padding: 2px 0;
}

.quick-panel__list--inline li a {
    font-size: 0.78rem;
}

/* Quick Search */
.quick-panel__search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    padding: 0 4px 0 14px;
    transition: all 0.3s ease;
}

.quick-panel__search:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.quick-panel__search i {
    color: var(--color-gray-mid);
    font-size: 0.85rem;
}

.quick-panel__input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
}

.quick-panel__input::placeholder {
    color: var(--color-gray-light);
}

.quick-panel__btn {
    padding: 6px 18px;
    border: none;
    border-radius: 8px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
}

.quick-panel__btn:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 227, 74, 0.2);
}

/* ============================================================
   INFORMATION BANNER
   ============================================================ */
.sitemap-pages__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-pages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-pages:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-pages__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-pages__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-pages__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-pages__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-pages__badge {
    flex-shrink: 0;
}

.notice-banner-pages__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-pages-services:focus-visible,
.btn-banner-pages-contact:focus-visible,
.page-card__link:focus-visible,
.quick-panel__btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Main Website Pages
================================================== */

/* ==================================================
START: Services & Solutions
================================================== */

/* ----- Container ----- */
#sitemap-services {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.sitemap-services__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.sitemap-services__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.sitemap-services__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.sitemap-services__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.sitemap-services__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.sitemap-services__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.sitemap-services__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.sitemap-services__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.sitemap-services__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.sitemap-services__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.sitemap-services__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.sitemap-services__grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#sitemap-services .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#sitemap-services .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#sitemap-services .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#sitemap-services .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#sitemap-services .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#sitemap-services .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#sitemap-services .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.sitemap-services__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sitemap-services__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.sitemap-services__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sitemap-services__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.sitemap-services__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.sitemap-services__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.sitemap-services__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.sitemap-services__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED SERVICES BANNER
   ============================================================ */
.sitemap-services__banner {
    margin-bottom: 48px;
}

.services-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.services-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.services-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.services-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.services-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.services-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-services-all {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-services-all:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-services-quote {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-services-quote:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.services-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.sv-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.sv-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.sv-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.sv-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.sv-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.sv-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.sv-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.sv-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.sv-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.sv-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   SERVICE CATEGORIES GRID
   ============================================================ */
.sitemap-services__categories {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sitemap-services__categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.service-category-card {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-category-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.service-category-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    cursor: pointer;
    user-select: none;
}

.service-category-card__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.service-category-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    flex: 1;
}

.service-category-card__toggle {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.02);
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.service-category-card__toggle:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-charcoal);
}

.service-category-card__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.service-category-card__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 16px;
}

.service-category-card__body--open {
    max-height: 400px;
    padding: 0 16px 12px;
}

.service-category-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-category-card__list li {
    padding: 4px 0;
}

.service-category-card__list li a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: all 0.25s ease;
}

.service-category-card__list li a::before {
    content: '▸';
    color: var(--color-purple);
    font-size: 0.6rem;
    opacity: 0.5;
}

.service-category-card__list li a:hover {
    color: var(--color-purple);
    transform: translateX(4px);
}

/* ============================================================
   SOLUTIONS NAVIGATION FLOW
   ============================================================ */
.sitemap-services__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.sitemap-services__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.solutions-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.solutions-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.solutions-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.solutions-flow-node:hover .solutions-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.solutions-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.solutions-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.solutions-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.solutions-flow-node--end .solutions-flow-node__connector {
    display: none;
}

/* ============================================================
   QUICK SERVICE FINDER
   ============================================================ */
.sitemap-services__finder {
    max-width: 900px;
    margin: 0 auto 40px;
}

.finder-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.finder-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.finder-panel__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.finder-panel__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-mid);
}

.finder-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.finder-panel__list li {
    padding: 3px 0;
}

.finder-panel__list li a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    text-decoration: none;
    transition: all 0.25s ease;
}

.finder-panel__list li a i {
    font-size: 0.55rem;
    color: var(--color-purple);
    transition: transform 0.25s ease;
}

.finder-panel__list li a:hover {
    color: var(--color-purple);
}

.finder-panel__list li a:hover i {
    transform: translateX(2px);
}

.finder-panel__list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.finder-panel__list--inline li {
    padding: 2px 0;
}

.finder-panel__list--inline li a {
    font-size: 0.78rem;
}

/* ============================================================
   INFORMATION BANNER
   ============================================================ */
.sitemap-services__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-services {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-services:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-services__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-services__icon {
    font-size: 2rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.notice-banner-services__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-services__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-services__badge {
    flex-shrink: 0;
}

.notice-banner-services__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-services-all:focus-visible,
.btn-banner-services-quote:focus-visible,
.service-category-card__toggle:focus-visible,
.finder-panel__list li a:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Services & Solutions
================================================== */

/* ==================================================
START: Resources & Legal Pages
================================================== */

/* ----- Container ----- */
#sitemap-resources {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.sitemap-resources__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.sitemap-resources__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.sitemap-resources__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.sitemap-resources__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.sitemap-resources__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.sitemap-resources__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.sitemap-resources__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.sitemap-resources__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.sitemap-resources__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.sitemap-resources__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.sitemap-resources__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.sitemap-resources__grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#sitemap-resources .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#sitemap-resources .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#sitemap-resources .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#sitemap-resources .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#sitemap-resources .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#sitemap-resources .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#sitemap-resources .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.sitemap-resources__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sitemap-resources__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.sitemap-resources__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sitemap-resources__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.sitemap-resources__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.sitemap-resources__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.sitemap-resources__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.sitemap-resources__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   FEATURED RESOURCES BANNER
   ============================================================ */
.sitemap-resources__banner {
    margin-bottom: 48px;
}

.resources-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.resources-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.resources-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.resources-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.resources-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.resources-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.resources-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-resources-docs {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-resources-docs:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-resources-blog {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-resources-blog:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.resources-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.rs-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.rs-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.rs-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.rs-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.rs-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.rs-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.rs-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.rs-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.rs-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.rs-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   RESOURCE CATEGORIES GRID
   ============================================================ */
.sitemap-resources__categories {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sitemap-resources__categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.resource-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.resource-category-card {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.resource-category-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.resource-category-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    cursor: pointer;
    user-select: none;
}

.resource-category-card__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.resource-category-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    flex: 1;
}

.resource-category-card__toggle {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.02);
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.resource-category-card__toggle:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-charcoal);
}

.resource-category-card__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.resource-category-card__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 16px;
}

.resource-category-card__body--open {
    max-height: 400px;
    padding: 0 16px 12px;
}

.resource-category-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resource-category-card__list li {
    padding: 4px 0;
}

.resource-category-card__list li a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: all 0.25s ease;
}

.resource-category-card__list li a::before {
    content: '▸';
    color: var(--color-purple);
    font-size: 0.6rem;
    opacity: 0.5;
}

.resource-category-card__list li a:hover {
    color: var(--color-purple);
    transform: translateX(4px);
}

.resource-category-card__list .badge-future {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 8px;
    border-radius: 50px;
    margin-left: 4px;
    letter-spacing: 0.02em;
}

/* ============================================================
   CONTENT DISCOVERY FLOW
   ============================================================ */
.sitemap-resources__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.sitemap-resources__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.discovery-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.discovery-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.discovery-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.discovery-flow-node:hover .discovery-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.discovery-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.discovery-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.discovery-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.discovery-flow-node--end .discovery-flow-node__connector {
    display: none;
}

/* ============================================================
   QUICK RESOURCE CENTER
   ============================================================ */
.sitemap-resources__center {
    max-width: 900px;
    margin: 0 auto 40px;
}

.resource-center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.resource-center:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.resource-center__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resource-center__section--search {
    grid-column: 1 / -1;
}

.resource-center__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-mid);
}

.resource-center__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resource-center__list li {
    padding: 3px 0;
}

.resource-center__list li a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    text-decoration: none;
    transition: all 0.25s ease;
}

.resource-center__list li a i {
    font-size: 0.55rem;
    color: var(--color-purple);
    transition: transform 0.25s ease;
}

.resource-center__list li a:hover {
    color: var(--color-purple);
}

.resource-center__list li a:hover i {
    transform: translateX(2px);
}

/* Quick Search */
.resource-center__search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    padding: 0 4px 0 14px;
    transition: all 0.3s ease;
}

.resource-center__search:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.resource-center__search i {
    color: var(--color-gray-mid);
    font-size: 0.85rem;
}

.resource-center__input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
}

.resource-center__input::placeholder {
    color: var(--color-gray-light);
}

.resource-center__btn {
    padding: 6px 18px;
    border: none;
    border-radius: 8px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
}

.resource-center__btn:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 227, 74, 0.2);
}

/* ============================================================
   INFORMATION BANNER
   ============================================================ */
.sitemap-resources__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-resources {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-resources:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-resources__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-resources__icon {
    font-size: 2rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.notice-banner-resources__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-resources__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-resources__badge {
    flex-shrink: 0;
}

.notice-banner-resources__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-resources-docs:focus-visible,
.btn-banner-resources-blog:focus-visible,
.resource-category-card__toggle:focus-visible,
.resource-center__btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Resources & Legal Pages
================================================== */

/* ==================================================
START: Contact, Support & Social Links
================================================== */

/* ----- Container ----- */
#sitemap-contact {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.sitemap-contact__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.sitemap-contact__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.sitemap-contact__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.sitemap-contact__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.sitemap-contact__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.sitemap-contact__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.sitemap-contact__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.sitemap-contact__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.sitemap-contact__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.sitemap-contact__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.sitemap-contact__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.sitemap-contact__grid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    pointer-events: none;
}

/* Floating Particles */
#sitemap-contact .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#sitemap-contact .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#sitemap-contact .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#sitemap-contact .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#sitemap-contact .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#sitemap-contact .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#sitemap-contact .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.sitemap-contact__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sitemap-contact__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.sitemap-contact__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sitemap-contact__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.sitemap-contact__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.sitemap-contact__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.sitemap-contact__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.sitemap-contact__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED CONTACT BANNER
   ============================================================ */
.sitemap-contact__banner {
    margin-bottom: 48px;
}

.contact-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.contact-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contact-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.contact-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.contact-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-contact-form {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-contact-form:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-contact-quote {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-contact-quote:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.contact-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.ct-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ct-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.ct-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.ct-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.ct-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.ct-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.ct-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.ct-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.ct-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.ct-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   CONTACT CATEGORIES GRID
   ============================================================ */
.sitemap-contact__categories {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sitemap-contact__categories:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.contact-category-card {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-category-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.contact-category-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    cursor: pointer;
    user-select: none;
}

.contact-category-card__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.contact-category-card__title {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    flex: 1;
}

.contact-category-card__toggle {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.02);
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.contact-category-card__toggle:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-charcoal);
}

.contact-category-card__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.contact-category-card__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 16px;
}

.contact-category-card__body--open {
    max-height: 400px;
    padding: 0 16px 12px;
}

.contact-category-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-category-card__list li {
    padding: 4px 0;
}

.contact-category-card__list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: all 0.25s ease;
}

.contact-category-card__list li a i:first-child {
    width: 16px;
    text-align: center;
    color: var(--color-purple);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.contact-category-card__list li a:hover {
    color: var(--color-purple);
    transform: translateX(4px);
}

.contact-category-card__list .badge-status {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.08);
    padding: 1px 8px;
    border-radius: 50px;
    margin-left: 4px;
    letter-spacing: 0.02em;
}

.contact-category-card__list .badge-future {
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 8px;
    border-radius: 50px;
    margin-left: 4px;
    letter-spacing: 0.02em;
}

.contact-category-card__address {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    text-decoration: none;
    transition: all 0.25s ease;
}

.contact-category-card__address i {
    width: 16px;
    text-align: center;
    color: var(--color-purple);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.contact-category-card__address:hover {
    color: var(--color-purple);
    transform: translateX(4px);
}

/* ============================================================
   COMMUNICATION JOURNEY FLOW
   ============================================================ */
.sitemap-contact__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.sitemap-contact__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.comm-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.comm-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.comm-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.comm-flow-node:hover .comm-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.comm-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.comm-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.comm-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.comm-flow-node--end .comm-flow-node__connector {
    display: none;
}

/* ============================================================
   SOCIAL MEDIA HUB
   ============================================================ */
.sitemap-contact__social {
    max-width: 1000px;
    margin: 0 auto 40px;
}

.social-hub {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-hub:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.social-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.social-card:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-4px) translateX(4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.social-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-white);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.social-card:hover .social-card__icon {
    transform: scale(1.1);
}

.social-card__info {
    flex: 1;
    min-width: 0;
}

.social-card__name {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.social-card__desc {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.social-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.social-card__link:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateX(2px);
}

/* Social Card Colors */
.social-card--linkedin .social-card__icon {
    background: #0A66C2;
}
.social-card--facebook .social-card__icon {
    background: #1877F2;
}
.social-card--instagram .social-card__icon {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
}
.social-card--twitter .social-card__icon {
    background: #000000;
}
.social-card--youtube .social-card__icon {
    background: #FF0000;
}
.social-card--github .social-card__icon {
    background: #333333;
}

/* Social Card Hover Glow */
.social-card--linkedin:hover {
    border-color: rgba(10, 102, 194, 0.15);
    box-shadow: 0 4px 16px rgba(10, 102, 194, 0.06);
}
.social-card--facebook:hover {
    border-color: rgba(24, 119, 242, 0.15);
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.06);
}
.social-card--instagram:hover {
    border-color: rgba(221, 42, 123, 0.15);
    box-shadow: 0 4px 16px rgba(221, 42, 123, 0.06);
}
.social-card--twitter:hover {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.social-card--youtube:hover {
    border-color: rgba(255, 0, 0, 0.15);
    box-shadow: 0 4px 16px rgba(255, 0, 0, 0.06);
}
.social-card--github:hover {
    border-color: rgba(51, 51, 51, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   SUPPORT INFORMATION BANNER
   ============================================================ */
.sitemap-contact__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-contact:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-contact__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-contact__icon {
    font-size: 2rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.notice-banner-contact__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-contact__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-contact__badge {
    flex-shrink: 0;
}

.notice-banner-contact__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-banner-contact-form:focus-visible,
.btn-banner-contact-quote:focus-visible,
.contact-category-card__toggle:focus-visible,
.social-card__link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Contact, Support & Social Links
================================================== */

/* ==================================================
START: Final CTA & Navigation Summary
================================================== */

/* ----- Container ----- */
#sitemap-final {
    padding: 80px 0 0;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.sitemap-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.sitemap-final__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.sitemap-final__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.sitemap-final__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.sitemap-final__glow--3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-purple);
    opacity: 0.02;
}

.sitemap-final__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.sitemap-final__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.sitemap-final__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
}

.sitemap-final__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.sitemap-final__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.sitemap-final__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 40%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Floating Particles */
#sitemap-final .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#sitemap-final .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#sitemap-final .particle--2 {
    width: 12px;
    height: 12px;
    top: 80%;
    left: 88%;
    animation-delay: 1.2s;
}

#sitemap-final .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#sitemap-final .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 12%;
    animation-delay: 0.6s;
}

#sitemap-final .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#sitemap-final .particle--6 {
    width: 9px;
    height: 9px;
    top: 60%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.sitemap-final__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sitemap-final__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.sitemap-final__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sitemap-final__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.sitemap-final__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.sitemap-final__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.sitemap-final__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.sitemap-final__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   NAVIGATION SUMMARY BANNER
   ============================================================ */
.sitemap-final__banner {
    margin-bottom: 48px;
}

.final-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.final-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.final-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.final-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.final-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.final-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.final-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-banner-final-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-banner-final-services:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-banner-final-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-banner-final-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.final-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.fn-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.fn-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.fn-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.fn-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.fn-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.fn-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.fn-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.fn-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.fn-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.fn-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   WEBSITE HIGHLIGHTS GRID
   ============================================================ */
.sitemap-final__highlights {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sitemap-final__highlights:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.highlight-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.highlight-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px) translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.highlight-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.highlight-card__info {
    flex: 1;
    min-width: 0;
}

.highlight-card__title {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.highlight-card__desc {
    display: block;
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.highlight-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.highlight-card__link:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateX(2px);
}

/* ============================================================
   NAVIGATION JOURNEY TIMELINE
   ============================================================ */
.sitemap-final__timeline {
    max-width: 1000px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.sitemap-final__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.journey-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.timeline-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.timeline-node:hover .timeline-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.timeline-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.timeline-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.timeline-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.timeline-node--end .timeline-node__connector {
    display: none;
}

/* ============================================================
   FINAL CTA BANNER
   ============================================================ */
.sitemap-final__cta {
    max-width: 1100px;
    margin: 0 auto 48px;
}

.final-cta {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.final-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.08);
}

.final-cta__content {
    padding: 40px 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.final-cta__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.final-cta__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.final-cta__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-final-getstarted {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: linear-gradient(135deg, var(--color-lime), #5bcf4e);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-cta-final-getstarted:hover {
    background: linear-gradient(135deg, var(--color-lime-dark), #4ab83e);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.5);
}

.btn-cta-final-services {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-cta-final-services:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Final CTA Visual ----- */
.final-cta__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 200px;
}

.final-cta__icon-ring {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.final-cta__icon-ring span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}

.final-cta__icon-ring span:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.final-cta__pulse {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.04);
    animation: pulseRing 3s ease-in-out infinite;
}

.final-cta__pulse::before {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.03);
    animation: pulseRing 3s ease-in-out infinite 1s;
}

@keyframes pulseRing {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.2;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
}

/* ============================================================
   FOOTER TRANSITION
   ============================================================ */
.sitemap-final__transition {
    max-width: 1100px;
    margin: 0 auto 0;
    padding-bottom: 0;
}

.footer-transition {
    position: relative;
    padding: 30px 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-transition__line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.15), rgba(124, 58, 237, 0.01));
    position: relative;
}

.footer-transition__line::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-purple);
    opacity: 0.2;
}

.footer-transition__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.footer-transition__glow--1 {
    width: 200px;
    height: 200px;
    top: -60px;
    left: 20%;
    background: var(--color-purple);
    opacity: 0.04;
}

.footer-transition__glow--2 {
    width: 200px;
    height: 200px;
    top: -60px;
    right: 20%;
    background: var(--color-lime);
    opacity: 0.03;
}

.footer-transition__nodes {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.ft-node {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-purple);
    opacity: 0.08;
    animation: nodePulse 2s ease-in-out infinite;
}

.ft-node:nth-child(1) { animation-delay: 0s; }
.ft-node:nth-child(2) { animation-delay: 0.4s; }
.ft-node:nth-child(3) { animation-delay: 0.8s; }
.ft-node:nth-child(4) { animation-delay: 1.2s; }
.ft-node:nth-child(5) { animation-delay: 1.6s; }

@keyframes nodePulse {
    0%, 100% { opacity: 0.08; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.3); }
}

.footer-transition__text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-transition__text i {
    font-size: 0.6rem;
    animation: bounceDown 2s ease-in-out infinite;
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* ----- Focus States ----- */
.btn-banner-final-services:focus-visible,
.btn-banner-final-contact:focus-visible,
.highlight-card__link:focus-visible,
.btn-cta-final-getstarted:focus-visible,
.btn-cta-final-services:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Final CTA & Navigation Summary
================================================== */

/* ==================================================
START: 404 Hero Section
================================================== */

/* ----- Container ----- */
#error-hero {
    padding: 60px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ----- Background Decorations ----- */
.error-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.error-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.error-hero__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.05;
}

.error-hero__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -100px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.04;
}

.error-hero__glow--3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.error-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.error-hero__orb--1 {
    width: 100px;
    height: 100px;
    top: 15%;
    right: 12%;
    animation-delay: 0s;
}

.error-hero__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 25%;
    left: 15%;
    animation-delay: 2s;
}

.error-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.error-hero__shape--1 {
    width: 160px;
    height: 160px;
    top: 10%;
    left: 20%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.error-hero__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 35%;
    right: 10%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Floating Particles */
#error-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#error-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 10%;
    left: 6%;
    animation-delay: 0s;
}

#error-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 78%;
    left: 90%;
    animation-delay: 1.2s;
}

#error-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 20%;
    left: 85%;
    animation-delay: 2.4s;
}

#error-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.6s;
}

#error-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 40%;
    left: 4%;
    animation-delay: 3s;
}

#error-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 50%;
    left: 94%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.error-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */
.error-hero__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* ----- Badge ----- */
.error-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 18px 4px 16px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.error-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

/* ============================================================
   ILLUSTRATION
   ============================================================ */
.error-hero__illustration {
    margin: 0 auto 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-illustration {
    position: relative;
    width: 320px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- 404 Number ----- */
.error-illustration__number {
    position: absolute;
    font-size: 6rem;
    font-weight: var(--font-weight-black);
    color: rgba(124, 58, 237, 0.04);
    letter-spacing: -0.04em;
    user-select: none;
    animation: float404 6s ease-in-out infinite;
}

@keyframes float404 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.02); }
}

/* ----- Browser Window ----- */
.error-illustration__browser {
    position: relative;
    width: 200px;
    height: 130px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px 10px 10px;
    z-index: 2;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.02);
    animation: floatBrowser 5s ease-in-out infinite;
}

@keyframes floatBrowser {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(0.5deg); }
    75% { transform: translateY(4px) rotate(-0.5deg); }
}

.error-illustration__browser-dots {
    display: flex;
    gap: 5px;
    margin-bottom: 6px;
}

.error-illustration__browser-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.error-illustration__browser-dots span:nth-child(1) { background: rgba(255, 100, 100, 0.3); }
.error-illustration__browser-dots span:nth-child(2) { background: rgba(255, 200, 50, 0.3); }
.error-illustration__browser-dots span:nth-child(3) { background: rgba(50, 200, 100, 0.3); }

.error-illustration__browser-url {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 3px 10px;
    margin-bottom: 6px;
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    font-family: var(--font-family-mono);
    overflow: hidden;
}

.error-illustration__browser-url-text {
    color: var(--color-gray-mid);
    opacity: 0.6;
}

.error-illustration__browser-url-error {
    color: #ef4444;
    opacity: 0.7;
    animation: pulseError 2s ease-in-out infinite;
}

@keyframes pulseError {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.error-illustration__browser-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.04);
}

.error-illustration__browser-icon {
    font-size: 1.5rem;
    color: rgba(239, 68, 68, 0.15);
    animation: pulseIcon 3s ease-in-out infinite;
}

@keyframes pulseIcon {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.05); }
}

/* ----- Compass ----- */
.error-illustration__compass {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: rgba(124, 58, 237, 0.3);
    z-index: 3;
    animation: floatCompass 6s ease-in-out infinite;
}

@keyframes floatCompass {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-6px, -4px) rotate(15deg); }
    75% { transform: translate(6px, 4px) rotate(-10deg); }
}

.error-illustration__compass-needle {
    position: absolute;
    width: 2px;
    height: 16px;
    background: linear-gradient(to top, var(--color-purple), var(--color-lime));
    border-radius: 1px;
    transform-origin: bottom center;
    animation: needleSpin 8s ease-in-out infinite;
}

@keyframes needleSpin {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(45deg); }
    75% { transform: rotate(-30deg); }
}

/* ----- Search Icon ----- */
.error-illustration__search {
    position: absolute;
    top: 4px;
    left: 12px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.08);
    z-index: 3;
    animation: floatSearch 5s ease-in-out infinite;
}

@keyframes floatSearch {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4px, -4px) scale(1.1); }
}

/* ----- Path Lines ----- */
.error-illustration__path {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.05), rgba(192, 227, 74, 0.05));
    border-radius: 1px;
    opacity: 0.6;
}

.error-illustration__path--1 {
    width: 60px;
    top: 30%;
    left: -20px;
    transform: rotate(-15deg);
    animation: pathPulse 4s ease-in-out infinite 0s;
}

.error-illustration__path--2 {
    width: 40px;
    bottom: 25%;
    right: -12px;
    transform: rotate(20deg);
    animation: pathPulse 4s ease-in-out infinite 1s;
}

.error-illustration__path--3 {
    width: 30px;
    top: 55%;
    left: -8px;
    transform: rotate(40deg);
    animation: pathPulse 4s ease-in-out infinite 2s;
}

@keyframes pathPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* ----- Dots ----- */
.error-illustration__dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.02);
}

.error-illustration__dot--1 {
    width: 8px;
    height: 8px;
    top: 15%;
    right: 5%;
    animation: dotFloat 5s ease-in-out infinite 0s;
}

.error-illustration__dot--2 {
    width: 6px;
    height: 6px;
    bottom: 10%;
    left: 25%;
    animation: dotFloat 5s ease-in-out infinite 1.5s;
}

.error-illustration__dot--3 {
    width: 10px;
    height: 10px;
    top: 40%;
    right: 30%;
    animation: dotFloat 5s ease-in-out infinite 3s;
}

@keyframes dotFloat {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    50% { transform: translate(4px, -6px); opacity: 0.8; }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.error-hero__title {
    font-size: 2.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
}

.error-hero__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto 28px;
}

/* ============================================================
   CTA BUTTONS
   ============================================================ */
.error-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.btn-error-home {
    padding: 12px 28px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-error-home:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-error-home i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-error-home:hover i:last-child {
    transform: translateX(4px);
}

.btn-error-services {
    padding: 12px 28px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-error-services:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   QUICK ACTION CHIPS
   ============================================================ */
.error-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 12px;
}

.error-hero__chips-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 4px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px 5px 14px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chip i {
    font-size: 0.65rem;
    color: var(--color-purple);
    transition: transform 0.3s ease;
}

.chip:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(124, 58, 237, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.chip:hover i {
    transform: scale(1.1);
}

.chip--home:hover { border-color: var(--color-purple); }
.chip--services:hover { border-color: var(--color-lime); }
.chip--contact:hover { border-color: var(--color-purple); }
.chip--blog:hover { border-color: var(--color-lime); }
.chip--sitemap:hover { border-color: var(--color-purple); }

/* ----- Focus States ----- */
.btn-error-home:focus-visible,
.btn-error-services:focus-visible,
.chip:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: 404 Hero Section
================================================== */

/* ==================================================
START: Smart Navigation & Quick Links
================================================== */

/* ----- Container ----- */
#error-nav {
    padding: 60px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.error-nav__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.error-nav__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.error-nav__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.error-nav__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.error-nav__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.error-nav__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.error-nav__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.error-nav__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.error-nav__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.error-nav__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.error-nav__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Floating Particles */
#error-nav .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#error-nav .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#error-nav .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#error-nav .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#error-nav .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#error-nav .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#error-nav .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.error-nav__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.error-nav__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.error-nav__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.error-nav__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.error-nav__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.error-nav__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.error-nav__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.error-nav__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   RECOVERY NAVIGATION BANNER
   ============================================================ */
.error-nav__banner {
    margin-bottom: 48px;
}

.recovery-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.recovery-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.recovery-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recovery-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recovery-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.recovery-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.recovery-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-recovery-home {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-recovery-home:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-recovery-home i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-recovery-home:hover i:last-child {
    transform: translateX(4px);
}

.btn-recovery-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-recovery-services:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.recovery-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.rc-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.rc-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.rc-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.rc-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.rc-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.rc-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.rc-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.rc-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.rc-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.rc-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   QUICK LINKS GRID
   ============================================================ */
.error-nav__grid {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.error-nav__grid:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.quick-link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.quick-link-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px) translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.quick-link-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.quick-link-card__info {
    flex: 1;
    min-width: 0;
}

.quick-link-card__title {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.quick-link-card__desc {
    display: block;
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.quick-link-card__badge {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-charcoal);
    background: var(--color-lime);
    padding: 1px 10px;
    border-radius: 50px;
    flex-shrink: 0;
    position: absolute;
    top: -6px;
    right: -4px;
    box-shadow: 0 2px 8px rgba(192, 227, 74, 0.2);
}

.quick-link-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.quick-link-card__link:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateX(2px);
}

/* ============================================================
   NAVIGATION RECOVERY FLOW
   ============================================================ */
.error-nav__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.error-nav__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.recovery-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.recovery-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.recovery-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.recovery-flow-node:hover .recovery-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.recovery-flow-node--error .recovery-flow-node__icon {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.06);
    color: #ef4444;
}

.recovery-flow-node--error:hover .recovery-flow-node__icon {
    background: linear-gradient(135deg, #ef4444, #f59e0b);
    color: var(--color-white);
    border-color: transparent;
}

.recovery-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.recovery-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.recovery-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.recovery-flow-node--end .recovery-flow-node__connector {
    display: none;
}

/* ============================================================
   POPULAR DESTINATIONS PANEL
   ============================================================ */
.error-nav__destinations {
    max-width: 900px;
    margin: 0 auto 40px;
}

.destinations-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.destinations-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.destinations-panel__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.destinations-panel__section--search {
    grid-column: 1 / -1;
}

.destinations-panel__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-mid);
}

.destinations-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.destinations-panel__list li {
    padding: 3px 0;
}

.destinations-panel__list li a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
    text-decoration: none;
    transition: all 0.25s ease;
}

.destinations-panel__list li a i {
    font-size: 0.55rem;
    color: var(--color-purple);
    transition: transform 0.25s ease;
}

.destinations-panel__list li a:hover {
    color: var(--color-purple);
}

.destinations-panel__list li a:hover i {
    transform: translateX(2px);
}

/* Quick Search */
.destinations-panel__search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--color-gray-light);
    border-radius: 12px;
    padding: 0 4px 0 14px;
    transition: all 0.3s ease;
}

.destinations-panel__search:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.destinations-panel__search i {
    color: var(--color-gray-mid);
    font-size: 0.85rem;
}

.destinations-panel__input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
}

.destinations-panel__input::placeholder {
    color: var(--color-gray-light);
}

.destinations-panel__btn {
    padding: 6px 18px;
    border: none;
    border-radius: 8px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
}

.destinations-panel__btn:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 227, 74, 0.2);
}

/* ============================================================
   INFORMATION BANNER
   ============================================================ */
.error-nav__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-error:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-error__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-error__icon {
    font-size: 2rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.notice-banner-error__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-error__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-error__badge {
    flex-shrink: 0;
}

.notice-banner-error__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-recovery-home:focus-visible,
.btn-recovery-services:focus-visible,
.quick-link-card__link:focus-visible,
.destinations-panel__btn:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Smart Navigation & Quick Links
================================================== */

/* ==================================================
START: Popular Services & Resources
================================================== */

/* ----- Container ----- */
#error-popular {
    padding: 60px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.error-popular__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.error-popular__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.error-popular__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.error-popular__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.error-popular__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.error-popular__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.error-popular__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.error-popular__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.error-popular__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.error-popular__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.error-popular__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Floating Particles */
#error-popular .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#error-popular .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#error-popular .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#error-popular .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#error-popular .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#error-popular .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#error-popular .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.error-popular__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.error-popular__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.error-popular__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.error-popular__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.error-popular__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.error-popular__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.error-popular__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.error-popular__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   FEATURED CONTENT BANNER
   ============================================================ */
.error-popular__banner {
    margin-bottom: 48px;
}

.popular-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.popular-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.popular-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popular-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.popular-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.popular-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.popular-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-popular-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-popular-services:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-popular-services i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-popular-services:hover i:last-child {
    transform: translateX(4px);
}

.btn-popular-blog {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-popular-blog:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.popular-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.pp-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.pp-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.pp-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.pp-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.pp-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.pp-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.pp-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.pp-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.pp-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.pp-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   POPULAR SERVICES GRID
   ============================================================ */
.error-popular__services {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.error-popular__services:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.popular-service-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.popular-service-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px) translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.popular-service-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.popular-service-card__info {
    flex: 1;
    min-width: 0;
}

.popular-service-card__title {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.popular-service-card__desc {
    display: block;
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.popular-service-card__badge {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-charcoal);
    background: var(--color-lime);
    padding: 1px 10px;
    border-radius: 50px;
    flex-shrink: 0;
    position: absolute;
    top: -6px;
    right: -4px;
    box-shadow: 0 2px 8px rgba(192, 227, 74, 0.2);
}

.popular-service-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.popular-service-card__link:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateX(2px);
}

/* ============================================================
   FEATURED RESOURCES GRID
   ============================================================ */
.error-popular__resources {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.error-popular__resources:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.popular-resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.popular-resource-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.popular-resource-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(124, 58, 237, 0.15);
    transform: translateY(-4px) translateX(4px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.popular-resource-card__icon {
    font-size: 1.3rem;
    color: var(--color-lime);
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.popular-resource-card__info {
    flex: 1;
    min-width: 0;
}

.popular-resource-card__title {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.popular-resource-card__desc {
    display: block;
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.popular-resource-card__badge {
    font-size: 0.5rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-white);
    background: var(--color-purple);
    padding: 1px 10px;
    border-radius: 50px;
    flex-shrink: 0;
    position: absolute;
    top: -6px;
    right: -4px;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.popular-resource-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.popular-resource-card__link:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateX(2px);
}

/* ============================================================
   DISCOVERY JOURNEY FLOW
   ============================================================ */
.error-popular__flow {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.error-popular__flow:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.discovery-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.discovery-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.discovery-flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.discovery-flow-node:hover .discovery-flow-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.discovery-flow-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.discovery-flow-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.discovery-flow-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.discovery-flow-node--end .discovery-flow-node__connector {
    display: none;
}

/* ============================================================
   RECOMMENDATION BANNER
   ============================================================ */
.error-popular__recommendation {
    max-width: 1000px;
    margin: 0 auto 0;
}

.recommendation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 20px;
}

.recommendation-banner:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.recommendation-banner__content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.recommendation-banner__icon {
    font-size: 2rem;
    color: var(--color-lime);
    flex-shrink: 0;
    margin-top: 2px;
}

.recommendation-banner__text {
    flex: 1;
}

.recommendation-banner__title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.recommendation-banner__desc {
    font-size: 0.88rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 500px;
}

.recommendation-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

.btn-recommend-explore {
    padding: 10px 24px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-recommend-explore:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-recommend-explore i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-recommend-explore:hover i:last-child {
    transform: translateX(4px);
}

.btn-recommend-contact {
    padding: 10px 24px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-recommend-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Focus States ----- */
.btn-popular-services:focus-visible,
.btn-popular-blog:focus-visible,
.popular-service-card__link:focus-visible,
.popular-resource-card__link:focus-visible,
.btn-recommend-explore:focus-visible,
.btn-recommend-contact:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Popular Services & Resources
================================================== */

/* ==================================================
START: Search & Contact Assistance
================================================== */

/* ----- Container ----- */
#error-assist {
    padding: 60px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.error-assist__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.error-assist__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.error-assist__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.error-assist__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.error-assist__glow--3 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.error-assist__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.error-assist__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.error-assist__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.error-assist__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.error-assist__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.error-assist__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 30%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Floating Particles */
#error-assist .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#error-assist .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#error-assist .particle--2 {
    width: 12px;
    height: 12px;
    top: 75%;
    left: 88%;
    animation-delay: 1.2s;
}

#error-assist .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#error-assist .particle--4 {
    width: 10px;
    height: 10px;
    top: 82%;
    left: 12%;
    animation-delay: 0.6s;
}

#error-assist .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#error-assist .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.error-assist__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.error-assist__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.error-assist__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.error-assist__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.error-assist__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.error-assist__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.error-assist__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.error-assist__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   SEARCH ASSISTANCE BANNER
   ============================================================ */
.error-assist__banner {
    margin-bottom: 48px;
}

.search-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.search-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.search-banner__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.search-banner__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.search-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.search-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-assist-search {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-assist-search:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-assist-search i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-assist-search:hover i:last-child {
    transform: translateX(4px);
}

.btn-assist-contact {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-assist-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.search-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.as-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.as-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.as-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.as-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.as-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.as-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.as-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.as-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.as-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.as-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   SMART SEARCH PANEL
   ============================================================ */
.error-assist__search {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.error-assist__search:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.smart-search__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.smart-search__icon {
    font-size: 1.1rem;
    color: var(--color-purple);
}

.smart-search__title {
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.smart-search__badge {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    padding: 2px 12px;
    border-radius: 50px;
    margin-left: auto;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ----- Search Box ----- */
.smart-search__box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid var(--color-gray-light);
    border-radius: 14px;
    padding: 0 4px 0 16px;
    transition: all 0.3s ease;
    margin-bottom: 14px;
}

.smart-search__box:focus-within {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
}

.smart-search__box i {
    color: var(--color-gray-mid);
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.smart-search__box:focus-within i {
    color: var(--color-purple);
}

.smart-search__input {
    flex: 1;
    padding: 12px 14px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-charcoal);
}

.smart-search__input::placeholder {
    color: var(--color-gray-light);
}

.smart-search__btn {
    padding: 8px 24px;
    border: none;
    border-radius: 10px;
    background: var(--color-lime);
    color: var(--color-charcoal);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
}

.smart-search__btn:hover {
    background: var(--color-lime-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.3);
}

/* ----- Suggestions ----- */
.smart-search__suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 10px;
}

.smart-search__suggestions-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.smart-search__suggestion-chip {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    background: rgba(124, 58, 237, 0.04);
    padding: 3px 14px;
    border-radius: 50px;
    border: 1px solid rgba(124, 58, 237, 0.06);
    cursor: pointer;
    transition: all 0.25s ease;
}

.smart-search__suggestion-chip:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

/* ----- Recent Searches ----- */
.smart-search__recent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.smart-search__recent-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
}

.smart-search__recent-item {
    font-size: 0.7rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color 0.25s ease;
}

.smart-search__recent-item i {
    font-size: 0.55rem;
    opacity: 0.5;
}

.smart-search__recent-item:hover {
    color: var(--color-purple);
}

/* ============================================================
   SUGGESTED SEARCHES
   ============================================================ */
.error-assist__chips {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.error-assist__chips:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.suggested-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.suggested-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 8px 18px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--color-gray-light);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.suggested-chip i {
    font-size: 0.8rem;
    color: var(--color-purple);
    transition: transform 0.3s ease;
}

.suggested-chip:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(124, 58, 237, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.04);
}

.suggested-chip:hover i {
    transform: scale(1.15);
}

.suggested-chip:active {
    transform: scale(0.97);
}

/* ============================================================
   CONTACT ASSISTANCE CARDS
   ============================================================ */
.error-assist__contact {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.error-assist__contact:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

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

.assist-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.assist-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px) translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.assist-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.assist-card--whatsapp .assist-card__icon {
    color: #25D366;
}

.assist-card__info {
    flex: 1;
    min-width: 0;
}

.assist-card__title {
    display: block;
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.assist-card__desc {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.assist-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.assist-card__link:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateX(2px);
}

.assist-card--whatsapp .assist-card__link:hover {
    background: #25D366;
    color: var(--color-white);
}

/* ============================================================
   HELP INFORMATION BANNER
   ============================================================ */
.error-assist__notice {
    max-width: 900px;
    margin: 0 auto 0;
}

.notice-banner-assist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 18px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 16px;
}

.notice-banner-assist:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.notice-banner-assist__content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.notice-banner-assist__icon {
    font-size: 2rem;
    color: var(--color-lime);
    flex-shrink: 0;
}

.notice-banner-assist__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin: 0 0 2px;
    letter-spacing: -0.02em;
}

.notice-banner-assist__desc {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

.notice-banner-assist__badge {
    flex-shrink: 0;
}

.notice-banner-assist__badge span {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-lime-dark);
    background: rgba(192, 227, 74, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    border: 1px solid rgba(192, 227, 74, 0.12);
}

/* ----- Focus States ----- */
.btn-assist-search:focus-visible,
.btn-assist-contact:focus-visible,
.smart-search__btn:focus-visible,
.suggested-chip:focus-visible,
.assist-card__link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Search & Contact Assistance
================================================== */

/* ==================================================
START: Final CTA & Recovery Section
================================================== */

/* ----- Container ----- */
#error-final {
    padding: 60px 0 0;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.error-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.error-final__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    pointer-events: none;
}

.error-final__glow--1 {
    width: 450px;
    height: 450px;
    top: -120px;
    right: -80px;
    background: var(--color-purple);
    opacity: 0.04;
}

.error-final__glow--2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -60px;
    background: var(--color-lime);
    opacity: 0.03;
}

.error-final__glow--3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-purple);
    opacity: 0.02;
}

.error-final__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.error-final__orb--1 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.error-final__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
}

.error-final__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.error-final__shape--1 {
    width: 160px;
    height: 160px;
    top: 8%;
    left: 25%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.error-final__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 40%;
    right: 8%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Floating Particles */
#error-final .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#error-final .particle--1 {
    width: 8px;
    height: 8px;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

#error-final .particle--2 {
    width: 12px;
    height: 12px;
    top: 80%;
    left: 88%;
    animation-delay: 1.2s;
}

#error-final .particle--3 {
    width: 6px;
    height: 6px;
    top: 25%;
    left: 82%;
    animation-delay: 2.4s;
}

#error-final .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 12%;
    animation-delay: 0.6s;
}

#error-final .particle--5 {
    width: 7px;
    height: 7px;
    top: 45%;
    left: 5%;
    animation-delay: 3s;
}

#error-final .particle--6 {
    width: 9px;
    height: 9px;
    top: 60%;
    left: 92%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.error-final__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.error-final__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.error-final__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px 4px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.error-final__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.error-final__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.error-final__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.error-final__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.error-final__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   RECOVERY SUMMARY BANNER
   ============================================================ */
.error-final__banner {
    margin-bottom: 48px;
}

.recovery-summary {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.recovery-summary:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.recovery-summary__content {
    padding: 36px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recovery-summary__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recovery-summary__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.recovery-summary__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.recovery-summary__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-final-home {
    padding: 10px 28px;
    font-size: 0.85rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 20px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-final-home:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(192, 227, 74, 0.45);
}

.btn-final-home i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-final-home:hover i:last-child {
    transform: translateX(4px);
}

.btn-final-services {
    padding: 10px 28px;
    font-size: 0.85rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-final-services:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Banner Visual ----- */
.recovery-summary__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 180px;
}

.rf-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.rf-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.rf-icon--1 { top: 15%; left: 10%; animation: floatIcon 5s ease-in-out infinite; }
.rf-icon--2 { top: 15%; right: 10%; animation: floatIcon 5s ease-in-out infinite 1.2s; }
.rf-icon--3 { bottom: 20%; left: 8%; animation: floatIcon 5s ease-in-out infinite 2.4s; }
.rf-icon--4 { bottom: 20%; right: 8%; animation: floatIcon 5s ease-in-out infinite 3.6s; }

.rf-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.rf-shape--1 {
    width: 120px;
    height: 120px;
    top: -40px;
    right: -30px;
}

.rf-shape--2 {
    width: 80px;
    height: 80px;
    bottom: -20px;
    left: -20px;
}

.rf-shape--3 {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   QUICK RECOVERY CARDS
   ============================================================ */
.error-final__cards {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.error-final__cards:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.recovery-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

.recovery-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.recovery-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(192, 227, 74, 0.15);
    transform: translateY(-4px) translateX(4px);
    box-shadow: 0 4px 16px rgba(192, 227, 74, 0.04);
}

.recovery-card__icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.recovery-card__info {
    flex: 1;
    min-width: 0;
}

.recovery-card__title {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    line-height: 1.2;
}

.recovery-card__desc {
    display: block;
    font-size: 0.68rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.2;
}

.recovery-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    color: var(--color-purple);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.recovery-card__link:hover {
    background: var(--color-purple);
    color: var(--color-white);
    transform: translateX(2px);
}

/* ============================================================
   RECOVERY JOURNEY TIMELINE
   ============================================================ */
.error-final__timeline {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.error-final__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.final-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.final-timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.final-timeline-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1.1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.final-timeline-node:hover .final-timeline-node__icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.final-timeline-node--error .final-timeline-node__icon {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.06);
    color: #ef4444;
}

.final-timeline-node--error:hover .final-timeline-node__icon {
    background: linear-gradient(135deg, #ef4444, #f59e0b);
    color: var(--color-white);
    border-color: transparent;
}

.final-timeline-node__label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.final-timeline-node__connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.final-timeline-node__connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.final-timeline-node--end .final-timeline-node__connector {
    display: none;
}

/* ============================================================
   FINAL CTA BANNER
   ============================================================ */
.error-final__cta {
    max-width: 1100px;
    margin: 0 auto 40px;
}

.final-cta-banner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.final-cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.08);
}

.final-cta-banner__content {
    padding: 40px 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.final-cta-banner__badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.final-cta-banner__title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.final-cta-banner__desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.final-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-final-project {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: linear-gradient(135deg, var(--color-lime), #5bcf4e);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-cta-final-project:hover {
    background: linear-gradient(135deg, var(--color-lime-dark), #4ab83e);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.5);
}

.btn-cta-final-project i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-cta-final-project:hover i:last-child {
    transform: translateX(4px);
}

.btn-cta-final-team {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-cta-final-team:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Final CTA Visual ----- */
.final-cta-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 200px;
}

.final-cta-banner__icon-ring {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.final-cta-banner__icon-ring span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}

.final-cta-banner__icon-ring span:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.final-cta-banner__pulse {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.04);
    animation: pulseRing 3s ease-in-out infinite;
}

.final-cta-banner__pulse::before {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.03);
    animation: pulseRing 3s ease-in-out infinite 1s;
}

/* ============================================================
   FOOTER TRANSITION
   ============================================================ */
.error-final__transition {
    max-width: 1100px;
    margin: 0 auto 0;
    padding-bottom: 0;
}

.footer-transition-final {
    position: relative;
    padding: 30px 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-transition-final__line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.15), rgba(124, 58, 237, 0.01));
    position: relative;
}

.footer-transition-final__line::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-purple);
    opacity: 0.2;
}

.footer-transition-final__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.footer-transition-final__glow--1 {
    width: 200px;
    height: 200px;
    top: -60px;
    left: 20%;
    background: var(--color-purple);
    opacity: 0.04;
}

.footer-transition-final__glow--2 {
    width: 200px;
    height: 200px;
    top: -60px;
    right: 20%;
    background: var(--color-lime);
    opacity: 0.03;
}

.footer-transition-final__nodes {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.ftf-node {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-purple);
    opacity: 0.08;
    animation: nodePulse 2s ease-in-out infinite;
}

.ftf-node:nth-child(1) { animation-delay: 0s; }
.ftf-node:nth-child(2) { animation-delay: 0.4s; }
.ftf-node:nth-child(3) { animation-delay: 0.8s; }
.ftf-node:nth-child(4) { animation-delay: 1.2s; }
.ftf-node:nth-child(5) { animation-delay: 1.6s; }

.footer-transition-final__text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-transition-final__text i {
    font-size: 0.6rem;
    animation: bounceDown 2s ease-in-out infinite;
}

/* ----- Focus States ----- */
.btn-final-home:focus-visible,
.btn-final-services:focus-visible,
.recovery-card__link:focus-visible,
.btn-cta-final-project:focus-visible,
.btn-cta-final-team:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Final CTA & Recovery Section
================================================== */

/* ==================================================
START: Super Admin Sign Up Hero & Registration
================================================== */

/* ----- Section Container ----- */
#admin-signup {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    padding: 40px 0;
}

/* ----- Background ----- */
.admin-signup__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.admin-signup__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.04;
    pointer-events: none;
}

.admin-signup__glow--1 {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -150px;
    background: var(--color-purple);
}

.admin-signup__glow--2 {
    width: 500px;
    height: 500px;
    bottom: -150px;
    left: -100px;
    background: var(--color-lime);
}

.admin-signup__glow--3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 30%;
    background: var(--color-purple);
    opacity: 0.02;
}

.admin-signup__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.015);
    border: 1px solid rgba(124, 58, 237, 0.02);
    animation: floatOrb 8s ease-in-out infinite;
}

.admin-signup__orb--1 {
    width: 120px;
    height: 120px;
    top: 15%;
    right: 25%;
    animation-delay: 0s;
}

.admin-signup__orb--2 {
    width: 80px;
    height: 80px;
    bottom: 25%;
    left: 15%;
    animation-delay: 2.5s;
}

.admin-signup__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
}

.admin-signup__grid svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- Particles ----- */
#admin-signup .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.02);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#admin-signup .particle--1 {
    width: 10px;
    height: 10px;
    top: 10%;
    left: 8%;
    animation-delay: 0s;
}

#admin-signup .particle--2 {
    width: 14px;
    height: 14px;
    top: 80%;
    left: 85%;
    animation-delay: 1.2s;
}

#admin-signup .particle--3 {
    width: 7px;
    height: 7px;
    top: 20%;
    left: 80%;
    animation-delay: 2.4s;
}

#admin-signup .particle--4 {
    width: 11px;
    height: 11px;
    top: 85%;
    left: 10%;
    animation-delay: 0.6s;
}

#admin-signup .particle--5 {
    width: 8px;
    height: 8px;
    top: 45%;
    left: 4%;
    animation-delay: 3s;
}

#admin-signup .particle--6 {
    width: 10px;
    height: 10px;
    top: 55%;
    left: 90%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.admin-signup__container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    align-items: stretch;
}

/* ============================================================
   LEFT PANEL — Brand Experience
   ============================================================ */
.admin-signup__brand {
    display: flex;
    align-items: center;
    padding: 40px 32px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.admin-signup__brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(122, 77, 255, 0.02), rgba(110, 220, 95, 0.015));
    border-radius: 28px;
    pointer-events: none;
}

.admin-signup__brand-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Badge */
.admin-signup__badge {
    display: inline-block;
    padding: 4px 16px;
    background: rgba(122, 77, 255, 0.08);
    border: 1px solid rgba(122, 77, 255, 0.12);
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
}

.admin-signup__badge::before {
    content: '◆';
    margin-right: 6px;
    font-size: 0.45rem;
    color: var(--color-lime);
}

/* Brand Title */
.admin-signup__brand-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
}

.admin-signup__brand-title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.admin-signup__brand-title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.admin-signup__brand-subtitle {
    font-size: 0.95rem;
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin-bottom: 28px;
}

/* Feature Cards */
.admin-signup__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 28px;
}

.admin-signup__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: default;
}

.admin-signup__feature:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(122, 77, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.admin-signup__feature-icon {
    font-size: 0.9rem;
    color: var(--color-purple);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.admin-signup__feature-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

/* Quote */
.admin-signup__quote {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-gray-mid);
    font-style: italic;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.15);
    border-left: 3px solid var(--color-lime);
    border-radius: 8px;
    margin-bottom: 24px;
    position: relative;
}

.admin-signup__quote-icon {
    font-size: 1.6rem;
    color: var(--color-purple);
    opacity: 0.15;
    position: absolute;
    top: -4px;
    left: 8px;
    font-family: Georgia, serif;
    line-height: 1;
}

/* Abstract Dashboard Illustration */
.admin-signup__illustration {
    margin-top: 8px;
}

.admin-signup__dashboard {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 12px 14px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.admin-signup__dashboard-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-signup__dashboard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.admin-signup__dashboard-dot:nth-child(1) { background: rgba(239, 68, 68, 0.2); }
.admin-signup__dashboard-dot:nth-child(2) { background: rgba(245, 158, 11, 0.2); }
.admin-signup__dashboard-dot:nth-child(3) { background: rgba(34, 197, 94, 0.2); }

.admin-signup__dashboard-url {
    font-size: 0.55rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.15);
    font-family: 'Inter', monospace;
    margin-left: 8px;
    letter-spacing: 0.02em;
}

.admin-signup__dashboard-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding-top: 10px;
}

.admin-signup__dashboard-stat {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 8px 10px;
}

.admin-signup__dashboard-stat-label {
    display: block;
    font-size: 0.5rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-signup__dashboard-stat-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: -0.02em;
}

.admin-signup__dashboard-stat-change {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--color-lime);
    opacity: 0.5;
}

.admin-signup__dashboard-chart {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    padding-top: 4px;
}

.admin-signup__dashboard-chart-bar {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px 2px 0 0;
    min-height: 4px;
    transition: height 0.6s ease;
}

.admin-signup__dashboard-chart-bar:nth-child(1) { background: rgba(122, 77, 255, 0.15); }
.admin-signup__dashboard-chart-bar:nth-child(2) { background: rgba(122, 77, 255, 0.20); }
.admin-signup__dashboard-chart-bar:nth-child(3) { background: rgba(122, 77, 255, 0.12); }
.admin-signup__dashboard-chart-bar:nth-child(4) { background: rgba(110, 220, 95, 0.20); }
.admin-signup__dashboard-chart-bar:nth-child(5) { background: rgba(122, 77, 255, 0.15); }
.admin-signup__dashboard-chart-bar:nth-child(6) { background: rgba(110, 220, 95, 0.25); }
.admin-signup__dashboard-chart-bar:nth-child(7) { background: rgba(122, 77, 255, 0.18); }

.admin-signup__dashboard:hover .admin-signup__dashboard-chart-bar {
    animation: chartBounce 1s ease forwards;
}

.admin-signup__dashboard-chart-bar:nth-child(1) { animation-delay: 0.05s; }
.admin-signup__dashboard-chart-bar:nth-child(2) { animation-delay: 0.10s; }
.admin-signup__dashboard-chart-bar:nth-child(3) { animation-delay: 0.15s; }
.admin-signup__dashboard-chart-bar:nth-child(4) { animation-delay: 0.20s; }
.admin-signup__dashboard-chart-bar:nth-child(5) { animation-delay: 0.25s; }
.admin-signup__dashboard-chart-bar:nth-child(6) { animation-delay: 0.30s; }
.admin-signup__dashboard-chart-bar:nth-child(7) { animation-delay: 0.35s; }

@keyframes chartBounce {
    0% { transform: scaleY(0); transform-origin: bottom; }
    60% { transform: scaleY(1.05); transform-origin: bottom; }
    100% { transform: scaleY(1); transform-origin: bottom; }
}

/* ============================================================
   RIGHT PANEL — Registration Form
   ============================================================ */
.admin-signup__form-wrapper {
    display: flex;
    align-items: center;
}

.admin-signup__form-card {
    width: 100%;
    padding: 40px 44px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 28px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.admin-signup__form-card:hover {
    box-shadow: 0 16px 48px rgba(122, 77, 255, 0.06);
}

.admin-signup__form-badge {
    display: inline-block;
    padding: 3px 14px;
    background: rgba(110, 220, 95, 0.08);
    border: 1px solid rgba(110, 220, 95, 0.12);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-lime-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.admin-signup__form-badge::before {
    content: '◆';
    margin-right: 6px;
    font-size: 0.4rem;
    color: var(--color-lime);
}

.admin-signup__form-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.admin-signup__form-desc {
    font-size: 0.9rem;
    color: var(--color-gray-mid);
    margin-bottom: 28px;
}

/* ----- Form Fields (Floating Labels) ----- */
.admin-signup__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-signup__form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.admin-signup__form-group--floating {
    position: relative;
}

.admin-signup__form-input {
    width: 100%;
    padding: 16px 14px 8px;
    background: rgba(255, 255, 255, 0.3);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 12px;
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: var(--color-charcoal);
    outline: none;
    transition: all 0.3s ease;
    height: 56px;
}

.admin-signup__form-input:focus {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(122, 77, 255, 0.06);
    background: rgba(255, 255, 255, 0.5);
}

.admin-signup__form-input:focus + .admin-signup__form-label,
.admin-signup__form-input:not(:placeholder-shown) + .admin-signup__form-label {
    transform: translateY(-8px) scale(0.85);
    color: var(--color-purple);
}

.admin-signup__form-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--color-gray-mid);
    pointer-events: none;
    transition: all 0.25s ease;
    font-weight: 400;
    background: transparent;
    padding: 0 2px;
    transform-origin: left center;
}

.admin-signup__form-input:focus + .admin-signup__form-label,
.admin-signup__form-input:not(:placeholder-shown) + .admin-signup__form-label {
    top: 14px;
    transform: translateY(0) scale(0.75);
    color: var(--color-purple);
}

.admin-signup__form-optional {
    font-weight: 400;
    color: var(--color-gray-light);
    font-size: 0.7rem;
}

/* Password Toggle */
.admin-signup__toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-gray-mid);
    cursor: pointer;
    padding: 4px;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    z-index: 2;
}

.admin-signup__toggle-password:hover {
    color: var(--color-charcoal);
}

/* Error Messages */
.admin-signup__form-error {
    font-size: 0.7rem;
    color: var(--color-error);
    min-height: 18px;
    display: block;
    margin-top: 2px;
}

/* ----- Password Strength ----- */
.admin-signup__password-strength {
    margin: 4px 0 2px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-signup__password-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.admin-signup__password-fill {
    height: 100%;
    width: 0%;
    background: var(--color-error);
    border-radius: 4px;
    transition: width 0.4s ease, background 0.4s ease;
}

.admin-signup__password-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.admin-signup__password-label {
    font-size: 0.75rem;
    color: var(--color-gray-mid);
}

.admin-signup__password-label strong {
    color: var(--color-charcoal);
}

.admin-signup__password-requirements-toggle {
    font-size: 0.7rem;
    color: var(--color-gray-mid);
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}

.admin-signup__password-requirements-toggle:hover {
    color: var(--color-charcoal);
}

.admin-signup__password-requirements-toggle i {
    font-size: 0.55rem;
    transition: transform 0.3s ease;
}

.admin-signup__password-requirements-toggle.active i {
    transform: rotate(180deg);
}

.admin-signup__password-requirements {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.admin-signup__password-requirements.open {
    max-height: 120px;
    opacity: 1;
    padding-top: 8px;
}

.admin-signup__password-requirements li {
    font-size: 0.7rem;
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}

.admin-signup__password-requirements li i {
    font-size: 0.45rem;
    color: var(--color-gray-light);
    transition: color 0.3s ease;
}

.admin-signup__password-requirements li.valid i {
    color: var(--color-success);
}

.admin-signup__password-requirements li.invalid i {
    color: var(--color-error);
}

/* ----- Checkbox ----- */
.admin-signup__form-group--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin-top: 2px;
}

.admin-signup__form-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-purple);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.admin-signup__form-checkbox-label {
    font-size: 0.85rem;
    color: var(--color-gray-mid);
    cursor: pointer;
    line-height: 1.4;
}

.admin-signup__form-checkbox-label a {
    color: var(--color-purple);
    text-decoration: none;
    font-weight: 500;
}

.admin-signup__form-checkbox-label a:hover {
    text-decoration: underline;
}

/* ----- Submit Button ----- */
.admin-signup__submit {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-lime-dark));
    color: var(--color-charcoal);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 24px rgba(110, 220, 95, 0.3);
    position: relative;
    overflow: hidden;
    margin-top: 4px;
}

.admin-signup__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(110, 220, 95, 0.4);
}

.admin-signup__submit:active {
    transform: scale(0.98);
}

.admin-signup__submit i {
    transition: transform 0.3s ease;
}

.admin-signup__submit:hover i {
    transform: translateX(4px);
}

.admin-signup__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* Button Ripple */
.admin-signup__submit .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: rippleAnim 0.6s linear;
    pointer-events: none;
}

@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

/* ----- Login Link ----- */
.admin-signup__login-link {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-gray-mid);
    margin-top: 12px;
}

.admin-signup__login-link a {
    color: var(--color-purple);
    text-decoration: none;
    font-weight: 500;
}

.admin-signup__login-link a:hover {
    text-decoration: underline;
}

/* ----- Future Placeholders ----- */
.admin-signup__future {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.02);
}

.admin-signup__future-item {
    font-size: 0.6rem;
    color: var(--color-gray-light);
    background: rgba(0, 0, 0, 0.01);
    padding: 2px 10px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.02);
    letter-spacing: 0.02em;
}

.admin-signup__future-item::before {
    content: '⚡';
    margin-right: 4px;
    font-size: 0.5rem;
}

/* ----- Focus States ----- */
.admin-signup__submit:focus-visible,
.admin-signup__form-input:focus-visible,
.admin-signup__toggle-password:focus-visible,
.admin-signup__form-checkbox:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 3px;
}

/* ==================================================
END: Super Admin Sign Up Hero & Registration
================================================== */

/* ==================================================
START: Super Admin Sign In Hero & Login Form
================================================== */

/* ----- Section Container ----- */
#admin-signin {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
    padding: 40px 0;
}

/* ----- Background ----- */
.admin-signin__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.admin-signin__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.04;
    pointer-events: none;
}

.admin-signin__glow--1 {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -150px;
    background: var(--color-purple);
}

.admin-signin__glow--2 {
    width: 500px;
    height: 500px;
    bottom: -150px;
    left: -100px;
    background: var(--color-lime);
}

.admin-signin__glow--3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 30%;
    background: var(--color-purple);
    opacity: 0.02;
}

.admin-signin__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.015);
    border: 1px solid rgba(124, 58, 237, 0.02);
    animation: floatOrb 8s ease-in-out infinite;
}

.admin-signin__orb--1 {
    width: 120px;
    height: 120px;
    top: 15%;
    right: 25%;
    animation-delay: 0s;
}

.admin-signin__orb--2 {
    width: 80px;
    height: 80px;
    bottom: 25%;
    left: 15%;
    animation-delay: 2.5s;
}

.admin-signin__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
}

.admin-signin__grid svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- Particles ----- */
#admin-signin .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.02);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#admin-signin .particle--1 {
    width: 10px;
    height: 10px;
    top: 10%;
    left: 8%;
    animation-delay: 0s;
}

#admin-signin .particle--2 {
    width: 14px;
    height: 14px;
    top: 80%;
    left: 85%;
    animation-delay: 1.2s;
}

#admin-signin .particle--3 {
    width: 7px;
    height: 7px;
    top: 20%;
    left: 80%;
    animation-delay: 2.4s;
}

#admin-signin .particle--4 {
    width: 11px;
    height: 11px;
    top: 85%;
    left: 10%;
    animation-delay: 0.6s;
}

#admin-signin .particle--5 {
    width: 8px;
    height: 8px;
    top: 45%;
    left: 4%;
    animation-delay: 3s;
}

#admin-signin .particle--6 {
    width: 10px;
    height: 10px;
    top: 55%;
    left: 90%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.admin-signin__container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    align-items: stretch;
}

/* ============================================================
   LEFT PANEL — Brand Experience
   ============================================================ */
.admin-signin__brand {
    display: flex;
    align-items: center;
    padding: 40px 32px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.admin-signin__brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(122, 77, 255, 0.02), rgba(110, 220, 95, 0.015));
    border-radius: 28px;
    pointer-events: none;
}

.admin-signin__brand-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Badge */
.admin-signin__badge {
    display: inline-block;
    padding: 4px 16px;
    background: rgba(122, 77, 255, 0.08);
    border: 1px solid rgba(122, 77, 255, 0.12);
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
}

.admin-signin__badge::before {
    content: '◆';
    margin-right: 6px;
    font-size: 0.45rem;
    color: var(--color-lime);
}

/* Brand Title */
.admin-signin__brand-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
}

.admin-signin__brand-title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.admin-signin__brand-title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.admin-signin__brand-subtitle {
    font-size: 0.95rem;
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin-bottom: 28px;
}

/* Feature Cards */
.admin-signin__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 28px;
}

.admin-signin__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: default;
}

.admin-signin__feature:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(122, 77, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.admin-signin__feature-icon {
    font-size: 0.9rem;
    color: var(--color-purple);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.admin-signin__feature-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

/* Quote */
.admin-signin__quote {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-gray-mid);
    font-style: italic;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.15);
    border-left: 3px solid var(--color-lime);
    border-radius: 8px;
    margin-bottom: 24px;
    position: relative;
}

.admin-signin__quote-icon {
    font-size: 1.6rem;
    color: var(--color-purple);
    opacity: 0.15;
    position: absolute;
    top: -4px;
    left: 8px;
    font-family: Georgia, serif;
    line-height: 1;
}

/* Abstract Dashboard Illustration */
.admin-signin__illustration {
    margin-top: 8px;
}

.admin-signin__dashboard {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 12px 14px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.admin-signin__dashboard-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-signin__dashboard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.admin-signin__dashboard-dot:nth-child(1) { background: rgba(239, 68, 68, 0.2); }
.admin-signin__dashboard-dot:nth-child(2) { background: rgba(245, 158, 11, 0.2); }
.admin-signin__dashboard-dot:nth-child(3) { background: rgba(34, 197, 94, 0.2); }

.admin-signin__dashboard-url {
    font-size: 0.55rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.15);
    font-family: 'Inter', monospace;
    margin-left: 8px;
    letter-spacing: 0.02em;
}

.admin-signin__dashboard-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding-top: 10px;
}

.admin-signin__dashboard-stat {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 8px 10px;
}

.admin-signin__dashboard-stat-label {
    display: block;
    font-size: 0.5rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-signin__dashboard-stat-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: -0.02em;
}

.admin-signin__dashboard-stat-change {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--color-lime);
    opacity: 0.5;
}

.admin-signin__dashboard-chart {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    padding-top: 4px;
}

.admin-signin__dashboard-chart-bar {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 2px 2px 0 0;
    min-height: 4px;
    transition: height 0.6s ease;
}

.admin-signin__dashboard-chart-bar:nth-child(1) { background: rgba(122, 77, 255, 0.15); }
.admin-signin__dashboard-chart-bar:nth-child(2) { background: rgba(122, 77, 255, 0.20); }
.admin-signin__dashboard-chart-bar:nth-child(3) { background: rgba(122, 77, 255, 0.12); }
.admin-signin__dashboard-chart-bar:nth-child(4) { background: rgba(110, 220, 95, 0.20); }
.admin-signin__dashboard-chart-bar:nth-child(5) { background: rgba(122, 77, 255, 0.15); }
.admin-signin__dashboard-chart-bar:nth-child(6) { background: rgba(110, 220, 95, 0.25); }
.admin-signin__dashboard-chart-bar:nth-child(7) { background: rgba(122, 77, 255, 0.18); }

.admin-signin__dashboard:hover .admin-signin__dashboard-chart-bar {
    animation: chartBounce 1s ease forwards;
}

.admin-signin__dashboard-chart-bar:nth-child(1) { animation-delay: 0.05s; }
.admin-signin__dashboard-chart-bar:nth-child(2) { animation-delay: 0.10s; }
.admin-signin__dashboard-chart-bar:nth-child(3) { animation-delay: 0.15s; }
.admin-signin__dashboard-chart-bar:nth-child(4) { animation-delay: 0.20s; }
.admin-signin__dashboard-chart-bar:nth-child(5) { animation-delay: 0.25s; }
.admin-signin__dashboard-chart-bar:nth-child(6) { animation-delay: 0.30s; }
.admin-signin__dashboard-chart-bar:nth-child(7) { animation-delay: 0.35s; }

@keyframes chartBounce {
    0% { transform: scaleY(0); transform-origin: bottom; }
    60% { transform: scaleY(1.05); transform-origin: bottom; }
    100% { transform: scaleY(1); transform-origin: bottom; }
}

/* ============================================================
   RIGHT PANEL — Login Form
   ============================================================ */
.admin-signin__form-wrapper {
    display: flex;
    align-items: center;
}

.admin-signin__form-card {
    width: 100%;
    padding: 40px 44px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 28px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.admin-signin__form-card:hover {
    box-shadow: 0 16px 48px rgba(122, 77, 255, 0.06);
}

.admin-signin__form-badge {
    display: inline-block;
    padding: 3px 14px;
    background: rgba(122, 77, 255, 0.08);
    border: 1px solid rgba(122, 77, 255, 0.12);
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.admin-signin__form-badge::before {
    content: '◆';
    margin-right: 6px;
    font-size: 0.4rem;
    color: var(--color-lime);
}

.admin-signin__form-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.admin-signin__form-desc {
    font-size: 0.9rem;
    color: var(--color-gray-mid);
    margin-bottom: 28px;
}

/* ----- Form Fields (Floating Labels) ----- */
.admin-signin__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-signin__form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.admin-signin__form-group--floating {
    position: relative;
}

.admin-signin__form-input {
    width: 100%;
    padding: 16px 14px 8px;
    background: rgba(255, 255, 255, 0.3);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 12px;
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: var(--color-charcoal);
    outline: none;
    transition: all 0.3s ease;
    height: 56px;
}

.admin-signin__form-input:focus {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(122, 77, 255, 0.06);
    background: rgba(255, 255, 255, 0.5);
}

.admin-signin__form-input:focus + .admin-signin__form-label,
.admin-signin__form-input:not(:placeholder-shown) + .admin-signin__form-label {
    transform: translateY(-8px) scale(0.85);
    color: var(--color-purple);
}

.admin-signin__form-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--color-gray-mid);
    pointer-events: none;
    transition: all 0.25s ease;
    font-weight: 400;
    background: transparent;
    padding: 0 2px;
    transform-origin: left center;
}

.admin-signin__form-input:focus + .admin-signin__form-label,
.admin-signin__form-input:not(:placeholder-shown) + .admin-signin__form-label {
    top: 14px;
    transform: translateY(0) scale(0.75);
    color: var(--color-purple);
}

/* Password Toggle */
.admin-signin__toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-gray-mid);
    cursor: pointer;
    padding: 4px;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    z-index: 2;
}

.admin-signin__toggle-password:hover {
    color: var(--color-charcoal);
}

/* Error Messages */
.admin-signin__form-error {
    font-size: 0.7rem;
    color: var(--color-error);
    min-height: 18px;
    display: block;
    margin-top: 2px;
}

/* ----- Options Row ----- */
.admin-signin__options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -4px 0 2px;
}

.admin-signin__remember {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-signin__form-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-purple);
    cursor: pointer;
    flex-shrink: 0;
}

.admin-signin__form-checkbox-label {
    font-size: 0.85rem;
    color: var(--color-gray-mid);
    cursor: pointer;
}

.admin-signin__forgot-link {
    font-size: 0.85rem;
    color: var(--color-purple);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.admin-signin__forgot-link:hover {
    text-decoration: underline;
    color: var(--color-purple-dark);
}

/* ----- Submit Button ----- */
.admin-signin__submit {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-lime), var(--color-lime-dark));
    color: var(--color-charcoal);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 24px rgba(110, 220, 95, 0.3);
    position: relative;
    overflow: hidden;
    margin-top: 4px;
}

.admin-signin__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(110, 220, 95, 0.4);
}

.admin-signin__submit:active {
    transform: scale(0.98);
}

.admin-signin__submit i {
    transition: transform 0.3s ease;
}

.admin-signin__submit:hover i {
    transform: translateX(4px);
}

.admin-signin__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* Button Ripple */
.admin-signin__submit .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: rippleAnim 0.6s linear;
    pointer-events: none;
}

@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

/* ----- Divider ----- */
.admin-signin__divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 2px;
}

.admin-signin__divider-line {
    flex: 1;
    height: 1px;
    background: var(--color-gray-light);
    opacity: 0.3;
}

.admin-signin__divider-text {
    font-size: 0.75rem;
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* ----- Social Login (disabled) ----- */
.admin-signin__social {
    width: 100%;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid var(--color-gray-light);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--font-family);
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: not-allowed;
    opacity: 0.5;
    transition: all 0.3s ease;
    position: relative;
}

.admin-signin__social i {
    font-size: 1.1rem;
    color: var(--color-gray-mid);
}

.admin-signin__social-badge {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-white);
    background: var(--color-purple);
    padding: 1px 10px;
    border-radius: 50px;
    margin-left: 4px;
    opacity: 0.6;
}

.admin-signin__social[disabled] {
    cursor: not-allowed;
}

/* ----- Sign Up Link ----- */
.admin-signin__signup-link {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-gray-mid);
    margin-top: 4px;
}

.admin-signin__signup-link a {
    color: var(--color-purple);
    text-decoration: none;
    font-weight: 500;
}

.admin-signin__signup-link a:hover {
    text-decoration: underline;
}

/* ----- Future Placeholders ----- */
.admin-signin__future {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.02);
}

.admin-signin__future-item {
    font-size: 0.6rem;
    color: var(--color-gray-light);
    background: rgba(0, 0, 0, 0.01);
    padding: 2px 10px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.02);
    letter-spacing: 0.02em;
}

.admin-signin__future-item::before {
    content: '⚡';
    margin-right: 4px;
    font-size: 0.5rem;
}

/* ----- Focus States ----- */
.admin-signin__submit:focus-visible,
.admin-signin__form-input:focus-visible,
.admin-signin__toggle-password:focus-visible,
.admin-signin__form-checkbox:focus-visible,
.admin-signin__forgot-link:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 3px;
}

/* ==================================================
END: Super Admin Sign In Hero & Login Form
================================================== */

/* ==================================================
START: Hero & Brand Story
================================================== */

/* ============================================================
   BRAND HERO
   ============================================================ */
#brand-hero {
    padding: 80px 0 60px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.brand-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.brand-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.06;
    pointer-events: none;
}

.brand-hero__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.05;
}

.brand-hero__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -100px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.04;
}

.brand-hero__glow--3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-purple);
    opacity: 0.03;
}

.brand-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.brand-hero__orb--1 {
    width: 100px;
    height: 100px;
    top: 15%;
    right: 12%;
    animation-delay: 0s;
}

.brand-hero__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 25%;
    left: 15%;
    animation-delay: 2s;
}

.brand-hero__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(192, 227, 74, 0.015);
    border: 1px solid rgba(192, 227, 74, 0.015);
}

.brand-hero__shape--1 {
    width: 160px;
    height: 160px;
    top: 10%;
    left: 20%;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
}

.brand-hero__shape--2 {
    width: 110px;
    height: 110px;
    bottom: 35%;
    right: 10%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.brand-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
}

.brand-hero__grid svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Particles */
#brand-hero .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#brand-hero .particle--1 {
    width: 8px;
    height: 8px;
    top: 10%;
    left: 6%;
    animation-delay: 0s;
}

#brand-hero .particle--2 {
    width: 12px;
    height: 12px;
    top: 78%;
    left: 90%;
    animation-delay: 1.2s;
}

#brand-hero .particle--3 {
    width: 6px;
    height: 6px;
    top: 20%;
    left: 85%;
    animation-delay: 2.4s;
}

#brand-hero .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.6s;
}

#brand-hero .particle--5 {
    width: 7px;
    height: 7px;
    top: 40%;
    left: 4%;
    animation-delay: 3s;
}

#brand-hero .particle--6 {
    width: 9px;
    height: 9px;
    top: 50%;
    left: 94%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.brand-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ----- Hero Content ----- */
.brand-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 18px 4px 16px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.brand-hero__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.brand-hero__title {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 16px;
}

.brand-hero__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.brand-hero__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.brand-hero__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 28px;
}

.brand-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-brand-services {
    padding: 12px 28px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-brand-services:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-brand-services i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-brand-services:hover i:last-child {
    transform: translateX(4px);
}

.btn-brand-contact {
    padding: 12px 28px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-brand-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Logo Visual ----- */
.brand-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-hero__logo-container {
    position: relative;
    width: 380px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.02);
}

/* Logo */
.brand-hero__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    text-align: center;
    animation: floatLogo 6s ease-in-out infinite;
}

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

.brand-hero__logo-icon {
    font-size: 2.8rem;
    color: var(--color-lime);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.brand-hero__logo-text {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand-hero__logo-solutions {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-gray-mid);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Glow Ring */
.brand-hero__glow-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: pulseRing 4s ease-in-out infinite;
}

.brand-hero__glow-ring::before {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 1px solid rgba(192, 227, 74, 0.02);
    animation: pulseRing 4s ease-in-out infinite 1s;
}

@keyframes pulseRing {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* Circuits */
.brand-hero__circuit {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.3;
}

.brand-hero__circuit--1 {
    top: 12%;
    right: 8%;
    transform: rotate(25deg);
    animation: circuitPulse 3s ease-in-out infinite;
}

.brand-hero__circuit--2 {
    bottom: 18%;
    left: 6%;
    transform: rotate(-15deg);
    animation: circuitPulse 3s ease-in-out infinite 1s;
}

.brand-hero__circuit--3 {
    top: 45%;
    right: 2%;
    transform: rotate(80deg);
    animation: circuitPulse 3s ease-in-out infinite 2s;
}

@keyframes circuitPulse {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.4; }
}

.brand-hero__circuit-line {
    width: 16px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--color-purple), var(--color-lime));
    border-radius: 1px;
}

.brand-hero__circuit-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-purple);
    flex-shrink: 0;
}

.brand-hero__circuit-dot:nth-child(2) { background: var(--color-lime); }

/* Connection Nodes */
.brand-hero__node {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.04);
    animation: nodeFloat 5s ease-in-out infinite;
}

.brand-hero__node--1 {
    width: 12px;
    height: 12px;
    top: 5%;
    left: 10%;
    animation-delay: 0s;
}
.brand-hero__node--2 {
    width: 8px;
    height: 8px;
    top: 8%;
    right: 20%;
    animation-delay: 1.2s;
}
.brand-hero__node--3 {
    width: 10px;
    height: 10px;
    bottom: 8%;
    left: 15%;
    animation-delay: 2.4s;
}
.brand-hero__node--4 {
    width: 14px;
    height: 14px;
    bottom: 12%;
    right: 12%;
    animation-delay: 0.6s;
}
.brand-hero__node--5 {
    width: 6px;
    height: 6px;
    top: 40%;
    left: 4%;
    animation-delay: 3s;
}
.brand-hero__node--6 {
    width: 8px;
    height: 8px;
    top: 55%;
    right: 4%;
    animation-delay: 1.8s;
}

@keyframes nodeFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    50% { transform: translate(6px, -8px) scale(1.3); opacity: 0.6; }
}

/* ----- Focus States ----- */
.btn-brand-services:focus-visible,
.btn-brand-contact:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ============================================================
   BRAND STORY
   ============================================================ */
#brand-story {
    padding: 60px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.brand-story__inner {
    position: relative;
    z-index: 2;
}

.brand-story__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

/* ----- Story Content ----- */
.brand-story__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.brand-story__block {
    position: relative;
    padding-left: 52px;
}

.brand-story__block-number {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 2rem;
    font-weight: 800;
    color: rgba(124, 58, 237, 0.04);
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand-story__block-title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.brand-story__block-text {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    margin-bottom: 8px;
}

.brand-story__block-text:last-child {
    margin-bottom: 0;
}

.brand-story__block-text--emphasized {
    margin-top: 12px;
    padding: 16px 20px;
    background: rgba(124, 58, 237, 0.02);
    border-left: 3px solid var(--color-lime);
    border-radius: 8px;
}

.brand-story__highlight {
    font-weight: 600;
    color: var(--color-purple);
}

.brand-story__block-name {
    font-weight: 700;
    color: var(--color-charcoal);
    font-size: 1.05rem;
}

.brand-story__block-meaning {
    display: block;
    font-weight: 500;
    color: var(--color-charcoal);
    font-size: 1.05rem;
    margin-top: 4px;
    font-style: italic;
}

/* ----- Quote Card ----- */
.brand-story__quote {
    display: flex;
    align-items: center;
}

.brand-story__quote-card {
    position: relative;
    padding: 40px 36px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    width: 100%;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-story__quote-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.brand-story__quote-icon {
    font-size: 4rem;
    font-family: Georgia, serif;
    color: var(--color-purple);
    opacity: 0.08;
    position: absolute;
    top: 8px;
    left: 20px;
    line-height: 1;
}

.brand-story__quote-text {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-charcoal);
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    padding-top: 4px;
}

.brand-story__quote-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-story__quote-name {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.brand-story__quote-title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.brand-story__quote-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50% 0 24px 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.02), rgba(192, 227, 74, 0.02));
    pointer-events: none;
}

/* ==================================================
END: Hero & Brand Story
================================================== */

/* ==================================================
START: Logo Meaning & Symbolism
================================================== */

/* ----- Section Container ----- */
#brand-symbolism {
    padding: 60px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.brand-symbolism__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.brand-symbolism__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.06;
    pointer-events: none;
}

.brand-symbolism__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.04;
}

.brand-symbolism__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -100px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.03;
}

.brand-symbolism__glow--3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-purple);
    opacity: 0.02;
}

.brand-symbolism__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.brand-symbolism__orb--1 {
    width: 100px;
    height: 100px;
    top: 15%;
    right: 10%;
    animation-delay: 0s;
}

.brand-symbolism__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 25%;
    left: 12%;
    animation-delay: 2s;
}

.brand-symbolism__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
}

.brand-symbolism__grid svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#brand-symbolism .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#brand-symbolism .particle--1 {
    width: 8px;
    height: 8px;
    top: 10%;
    left: 6%;
    animation-delay: 0s;
}
#brand-symbolism .particle--2 {
    width: 12px;
    height: 12px;
    top: 78%;
    left: 90%;
    animation-delay: 1.2s;
}
#brand-symbolism .particle--3 {
    width: 6px;
    height: 6px;
    top: 20%;
    left: 85%;
    animation-delay: 2.4s;
}
#brand-symbolism .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.6s;
}
#brand-symbolism .particle--5 {
    width: 7px;
    height: 7px;
    top: 40%;
    left: 4%;
    animation-delay: 3s;
}
#brand-symbolism .particle--6 {
    width: 9px;
    height: 9px;
    top: 50%;
    left: 94%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.brand-symbolism__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.brand-symbolism__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.brand-symbolism__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 18px 4px 16px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.brand-symbolism__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.brand-symbolism__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.brand-symbolism__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.brand-symbolism__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.brand-symbolism__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   INTERACTIVE LOGO SHOWCASE
   ============================================================ */
.brand-symbolism__showcase {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 40px 32px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.brand-symbolism__showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.02), transparent 70%);
    pointer-events: none;
}

.brand-symbolism__logo-display {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 20px;
}

/* ----- Logo ----- */
.brand-symbolism__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    animation: floatLogo 6s ease-in-out infinite;
    padding: 24px 32px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.brand-symbolism__logo-icon {
    font-size: 2.4rem;
    color: var(--color-lime);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 2px;
}

.brand-symbolism__logo-text {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand-symbolism__logo-solutions {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-gray-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
}

.brand-symbolism__logo-tagline {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-gray-mid);
    letter-spacing: 0.04em;
    margin-top: 4px;
    opacity: 0.5;
}

/* ----- Hotspots ----- */
.brand-symbolism__hotspot {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-family: var(--font-family);
    transition: all 0.3s ease;
}

.brand-symbolism__hotspot-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-purple);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.1);
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

.brand-symbolism__hotspot-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, 0.05);
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 0.1; }
}

.brand-symbolism__hotspot-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 10px;
    border-radius: 50px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-4px);
}

.brand-symbolism__hotspot-line {
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.01));
    opacity: 0;
    transition: all 0.3s ease;
}

/* Hotspot Positions */
.brand-symbolism__hotspot--xo {
    top: 10%;
    left: 18%;
    flex-direction: row;
}

.brand-symbolism__hotspot--hub {
    top: 10%;
    right: 18%;
    flex-direction: row-reverse;
}

.brand-symbolism__hotspot--circuit {
    bottom: 22%;
    left: 10%;
    flex-direction: row;
}

.brand-symbolism__hotspot--green {
    bottom: 22%;
    right: 10%;
    flex-direction: row-reverse;
}

.brand-symbolism__hotspot--purple {
    top: 45%;
    left: 3%;
    flex-direction: row;
}

.brand-symbolism__hotspot--typography {
    top: 45%;
    right: 3%;
    flex-direction: row-reverse;
}

.brand-symbolism__hotspot--tagline {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
}

/* Hotspot Hover States */
.brand-symbolism__hotspot:hover .brand-symbolism__hotspot-dot {
    transform: scale(1.3);
    background: var(--color-lime);
    box-shadow: 0 0 30px rgba(110, 220, 95, 0.3);
}

.brand-symbolism__hotspot:hover .brand-symbolism__hotspot-label,
.brand-symbolism__hotspot:hover .brand-symbolism__hotspot-line {
    opacity: 1;
    transform: translateX(0);
}

.brand-symbolism__hotspot--hub:hover .brand-symbolism__hotspot-label,
.brand-symbolism__hotspot--hub:hover .brand-symbolism__hotspot-line {
    transform: translateX(0);
}

.brand-symbolism__hotspot--green:hover .brand-symbolism__hotspot-label,
.brand-symbolism__hotspot--green:hover .brand-symbolism__hotspot-line {
    transform: translateX(0);
}

.brand-symbolism__hotspot--typography:hover .brand-symbolism__hotspot-label,
.brand-symbolism__hotspot--typography:hover .brand-symbolism__hotspot-line {
    transform: translateX(0);
}

/* Active Hotspot */
.brand-symbolism__hotspot.active .brand-symbolism__hotspot-dot {
    transform: scale(1.3);
    background: var(--color-lime);
    box-shadow: 0 0 30px rgba(110, 220, 95, 0.3);
}

.brand-symbolism__hotspot.active .brand-symbolism__hotspot-label,
.brand-symbolism__hotspot.active .brand-symbolism__hotspot-line {
    opacity: 1;
    transform: translateX(0);
}

/* ----- Connection Nodes ----- */
.brand-symbolism__node {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.02);
    animation: nodeFloat 5s ease-in-out infinite;
    pointer-events: none;
}

.brand-symbolism__node--1 {
    width: 14px;
    height: 14px;
    top: 5%;
    left: 8%;
    animation-delay: 0s;
}
.brand-symbolism__node--2 {
    width: 8px;
    height: 8px;
    top: 8%;
    right: 15%;
    animation-delay: 1.2s;
}
.brand-symbolism__node--3 {
    width: 10px;
    height: 10px;
    bottom: 8%;
    left: 12%;
    animation-delay: 2.4s;
}
.brand-symbolism__node--4 {
    width: 16px;
    height: 16px;
    bottom: 12%;
    right: 8%;
    animation-delay: 0.6s;
}
.brand-symbolism__node--5 {
    width: 6px;
    height: 6px;
    top: 40%;
    left: 2%;
    animation-delay: 3s;
}
.brand-symbolism__node--6 {
    width: 8px;
    height: 8px;
    top: 55%;
    right: 2%;
    animation-delay: 1.8s;
}

@keyframes nodeFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    50% { transform: translate(6px, -10px) scale(1.3); opacity: 0.6; }
}

/* ----- Active Indicator ----- */
.brand-symbolism__active-indicator {
    text-align: center;
    margin-top: 16px;
}

.brand-symbolism__active-label {
    font-size: 0.8rem;
    color: var(--color-gray-mid);
    font-weight: 400;
    transition: all 0.3s ease;
}

.brand-symbolism__active-label.highlighted {
    color: var(--color-purple);
    font-weight: 500;
}

/* ============================================================
   MEANING CARDS GRID
   ============================================================ */
.brand-symbolism__cards {
    max-width: 1100px;
    margin: 0 auto 48px;
}

.brand-symbolism__cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.brand-symbolism__card {
    position: relative;
    padding: 24px 22px 20px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.brand-symbolism__card:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.02);
    border-color: rgba(124, 58, 237, 0.04);
}

.brand-symbolism__card.active {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--color-purple);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.04);
    transform: translateY(-4px);
}

.brand-symbolism__card-icon {
    display: inline-block;
    font-size: 1.4rem;
    color: var(--color-purple);
    margin-bottom: 8px;
}

.brand-symbolism__card-title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin-bottom: 6px;
}

.brand-symbolism__card-text {
    font-size: 0.85rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
}

.brand-symbolism__card-highlight {
    font-weight: 600;
    color: var(--color-charcoal);
}

.brand-symbolism__card-number {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(124, 58, 237, 0.06);
    letter-spacing: 0.02em;
}

.brand-symbolism__card-color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-top: 10px;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.brand-symbolism__card-color--green {
    background: var(--color-lime);
}

.brand-symbolism__card-color--purple {
    background: var(--color-purple);
}

/* ============================================================
   BRAND PHILOSOPHY TIMELINE
   ============================================================ */
.brand-symbolism__timeline {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.brand-symbolism__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.brand-symbolism__timeline-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.brand-symbolism__timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.brand-symbolism__timeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.brand-symbolism__timeline-node:hover .brand-symbolism__timeline-icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.brand-symbolism__timeline-label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.brand-symbolism__timeline-connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.brand-symbolism__timeline-connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.brand-symbolism__timeline-node--end .brand-symbolism__timeline-connector {
    display: none;
}

/* ============================================================
   QUOTE BANNER
   ============================================================ */
.brand-symbolism__quote {
    max-width: 1000px;
    margin: 0 auto 0;
}

.brand-symbolism__quote-banner {
    position: relative;
    padding: 36px 44px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.brand-symbolism__quote-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

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

.brand-symbolism__quote-icon {
    font-size: 4rem;
    font-family: Georgia, serif;
    color: var(--color-purple);
    opacity: 0.06;
    position: absolute;
    top: 0;
    left: 16px;
    line-height: 1;
    z-index: 0;
}

.brand-symbolism__quote-text {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-charcoal);
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.brand-symbolism__quote-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.brand-symbolism__quote-name {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
}

.brand-symbolism__quote-title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
}

.brand-symbolism__quote-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 50% 0 24px 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.02), rgba(192, 227, 74, 0.02));
    pointer-events: none;
    z-index: 0;
}

/* ----- Focus States ----- */
.brand-symbolism__hotspot:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Logo Meaning & Symbolism
================================================== */

/* ==================================================
START: Brand Colors, Typography & Design Language
================================================== */

/* ----- Section Container ----- */
#brand-identity {
    padding: 60px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.brand-identity__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.brand-identity__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.06;
    pointer-events: none;
}

.brand-identity__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.04;
}

.brand-identity__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -100px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.03;
}

.brand-identity__glow--3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-purple);
    opacity: 0.02;
}

.brand-identity__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.brand-identity__orb--1 {
    width: 100px;
    height: 100px;
    top: 15%;
    right: 10%;
    animation-delay: 0s;
}

.brand-identity__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 25%;
    left: 12%;
    animation-delay: 2s;
}

.brand-identity__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
}

.brand-identity__grid svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#brand-identity .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#brand-identity .particle--1 {
    width: 8px;
    height: 8px;
    top: 10%;
    left: 6%;
    animation-delay: 0s;
}
#brand-identity .particle--2 {
    width: 12px;
    height: 12px;
    top: 78%;
    left: 90%;
    animation-delay: 1.2s;
}
#brand-identity .particle--3 {
    width: 6px;
    height: 6px;
    top: 20%;
    left: 85%;
    animation-delay: 2.4s;
}
#brand-identity .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.6s;
}
#brand-identity .particle--5 {
    width: 7px;
    height: 7px;
    top: 40%;
    left: 4%;
    animation-delay: 3s;
}
#brand-identity .particle--6 {
    width: 9px;
    height: 9px;
    top: 50%;
    left: 94%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.brand-identity__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.brand-identity__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.brand-identity__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 18px 4px 16px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.brand-identity__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.brand-identity__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.brand-identity__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.brand-identity__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.brand-identity__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   BRAND IDENTITY SHOWCASE
   ============================================================ */
.brand-identity__showcase {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 40px 44px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-glass);
    position: relative;
    overflow: hidden;
}

.brand-identity__showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 40%, rgba(124, 58, 237, 0.02), transparent 70%);
    pointer-events: none;
}

.brand-identity__showcase-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Logo Lockup */
.brand-identity__logo-lockup {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.brand-identity__logo-icon {
    font-size: 1.8rem;
    color: var(--color-lime);
    font-weight: 800;
}

.brand-identity__logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
}

.brand-identity__logo-solutions {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-gray-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: 2px;
}

/* Color Palette */
.brand-identity__palette {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.brand-identity__palette-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    cursor: default;
    flex-shrink: 0;
}

.brand-identity__palette-swatch:hover {
    transform: scale(1.15);
}

.brand-identity__palette-swatch--light {
    border-color: var(--color-gray-light);
}

/* UI Preview */
.brand-identity__ui-preview {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

.brand-identity__ui-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px 14px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    min-width: 80px;
    transition: all 0.3s ease;
}

.brand-identity__ui-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.5);
}

.brand-identity__ui-card-icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.brand-identity__ui-card-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-top: 4px;
}

.brand-identity__ui-card-desc {
    font-size: 0.55rem;
    color: var(--color-gray-mid);
}

.brand-identity__ui-card-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.45rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-purple);
    padding: 1px 8px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.brand-identity__ui-buttons {
    display: flex;
    gap: 8px;
}

.brand-identity__ui-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: default;
    transition: all 0.3s ease;
}

.brand-identity__ui-btn:hover {
    transform: translateY(-2px);
}

.brand-identity__ui-btn--primary {
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 2px 12px rgba(110, 220, 95, 0.2);
}

.brand-identity__ui-btn--secondary {
    background: transparent;
    color: var(--color-purple);
    border: 1.5px solid var(--color-purple);
}

.brand-identity__ui-icons {
    display: flex;
    gap: 8px;
}

.brand-identity__ui-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.04);
    color: var(--color-purple);
    font-size: 0.8rem;
    transition: all 0.3s ease;
    cursor: default;
}

.brand-identity__ui-icon:hover {
    background: rgba(124, 58, 237, 0.08);
    transform: scale(1.05);
}

.brand-identity__ui-gradient {
    padding: 6px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.brand-identity__ui-gradient-label {
    opacity: 0.8;
}

/* ============================================================
   BRAND COLOR CARDS
   ============================================================ */
.brand-identity__colors {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-identity__colors:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.brand-identity__colors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.brand-identity__color-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 20px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-identity__color-card:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.brand-identity__color-card--green:hover {
    border-color: rgba(110, 220, 95, 0.2);
}

.brand-identity__color-card--purple:hover {
    border-color: rgba(124, 58, 237, 0.2);
}

.brand-identity__color-card--dark:hover {
    border-color: rgba(11, 16, 32, 0.1);
}

.brand-identity__color-card--neutral:hover {
    border-color: rgba(0, 0, 0, 0.05);
}

.brand-identity__color-swatch {
    display: flex;
    gap: 8px;
    align-items: center;
}

.brand-identity__color-swatch-inner {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-identity__color-card:hover .brand-identity__color-swatch-inner {
    transform: scale(1.03);
}

.brand-identity__color-swatch--neutral {
    display: flex;
    gap: 6px;
}

.brand-identity__color-swatch--neutral .brand-identity__color-swatch-inner {
    width: 44px;
    height: 44px;
}

.brand-identity__color-swatch--neutral .brand-identity__color-swatch-inner:last-child {
    border: 1px solid var(--color-gray-light);
}

.brand-identity__color-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-identity__color-name {
    font-size: 0.9rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
}

.brand-identity__color-hex {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-gray-mid);
    font-family: 'Inter', monospace;
    letter-spacing: 0.02em;
}

.brand-identity__color-desc {
    font-size: 0.78rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
    margin-top: 2px;
}

.brand-identity__color-highlight {
    font-weight: 600;
    color: var(--color-charcoal);
}

/* ============================================================
   TYPOGRAPHY SHOWCASE
   ============================================================ */
.brand-identity__typography {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-identity__typography:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.brand-identity__typography-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.brand-identity__type-card {
    padding: 18px 20px 20px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-identity__type-card:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.brand-identity__type-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 10px;
}

.brand-identity__type-demo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.brand-identity__type-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray-mid);
    opacity: 0.4;
    letter-spacing: 0.02em;
}

.brand-identity__type-samples {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-identity__type-sample {
    font-family: var(--font-family);
    color: var(--color-charcoal);
    line-height: 1.4;
}

.brand-identity__type-sample--h1 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand-identity__type-sample--h2 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand-identity__type-sample--h3 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.brand-identity__type-sample--body {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-gray-mid);
}

.brand-identity__type-sample--body-sm {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-gray-mid);
}

.brand-identity__type-sample--label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-mid);
}

.brand-identity__type-sample--badge {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-purple);
    padding: 2px 10px;
    border-radius: 50px;
    display: inline-block;
    width: fit-content;
}

.brand-identity__type-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.brand-identity__type-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: default;
    transition: all 0.3s ease;
}

.brand-identity__type-btn:hover {
    transform: translateY(-2px);
}

.brand-identity__type-btn--primary {
    background: var(--color-lime);
    color: var(--color-charcoal);
}

.brand-identity__type-btn--secondary {
    background: transparent;
    color: var(--color-purple);
    border: 1.5px solid var(--color-purple);
}

.brand-identity__type-desc {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-gray-mid);
    display: block;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.02);
}

/* ============================================================
   DESIGN PRINCIPLES GRID
   ============================================================ */
.brand-identity__principles {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-identity__principles:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.brand-identity__principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.brand-identity__principle {
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-identity__principle:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    border-color: rgba(124, 58, 237, 0.04);
}

.brand-identity__principle-icon {
    font-size: 0.7rem;
    color: var(--color-lime);
    display: block;
    margin-bottom: 8px;
}

.brand-identity__principle-title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin-bottom: 4px;
}

.brand-identity__principle-desc {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
}

/* ============================================================
   BRAND GUIDELINES BANNER
   ============================================================ */
.brand-identity__guidelines {
    max-width: 1100px;
    margin: 0 auto 0;
}

.brand-identity__guidelines-banner {
    position: relative;
    padding: 36px 44px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.brand-identity__guidelines-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.brand-identity__guidelines-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.brand-identity__guidelines-icon {
    font-size: 2.4rem;
    color: var(--color-lime);
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
}

.brand-identity__guidelines-text {
    flex: 1;
}

.brand-identity__guidelines-title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.brand-identity__guidelines-desc {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 640px;
}

.brand-identity__guidelines-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 50% 0 24px 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.02), rgba(192, 227, 74, 0.02));
    pointer-events: none;
    z-index: 0;
}

/* ==================================================
END: Brand Colors, Typography & Design Language
================================================== */

/* ==================================================
START: Mission, Vision & Core Values
================================================== */

/* ----- Section Container ----- */
#brand-purpose {
    padding: 60px 0 80px;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.brand-purpose__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.brand-purpose__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.06;
    pointer-events: none;
}

.brand-purpose__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.04;
}

.brand-purpose__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -100px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.03;
}

.brand-purpose__glow--3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-purple);
    opacity: 0.02;
}

.brand-purpose__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.brand-purpose__orb--1 {
    width: 100px;
    height: 100px;
    top: 15%;
    right: 10%;
    animation-delay: 0s;
}

.brand-purpose__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 25%;
    left: 12%;
    animation-delay: 2s;
}

.brand-purpose__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
}

.brand-purpose__grid svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#brand-purpose .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#brand-purpose .particle--1 {
    width: 8px;
    height: 8px;
    top: 10%;
    left: 6%;
    animation-delay: 0s;
}
#brand-purpose .particle--2 {
    width: 12px;
    height: 12px;
    top: 78%;
    left: 90%;
    animation-delay: 1.2s;
}
#brand-purpose .particle--3 {
    width: 6px;
    height: 6px;
    top: 20%;
    left: 85%;
    animation-delay: 2.4s;
}
#brand-purpose .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.6s;
}
#brand-purpose .particle--5 {
    width: 7px;
    height: 7px;
    top: 40%;
    left: 4%;
    animation-delay: 3s;
}
#brand-purpose .particle--6 {
    width: 9px;
    height: 9px;
    top: 50%;
    left: 94%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.brand-purpose__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.brand-purpose__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.brand-purpose__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 18px 4px 16px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.brand-purpose__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.brand-purpose__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.brand-purpose__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.brand-purpose__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.brand-purpose__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   MISSION & VISION SHOWCASE
   ============================================================ */
.brand-purpose__showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 48px;
}

.brand-purpose__card {
    position: relative;
    padding: 36px 32px 32px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.brand-purpose__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.brand-purpose__card--mission {
    border-color: rgba(110, 220, 95, 0.08);
}

.brand-purpose__card--mission:hover {
    border-color: rgba(110, 220, 95, 0.15);
}

.brand-purpose__card--vision {
    border-color: rgba(124, 58, 237, 0.08);
}

.brand-purpose__card--vision:hover {
    border-color: rgba(124, 58, 237, 0.15);
}

.brand-purpose__card-icon {
    font-size: 1.8rem;
    color: var(--color-purple);
    margin-bottom: 12px;
}

.brand-purpose__card--mission .brand-purpose__card-icon {
    color: var(--color-lime);
}

.brand-purpose__card-badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--color-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(0, 0, 0, 0.02);
    padding: 2px 12px;
    border-radius: 50px;
    margin-bottom: 8px;
}

.brand-purpose__card-title {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.brand-purpose__card-text {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
    position: relative;
    z-index: 2;
}

.brand-purpose__card-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-lime), transparent);
    border-radius: 0 2px 0 0;
    opacity: 0.3;
}

.brand-purpose__card-glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.02), transparent 70%);
    pointer-events: none;
}

/* ============================================================
   CORE VALUES GRID
   ============================================================ */
.brand-purpose__values {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-purpose__values:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.brand-purpose__values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.brand-purpose__value {
    position: relative;
    padding: 22px 24px 24px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-purpose__value:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border-color: rgba(124, 58, 237, 0.04);
}

.brand-purpose__value-icon {
    font-size: 1.4rem;
    color: var(--color-purple);
    display: block;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

.brand-purpose__value:hover .brand-purpose__value-icon {
    transform: scale(1.1);
}

.brand-purpose__value-title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin-bottom: 4px;
}

.brand-purpose__value-desc {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.5;
}

.brand-purpose__value-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 0 2px 0 0;
    transition: width 0.4s ease;
}

.brand-purpose__value:hover .brand-purpose__value-line {
    width: 100%;
}

/* ============================================================
   BRAND PHILOSOPHY TIMELINE
   ============================================================ */
.brand-purpose__timeline {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.brand-purpose__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.brand-purpose__timeline-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.brand-purpose__timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.brand-purpose__timeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.brand-purpose__timeline-node:hover .brand-purpose__timeline-icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.brand-purpose__timeline-label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.brand-purpose__timeline-connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.brand-purpose__timeline-connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.brand-purpose__timeline-node--end .brand-purpose__timeline-connector {
    display: none;
}

/* ============================================================
   COMMITMENT BANNER
   ============================================================ */
.brand-purpose__commitment {
    max-width: 1100px;
    margin: 0 auto 0;
}

.brand-purpose__commitment-banner {
    position: relative;
    padding: 36px 44px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.brand-purpose__commitment-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.brand-purpose__commitment-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
}

.brand-purpose__commitment-icon {
    font-size: 2.4rem;
    color: var(--color-lime);
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
}

.brand-purpose__commitment-text {
    flex: 1;
}

.brand-purpose__commitment-title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.brand-purpose__commitment-desc {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 640px;
}

.brand-purpose__commitment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.btn-commitment-services {
    padding: 12px 28px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-commitment-services:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-commitment-services i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-commitment-services:hover i:last-child {
    transform: translateX(4px);
}

.btn-commitment-project {
    padding: 12px 28px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-commitment-project:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.brand-purpose__commitment-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 50% 0 24px 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.02), rgba(192, 227, 74, 0.02));
    pointer-events: none;
    z-index: 0;
}

/* ----- Focus States ----- */
.btn-commitment-services:focus-visible,
.btn-commitment-project:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Mission, Vision & Core Values
================================================== */

/* ==================================================
START: Final CTA – Join Our Journey
================================================== */

/* ----- Section Container ----- */
#brand-final {
    padding: 60px 0 0;
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ----- Background Decorations ----- */
.brand-final__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.brand-final__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.06;
    pointer-events: none;
}

.brand-final__glow--1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    background: var(--color-purple);
    opacity: 0.04;
}

.brand-final__glow--2 {
    width: 450px;
    height: 450px;
    bottom: -100px;
    left: -80px;
    background: var(--color-lime);
    opacity: 0.03;
}

.brand-final__glow--3 {
    width: 350px;
    height: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-purple);
    opacity: 0.02;
}

.brand-final__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(124, 58, 237, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.03);
    animation: floatOrb 8s ease-in-out infinite;
}

.brand-final__orb--1 {
    width: 100px;
    height: 100px;
    top: 15%;
    right: 12%;
    animation-delay: 0s;
}

.brand-final__orb--2 {
    width: 70px;
    height: 70px;
    bottom: 30%;
    left: 15%;
    animation-delay: 2s;
}

.brand-final__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
}

.brand-final__grid svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#brand-final .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.03);
    pointer-events: none;
    animation: floatParticle 6s ease-in-out infinite;
}

#brand-final .particle--1 {
    width: 8px;
    height: 8px;
    top: 10%;
    left: 6%;
    animation-delay: 0s;
}
#brand-final .particle--2 {
    width: 12px;
    height: 12px;
    top: 80%;
    left: 90%;
    animation-delay: 1.2s;
}
#brand-final .particle--3 {
    width: 6px;
    height: 6px;
    top: 20%;
    left: 85%;
    animation-delay: 2.4s;
}
#brand-final .particle--4 {
    width: 10px;
    height: 10px;
    top: 85%;
    left: 10%;
    animation-delay: 0.6s;
}
#brand-final .particle--5 {
    width: 7px;
    height: 7px;
    top: 40%;
    left: 4%;
    animation-delay: 3s;
}
#brand-final .particle--6 {
    width: 9px;
    height: 9px;
    top: 55%;
    left: 94%;
    animation-delay: 1.8s;
}

/* ----- Container ----- */
.brand-final__inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.brand-final__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.brand-final__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 18px 4px 16px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.brand-final__badge::before {
    content: '◆';
    margin-right: 8px;
    font-size: 0.5rem;
    color: var(--color-lime);
}

.brand-final__title {
    font-size: 2.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.brand-final__title .highlight-text {
    color: var(--color-purple);
    position: relative;
    display: inline-block;
}

.brand-final__title .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-lime);
    border-radius: 2px;
    opacity: 0.3;
}

.brand-final__subtitle {
    font-size: 1.05rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.7;
}

/* ============================================================
   SECTION HEADER (Reusable)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-header__icon {
    font-size: 1.2rem;
    color: var(--color-purple);
}

.section-header__title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-charcoal);
    margin: 0;
}

.section-header__count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    background: var(--color-off-white);
    padding: 2px 12px;
    border-radius: 50px;
    border: 1px solid var(--color-gray-light);
    margin-left: auto;
}

/* ============================================================
   BRAND LEGACY BANNER
   ============================================================ */
.brand-final__legacy {
    max-width: 1100px;
    margin: 0 auto 48px;
}

.brand-final__legacy-banner {
    position: relative;
    padding: 36px 44px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.brand-final__legacy-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.06);
}

.brand-final__legacy-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.brand-final__legacy-icon {
    font-size: 2.4rem;
    color: var(--color-lime);
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
}

.brand-final__legacy-text {
    flex: 1;
}

.brand-final__legacy-title {
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.brand-final__legacy-desc {
    font-size: 0.95rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 640px;
}

.brand-final__legacy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.btn-legacy-services {
    padding: 12px 28px;
    font-size: 0.9rem;
    background: var(--color-lime);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-legacy-services:hover {
    background: var(--color-lime-dark);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.45);
}

.btn-legacy-services i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-legacy-services:hover i:last-child {
    transform: translateX(4px);
}

.btn-legacy-contact {
    padding: 12px 28px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-legacy-contact:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

.brand-final__legacy-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 50% 0 24px 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.02), rgba(192, 227, 74, 0.02));
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   JOURNEY HIGHLIGHTS GRID
   ============================================================ */
.brand-final__highlights {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-final__highlights:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.brand-final__highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.brand-final__highlight {
    position: relative;
    padding: 20px 22px 22px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-final__highlight:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border-color: rgba(124, 58, 237, 0.04);
}

.brand-final__highlight-icon {
    font-size: 1.3rem;
    color: var(--color-purple);
    display: block;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

.brand-final__highlight:hover .brand-final__highlight-icon {
    transform: scale(1.1);
}

.brand-final__highlight-title {
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    margin-bottom: 2px;
}

.brand-final__highlight-desc {
    font-size: 0.82rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.4;
}

.brand-final__highlight-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    border-radius: 0 2px 0 0;
    transition: width 0.4s ease;
}

.brand-final__highlight:hover .brand-final__highlight-line {
    width: 100%;
}

/* ============================================================
   GROWTH TIMELINE
   ============================================================ */
.brand-final__timeline {
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 28px 32px 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-gray-light);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-x: auto;
}

.brand-final__timeline:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.06);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.04);
}

.brand-final__timeline-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 700px;
    gap: 6px;
    padding: 12px 8px 8px;
}

.brand-final__timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.brand-final__timeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.06);
    border: 2px solid rgba(124, 58, 237, 0.06);
    font-size: 1rem;
    color: var(--color-purple);
    transition: all 0.3s ease;
}

.brand-final__timeline-node:hover .brand-final__timeline-icon {
    background: linear-gradient(135deg, var(--color-purple), var(--color-lime));
    color: var(--color-white);
    border-color: transparent;
    transform: scale(1.1);
}

.brand-final__timeline-label {
    font-size: 0.6rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
    text-align: center;
    line-height: 1.2;
}

.brand-final__timeline-connector {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-lime), var(--color-purple));
    opacity: 0.2;
}

.brand-final__timeline-connector::after {
    content: '→';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--color-gray-mid);
}

.brand-final__timeline-node--end .brand-final__timeline-connector {
    display: none;
}

/* ============================================================
   FINAL CTA BANNER
   ============================================================ */
.brand-final__cta {
    max-width: 1100px;
    margin: 0 auto 40px;
}

.brand-final__cta-banner {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(192, 227, 74, 0.04));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-final__cta-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.08);
}

.brand-final__cta-content {
    padding: 40px 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-final__cta-badge {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.brand-final__cta-title {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-charcoal);
    letter-spacing: -0.02em;
    margin: 0;
}

.brand-final__cta-desc {
    font-size: 0.92rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-mid);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.brand-final__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.btn-cta-final-project {
    padding: 12px 32px;
    font-size: 0.9rem;
    background: linear-gradient(135deg, var(--color-lime), #5bcf4e);
    color: var(--color-charcoal);
    box-shadow: 0 4px 24px rgba(192, 227, 74, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: var(--font-weight-semibold);
}

.btn-cta-final-project:hover {
    background: linear-gradient(135deg, var(--color-lime-dark), #4ab83e);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(192, 227, 74, 0.5);
}

.btn-cta-final-project i:last-child {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-cta-final-project:hover i:last-child {
    transform: translateX(4px);
}

.btn-cta-final-portfolio {
    padding: 12px 32px;
    font-size: 0.9rem;
    border-color: var(--color-purple);
    color: var(--color-purple);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--font-weight-semibold);
}

.btn-cta-final-portfolio:hover {
    background: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.2);
}

/* ----- Final CTA Visual ----- */
.brand-final__cta-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A2A4A, #4F46E5);
    position: relative;
    overflow: hidden;
    padding: 30px 20px;
    min-height: 200px;
}

.brand-final__cta-icon-ring {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.brand-final__cta-icon-ring span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}

.brand-final__cta-icon-ring span:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-lime);
    transform: scale(1.1);
}

.brand-final__cta-pulse {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.04);
    animation: pulseRing 3s ease-in-out infinite;
}

.brand-final__cta-pulse::before {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.03);
    animation: pulseRing 3s ease-in-out infinite 1s;
}

/* ============================================================
   FOOTER TRANSITION
   ============================================================ */
.brand-final__transition {
    max-width: 1100px;
    margin: 0 auto 0;
    padding-bottom: 0;
}

.footer-transition-brand {
    position: relative;
    padding: 30px 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-transition-brand__line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.15), rgba(124, 58, 237, 0.01));
    position: relative;
}

.footer-transition-brand__line::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-purple);
    opacity: 0.2;
}

.footer-transition-brand__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.footer-transition-brand__glow--1 {
    width: 200px;
    height: 200px;
    top: -60px;
    left: 20%;
    background: var(--color-purple);
    opacity: 0.04;
}

.footer-transition-brand__glow--2 {
    width: 200px;
    height: 200px;
    top: -60px;
    right: 20%;
    background: var(--color-lime);
    opacity: 0.03;
}

.footer-transition-brand__nodes {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.ftb-node {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-purple);
    opacity: 0.08;
    animation: nodePulse 2s ease-in-out infinite;
}

.ftb-node:nth-child(1) { animation-delay: 0s; }
.ftb-node:nth-child(2) { animation-delay: 0.4s; }
.ftb-node:nth-child(3) { animation-delay: 0.8s; }
.ftb-node:nth-child(4) { animation-delay: 1.2s; }
.ftb-node:nth-child(5) { animation-delay: 1.6s; }

@keyframes nodePulse {
    0%, 100% { opacity: 0.08; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.3); }
}

.footer-transition-brand__text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-transition-brand__text i {
    font-size: 0.6rem;
    animation: bounceDown 2s ease-in-out infinite;
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* ----- Focus States ----- */
.btn-legacy-services:focus-visible,
.btn-legacy-contact:focus-visible,
.btn-cta-final-project:focus-visible,
.btn-cta-final-portfolio:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 4px;
}

/* ==================================================
END: Final CTA – Join Our Journey
================================================== */


/* ============================================================
   STATUS LABELS — Premium Navigation Badges
   ============================================================ */
.XoHubSolutions-StatusLabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
    margin-left: 8px;
    transition: var(--transition-smooth);
    white-space: nowrap;
    vertical-align: middle;
}

/* NEW - Lime Green */
.XoHubSolutions-StatusLabel-New {
    background: rgba(129, 199, 82, 0.12);
    color: var(--color-lime);
    border: 1px solid rgba(129, 199, 82, 0.25);
}

/* UPDATED - Purple */
.XoHubSolutions-StatusLabel-Updated {
    background: rgba(124, 80, 204, 0.12);
    color: var(--color-purple);
    border: 1px solid rgba(124, 80, 204, 0.25);
}

/* COMING SOON - Purple Light */
.XoHubSolutions-StatusLabel-ComingSoon {
    background: rgba(150, 112, 217, 0.12);
    color: var(--color-purple-light);
    border: 1px solid rgba(150, 112, 217, 0.25);
}

/* FREE - Lime Green */
.XoHubSolutions-StatusLabel-Free {
    background: rgba(129, 199, 82, 0.12);
    color: var(--color-lime-dark);
    border: 1px solid rgba(129, 199, 82, 0.3);
}

/* PAID - Charcoal */
.XoHubSolutions-StatusLabel-Paid {
    background: rgba(26, 26, 46, 0.08);
    color: var(--color-charcoal);
    border: 1px solid rgba(26, 26, 46, 0.15);
}

/* POPULAR - Gradient */
.XoHubSolutions-StatusLabel-Popular {
    background: linear-gradient(135deg, rgba(129, 199, 82, 0.15) 0%, rgba(124, 80, 204, 0.15) 100%);
    color: var(--color-purple);
    border: 1px solid rgba(124, 80, 204, 0.3);
}

/* BETA - Purple Dark */
.XoHubSolutions-StatusLabel-Beta {
    background: rgba(102, 64, 168, 0.12);
    color: var(--color-purple-dark);
    border: 1px solid rgba(102, 64, 168, 0.25);
}

/* PRO - Premium Purple */
.XoHubSolutions-StatusLabel-Pro {
    background: linear-gradient(135deg, rgba(124, 80, 204, 0.15) 0%, rgba(102, 64, 168, 0.15) 100%);
    color: var(--color-purple-dark);
    border: 1px solid rgba(124, 80, 204, 0.35);
}

/* Hover effects for status labels inside links */
a:hover .XoHubSolutions-StatusLabel-New {
    background: rgba(129, 199, 82, 0.2);
    border-color: rgba(129, 199, 82, 0.4);
}

a:hover .XoHubSolutions-StatusLabel-Updated,
a:hover .XoHubSolutions-StatusLabel-Popular {
    background: rgba(124, 80, 204, 0.2);
    border-color: rgba(124, 80, 204, 0.4);
}

a:hover .XoHubSolutions-StatusLabel-ComingSoon {
    background: rgba(150, 112, 217, 0.2);
    border-color: rgba(150, 112, 217, 0.4);
}

a:hover .XoHubSolutions-StatusLabel-Free {
    background: rgba(129, 199, 82, 0.2);
    border-color: rgba(129, 199, 82, 0.4);
}

a:hover .XoHubSolutions-StatusLabel-Paid {
    background: rgba(26, 26, 46, 0.12);
    border-color: rgba(26, 26, 46, 0.25);
}

a:hover .XoHubSolutions-StatusLabel-Beta,
a:hover .XoHubSolutions-StatusLabel-Pro {
    background: rgba(124, 80, 204, 0.2);
    border-color: rgba(124, 80, 204, 0.45);
}


/* ============================================================
   MEGA MENU RESPONSIVENESS — All Breakpoints
   ============================================================ */

/* Large screens (1400px+) - Full width mega menu */
@media (min-width: 1400px) {
    .XoHubSolutions-MegaMenu {
        max-width: 1200px;
    }
    
    .XoHubSolutions-MegaMenuInner {
        gap: 40px;
    }
}

/* Desktop (1200px - 1400px) - Standard mega menu */
@media (max-width: 1400px) and (min-width: 1200px) {
    .XoHubSolutions-MegaMenu {
        min-width: 900px;
        max-width: 1000px;
    }
}

/* Tablet landscape (993px - 1199px) - Slightly smaller mega menu */
@media (max-width: 1199px) and (min-width: 993px) {
    .XoHubSolutions-MegaMenu {
        min-width: 750px;
        max-width: 850px;
        padding: 24px;
    }
    
    .XoHubSolutions-MegaMenuInner {
        gap: 24px;
    }
    
    .XoHubSolutions-MegaMenuColumn {
        gap: 12px;
    }
    
    .XoHubSolutions-MegaCategoryIcon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    
    .XoHubSolutions-MegaCategoryTitle {
        font-size: 0.88rem;
    }
    
    .XoHubSolutions-MegaCategoryDesc {
        font-size: 0.68rem;
    }
    
    .XoHubSolutions-MegaLink {
        padding: 7px 10px;
        font-size: 0.78rem;
    }
}

/* Tablet portrait and mobile - Hide desktop mega menus completely */
@media (max-width: 992px) {
    /* Hide all desktop dropdowns and mega menus */
    .XoHubSolutions-MegaMenu,
    .XoHubSolutions-DropdownMenu {
        display: none !important;
    }
    
    /* Mobile navigation will handle mega menus via accordion */
}

/* Mobile mega menu accordion styles - ensure proper display */
@media (max-width: 992px) {
    .mobile-mega-dropdown {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .mobile-mega-dropdown.open {
        max-height: 2000px;
        overflow-y: auto;
    }
    
    .mobile-mega-category {
        border-bottom: 1px solid rgba(26, 26, 46, 0.08);
        padding: 12px 0;
    }
    
    .mobile-mega-category:last-child {
        border-bottom: none;
    }
    
    .mobile-mega-category-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--color-purple);
        padding: 8px 12px;
        background: rgba(124, 80, 204, 0.05);
        border-radius: 6px;
        margin-bottom: 8px;
    }
    
    .mobile-mega-category-title i {
        font-size: 0.85rem;
    }
    
    .mobile-mega-links {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-left: 8px;
    }
    
    .mobile-sub-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--color-charcoal);
        border-radius: 6px;
        transition: all 0.2s ease;
        min-height: 44px; /* Touch-friendly */
    }
    
    .mobile-sub-link:hover,
    .mobile-sub-link:focus {
        background: rgba(124, 80, 204, 0.08);
        color: var(--color-purple);
        transform: translateX(4px);
    }
    
    /* Status labels in mobile menu */
    .mobile-sub-link .XoHubSolutions-StatusLabel {
        font-size: 0.55rem;
        padding: 2px 6px;
        margin-left: auto;
    }
}

/* Extra small mobile (425px and below) */
@media (max-width: 425px) {
    .mobile-mega-category-title {
        font-size: 0.8rem;
        padding: 7px 10px;
    }
    
    .mobile-sub-link {
        font-size: 0.78rem;
        padding: 9px 10px;
    }
    
    .mobile-sub-link .XoHubSolutions-StatusLabel {
        font-size: 0.5rem;
        padding: 2px 5px;
    }
}

/* Very small mobile (375px and below) */
@media (max-width: 375px) {
    .mobile-mega-category-title {
        font-size: 0.78rem;
        gap: 8px;
    }
    
    .mobile-sub-link {
        font-size: 0.75rem;
        padding: 8px 10px;
    }
}

/* Ultra small mobile (320px) */
@media (max-width: 320px) {
    .mobile-mega-category-title {
        font-size: 0.75rem;
        padding: 6px 8px;
    }
    
    .mobile-sub-link {
        font-size: 0.72rem;
        padding: 8px 8px;
    }
    
    .mobile-sub-link .XoHubSolutions-StatusLabel {
        font-size: 0.48rem;
        padding: 1px 4px;
    }
}


/* ==================================================
START: Under Construction Modal
================================================== */
.uc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 36, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  animation: ucFadeIn 0.5s ease forwards;
  overflow-y: auto;
}

@keyframes ucFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

.uc-modal-overlay.is-closing {
  animation: ucFadeOut 0.4s ease forwards;
}

@keyframes ucFadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.uc-modal-container {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 28px;
  max-width: 520px;
  width: 100%;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 4px 20px rgba(168, 85, 247, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  animation: ucSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ucSlideUp {
  from {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.uc-modal-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.3), rgba(168, 85, 247, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.uc-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.15);
  color: #A855F7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
}

.uc-close-btn:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: #A855F7;
  transform: rotate(90deg);
  color: #9333EA;
}

.uc-close-btn:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
}

.uc-modal-content {
  padding: 40px 32px 32px;
  text-align: center;
}

.uc-icon-wrapper {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.uc-icon-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.1), rgba(168, 85, 247, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9333EA;
  border: 2px solid rgba(168, 85, 247, 0.2);
  animation: ucPulse 2.5s ease-in-out infinite;
}

@keyframes ucPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(163, 230, 53, 0.08);
  }
}

.uc-modal-title {
  font-family: 'Poppins', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #1E1E24;
  margin: 0 0 14px 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.uc-modal-desc {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #5A5A6E;
  margin: 0 0 24px 0;
}

.uc-modal-desc strong {
  color: #1E1E24;
  font-weight: 700;
}

.uc-progress-wrapper {
  margin-bottom: 20px;
  text-align: left;
}

.uc-progress-bar {
  height: 6px;
  background: rgba(168, 85, 247, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.uc-progress-fill {
  height: 100%;
  width: 75%;
  background: linear-gradient(90deg, #A3E635, #84CC16);
  border-radius: 3px;
  animation: ucProgressShimmer 2s ease-in-out infinite;
}

@keyframes ucProgressShimmer {
  0%, 100% {
    width: 65%;
  }
  50% {
    width: 85%;
  }
}

.uc-progress-label {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A855F7;
}

.uc-notice-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(163, 230, 53, 0.06);
  border: 1px solid rgba(163, 230, 53, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  margin-bottom: 28px;
}

.uc-notice-box svg {
  flex-shrink: 0;
  color: #84CC16;
  margin-top: 2px;
}

.uc-notice-box span {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #5A5A6E;
}

.uc-continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 32px;
  border-radius: 60px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #A3E635, #84CC16);
  color: #1a1a1a;
  box-shadow: 0 8px 28px rgba(163, 230, 53, 0.4);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  margin-bottom: 16px;
  width: 100%;
  justify-content: center;
}

.uc-continue-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(163, 230, 53, 0.55);
}

.uc-continue-btn:focus-visible {
  outline: 3px solid #A3E635;
  outline-offset: 3px;
}

.uc-continue-btn svg {
  transition: transform 0.3s;
}

.uc-continue-btn:hover svg {
  transform: translateX(4px);
}

.uc-footer-text {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 0.7rem;
  color: #B0B0B0;
  margin: 0;
  letter-spacing: 0.05em;
}

.uc-modal-overlay *:focus-visible {
  outline: 2px solid #A855F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 767px) {
  .uc-modal-container {
    border-radius: 22px;
    max-width: 90%;
  }
  .uc-modal-container::before {
    border-radius: 22px;
  }
  .uc-modal-content {
    padding: 32px 20px 24px;
  }
  .uc-modal-title {
    font-size: 1.5rem;
  }
  .uc-modal-desc {
    font-size: 0.88rem;
  }
  .uc-icon-ring {
    width: 64px;
    height: 64px;
  }
  .uc-icon-ring svg {
    width: 38px;
    height: 38px;
  }
  .uc-close-btn {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 575px) {
  .uc-modal-overlay {
    padding: 10px;
    align-items: flex-end;
  }
  .uc-modal-container {
    max-width: 100%;
  }
  .uc-modal-content {
    padding: 28px 16px 20px;
  }
  .uc-modal-title {
    font-size: 1.25rem;
  }
  .uc-modal-desc {
    font-size: 0.82rem;
    line-height: 1.6;
  }
  .uc-notice-box {
    padding: 12px 14px;
    font-size: 0.75rem;
  }
  .uc-continue-btn {
    padding: 13px 24px;
    font-size: 0.9rem;
  }
}

@media (max-width: 424px) {
  .uc-modal-title {
    font-size: 1.15rem;
  }
  .uc-modal-desc {
    font-size: 0.8rem;
  }
  .uc-icon-ring {
    width: 56px;
    height: 56px;
  }
  .uc-icon-ring svg {
    width: 32px;
    height: 32px;
  }
  .uc-progress-wrapper {
    margin-bottom: 16px;
  }
  .uc-notice-box {
    gap: 10px;
  }
  .uc-notice-box svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 374px) {
  .uc-modal-content {
    padding: 24px 12px 16px;
  }
  .uc-modal-title {
    font-size: 1.05rem;
  }
  .uc-modal-desc {
    font-size: 0.78rem;
  }
  .uc-notice-box {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
  }
  .uc-continue-btn {
    padding: 12px 20px;
    font-size: 0.85rem;
  }
  .uc-footer-text {
    font-size: 0.65rem;
  }
}

@media (max-width: 320px) {
  .uc-modal-overlay {
    padding: 5px;
  }
  .uc-modal-content {
    padding: 20px 10px 14px;
  }
  .uc-modal-title {
    font-size: 0.95rem;
  }
  .uc-modal-desc {
    font-size: 0.75rem;
  }
  .uc-icon-ring {
    width: 48px;
    height: 48px;
  }
  .uc-icon-ring svg {
    width: 28px;
    height: 28px;
  }
  .uc-progress-label {
    font-size: 0.65rem;
  }
}
/* ==================================================
END: Under Construction Modal
================================================== */