:root {
    --bg-dark: #0f0f12;
    --bg-card: #18181b;
    --bg-card-hover: #202024;

    /* Vibrant Red Theme */
    --primary: #FF2E63;
    --primary-dark: #D9204E;
    --primary-glow: rgba(255, 46, 99, 0.4);
    --accent: #FF6B6B;

    --text-main: #ffffff;
    --text-muted: #a1a1aa;

    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.03);

    --gradient-main: linear-gradient(135deg, #FF2E63 0%, #FF6B6B 100%);
    --gradient-dark: linear-gradient(180deg, rgba(24, 24, 27, 0) 0%, #18181b 100%);

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Outfit', sans-serif;
}

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

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Header */
.glass-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.2rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 15, 18, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
    transition: all 0.3s ease;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: white;
}

.logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.logo i {
    color: var(--primary);
}

.desktop-nav {
    display: flex;
    gap: 2.5rem;
}

.desktop-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 0.95rem;
}

.desktop-nav a:hover {
    color: var(--primary);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.dropdown .dropbtn {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(15, 15, 18, 0.95);
    backdrop-filter: blur(12px);
    min-width: 240px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    top: 100%;
    left: 0;
    padding: 0.5rem;
    margin-top: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.dropdown-content::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    left: 0;
    width: 100%;
    height: 1.5rem;
    background: transparent;
}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-content a {
    color: var(--text-muted);
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    border-radius: 8px;
    font-size: 0.9rem;
}

.dropdown-content a i {
    width: 20px;
    text-align: center;
    color: var(--primary);
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    transform: translateX(5px);
}

/* Mega Menu */
.dropdown-content.mega-menu {
    min-width: 550px;
    padding: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
}

.dropdown:hover .dropdown-content.mega-menu {
    transform: translateX(-50%) translateY(0);
}

.dropdown-content.mega-menu .row {
    display: flex;
    gap: 2rem;
}

.dropdown-content.mega-menu .column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dropdown-content.mega-menu h3 {
    color: white;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--glass-border);
    font-weight: 700;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.login-link {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.cta-btn {
    padding: 0.7rem 1.8rem;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    box-shadow: 0 4px 15px var(--primary-glow);
    text-decoration: none;
    display: inline-block;
}

.cta-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}

.cta-btn.large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

.cta-btn.white {
    background: white;
    color: var(--primary);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.cta-btn.white:hover {
    background: #f0f0f0;
    color: var(--primary-dark);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8rem 5% 4rem;
    position: relative;
    overflow: hidden;
}

.hero-section.small-hero {
    min-height: 40vh;
    padding: 8rem 5% 2rem;
    justify-content: center;
    text-align: center;
}

.hero-section.small-hero .hero-content {
    max-width: 800px;
}

.hero-section.small-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.hero-section.small-hero .subtitle {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

@keyframes blob-bounce {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

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

@keyframes blob-bounce-reverse {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-30px, 50px) scale(1.1);
    }

    66% {
        transform: translate(20px, -20px) scale(0.9);
    }

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

.hero-bg-glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
    animation: blob-bounce 20s infinite ease-in-out;
    opacity: 0.8;
}

.hero-section::before {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.15) 0%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
    animation: blob-bounce-reverse 25s infinite ease-in-out;
    pointer-events: none;
}

/* Cloud Hero Specific Styles */
.hero-section.cloud-hero .hero-bg-glow {
    background: radial-gradient(circle, rgba(67, 97, 238, 0.6) 0%, transparent 70%);
    opacity: 0.9;
}

.hero-section.cloud-hero::before {
    background: radial-gradient(circle, rgba(76, 201, 240, 0.3) 0%, transparent 70%);
    opacity: 0.7;
}

.hero-content {
    max-width: 55%;
    z-index: 1;
}

.badge {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: rgba(255, 46, 99, 0.1);
    border: 1px solid rgba(255, 46, 99, 0.3);
    border-radius: 50px;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

h1 {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.gradient-text {
    background: var(--gradient-main);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
    max-width: 90%;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
}

.secondary-btn {
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.trust-indicators {
    display: flex;
    gap: 2rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trust-item i {
    color: var(--primary);
}

/* Hero Visual */
.hero-visual {
    width: 40%;
    position: relative;
    display: flex;
    justify-content: center;
}

.server-rack-mockup {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

.server-unit {
    background: #1e1e24;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.server-unit.active {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(255, 46, 99, 0.2);
}

.server-unit.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
}

.lights {
    display: flex;
    gap: 0.5rem;
}

.lights span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
}

.server-unit.active .lights span {
    background: #00ff88;
    box-shadow: 0 0 5px #00ff88;
    animation: blink 1s infinite alternate;
}

.server-unit.active .lights span:nth-child(2) {
    animation-delay: 0.2s;
}

.server-unit.active .lights span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.status {
    font-size: 0.8rem;
    font-family: monospace;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.server-unit.active .status {
    color: var(--primary);
}

/* Content Sections */
.content-section {
    padding: 6rem 5%;
}

.alt-bg {
    background: #131316;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2.5rem;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.service-card.featured {
    border-color: var(--primary);
    background: linear-gradient(180deg, rgba(255, 46, 99, 0.05) 0%, var(--bg-card) 100%);
}

.popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--primary);
}

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.service-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.price-block {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
}

.currency {
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: 2px;
}

.amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
}

.period {
    color: var(--text-muted);
    margin-left: 5px;
}

.feature-list {
    list-style: none;
    margin-bottom: 2rem;
}

.feature-list li {
    margin-bottom: 0.8rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.feature-list li i {
    color: var(--primary);
    font-size: 0.9rem;
}

.card-btn {
    width: 100%;
    padding: 0.8rem;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.card-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.card-btn.primary {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 15px var(--primary-glow);
}

.card-btn.primary:hover {
    background: var(--primary-dark);
    color: white;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

/* Specific Layout for Our Services (Row of 4, then Row of 3) */
.services-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.services-list .feature-item-link {
    display: flex;
    /* Ensures child height stretch */
    /* Mobile First: 1 per row */
    flex: 0 0 100%;
}

.services-list .feature-item-link .feature-item {
    width: 100%;
    height: 100%;
}

/* Tablet: 2 per row */
@media (min-width: 600px) {
    .services-list .feature-item-link {
        flex: 0 0 calc(50% - 1rem);
    }
}

/* Small Desktop: 3 per row (Classic Grid fallback) */
@media (min-width: 900px) {
    .services-list .feature-item-link {
        flex: 0 0 calc(33.333% - 1.34rem);
    }
}

/* Large Desktop: 4 per row, allowing wrap for next 3 */
@media (min-width: 1200px) {
    .services-list .feature-item-link {
        flex: 0 0 calc(25% - 1.5rem);
    }
}

.feature-item {
    padding: 2rem;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    transition: all 0.3s;
}

.feature-item:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(255, 46, 99, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--primary);
    font-size: 1.2rem;
}

.feature-item h4 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.feature-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* FAQ Section */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-question {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.02);
}

.faq-question h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.faq-question i {
    color: var(--text-muted);
    transition: transform 0.3s;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: var(--primary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    padding-bottom: 1.5rem;
}

.faq-answer p {
    color: var(--text-muted);
    line-height: 1.6;
}

/* CTA Section */
.cta-section {
    padding: 6rem 5%;
    background-color: var(--primary-dark);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px),
        radial-gradient(rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px),
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        var(--gradient-main);
    background-size: 20px 20px, 20px 20px, 100% 100%, 100% 100%;
    background-position: 0 0, 10px 10px, 0 0, 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* Footer */
footer {
    background: #0a0a0c;
    padding: 5rem 5% 2rem;
    border-top: 1px solid var(--glass-border);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-col .logo {
    margin-bottom: 1.5rem;
}

.footer-col p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    max-width: 300px;
}

.footer-col h4 {
    color: white;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.footer-col a {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 0.8rem;
    transition: color 0.3s;
    font-size: 0.95rem;
}

.footer-col a:hover {
    color: var(--primary);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    color: white;
    margin-bottom: 0;
}

.social-links a:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 968px) {
    .hero-section {
        flex-direction: column;
        padding-top: 7rem;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
        margin-bottom: 4rem;
    }

    .hero-visual {
        width: 100%;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .trust-indicators {
        justify-content: center;
    }

    .desktop-nav {
        display: none;
    }

    .desktop-nav.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(15, 15, 18, 0.98);
        padding: 2rem;
        border-bottom: 1px solid var(--glass-border);
        gap: 1.5rem;
        backdrop-filter: blur(20px);
        height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .dropdown {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        width: 100%;
    }

    .dropdown .dropbtn {
        width: 100%;
        justify-content: space-between;
        padding: 0.5rem 0;
    }

    .dropdown-content {
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-top: 0.5rem;
        opacity: 1;
        transform: none;
        display: none;
        padding-left: 1rem;
        width: 100%;
    }

    .dropdown-content::before {
        display: none;
    }


    .dropdown.active .dropdown-content {
        display: block;
    }

    .dropdown-content.mega-menu {
        min-width: auto !important;
        padding: 0 !important;
        left: auto !important;
        transform: none !important;
        padding-left: 1rem !important;
        position: static !important;
    }

    .dropdown-content.mega-menu .row {
        flex-direction: column !important;
        display: flex !important;
        gap: 1rem;
    }

    .dropdown-content.mega-menu .column {
        gap: 0.5rem;
    }

    .dropdown-content a {
        padding: 10px 0;
    }

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

    .header-actions {
        display: none;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.global-infra {
    position: relative;
    overflow: hidden;
}

.global-infra .section-header,
.global-infra .features-grid {
    position: relative;
    z-index: 1;
}

.global-map {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    margin: 0;
    opacity: 0.4;
    mix-blend-mode: lighten;
    pointer-events: none;
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    filter: blur(3px);
}

/* Split Section Design */
.split-section {
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-top: 4rem;
}

.visual-col {
    flex: 1;
}

.content-col {
    flex: 1;
}

/* Transfer Animation Container */
.server-transfer-anim {
    position: relative;
    height: 250px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4rem;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.server-transfer-anim::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 60%);
    opacity: 0.1;
    z-index: 1;
}

.server-icon {
    position: relative;
    text-align: center;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.server-icon:hover {
    transform: scale(1.1);
}

.server-icon i {
    display: block;
    margin-bottom: 0.8rem;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

.server-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Connection Line */
.transfer-stream {
    position: absolute;
    top: 45%;
    left: 100px;
    right: 100px;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
    border-radius: 4px;
}

.file-packet {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--primary);
    top: -6px;
    z-index: 3;
    opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .split-section {
        flex-direction: column;
        text-align: center;
    }

    .split-section .visual-col {
        width: 100%;
    }

    .split-section .content-col {
        width: 100%;
        text-align: left;
    }

    .content-col .icon-box {
        margin-left: 0;
    }

    /* When centered, center the icon box too if preferred, but usually left align reads better for text */
    /* If you want text centered on mobile: */
    /*
    .split-section .content-col { text-align: center; }
    .content-col .icon-box { margin: 0 auto 1.5rem auto; }
    .feature-list li { justify-content: center; }
    */
}

@keyframes transferMove {
    0% {
        left: 0;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        left: 100%;
        opacity: 0;
        transform: scale(0.5);
    }
}


/* App Installer Animation */
.app-install-anim {
    position: relative;
    height: 250px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.center-install-btn {
    width: 80px;
    height: 80px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px var(--primary-glow);
    z-index: 10;
    cursor: pointer;
    animation: pulseBtn 2s infinite;
}

.center-install-btn i {
    font-size: 2rem;
    color: white;
}

.orbit-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    font-size: 1.5rem;
    color: white;
    transition: all 0.3s;
}

.orbit-icon:nth-child(2) {
    top: 40px;
    left: 60px;
    animation: float 3s ease-in-out infinite;
}

.orbit-icon:nth-child(3) {
    top: 40px;
    right: 60px;
    animation: float 3s ease-in-out infinite 0.5s;
}

.orbit-icon:nth-child(4) {
    bottom: 40px;
    left: 80px;
    animation: float 3s ease-in-out infinite 1s;
}

.orbit-icon:nth-child(5) {
    bottom: 40px;
    right: 80px;
    animation: float 3s ease-in-out infinite 1.5s;
}

.orbit-icon:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    transform: scale(1.1);
}

@keyframes pulseBtn {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 46, 99, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(255, 46, 99, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 46, 99, 0);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

/* Panel Interface Animation */
.panel-interface-anim {
    position: relative;
    height: 250px;
    background: #1e1e24;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    padding: 20px;
    display: flex;
    gap: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.panel-sidebar {
    width: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.panel-sidebar span {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.panel-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.panel-header {
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.panel-widget {
    height: 80px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.panel-widget::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--primary);
    width: 0%;
    animation: loadBar 3s ease-in-out infinite;
}

.panel-widget:nth-child(2)::after {
    animation-delay: 0.5s;
    width: 60%;
}

.panel-widget:nth-child(3)::after {
    animation-delay: 1s;
    width: 40%;
}

.panel-widget:nth-child(1)::after {
    animation-delay: 0s;
    width: 80%;
}

@keyframes loadBar {
    0% {
        width: 0;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

.badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.badge:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
}

.badge i {
    color: var(--primary);
}

.badge:hover i {
    color: white;
}

/* Cloud Hero Visual Animation */
.cloud-visual-container {
    position: relative;
    width: 450px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.cloud-node {
    background: rgba(23, 23, 23, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    position: absolute;
    transition: all 0.3s ease;
}

/* Main Central Node */
.main-node {
    width: 180px;
    height: 180px;
    z-index: 10;
    background: rgba(67, 97, 238, 0.15);
    /* Cloud Blue Tint */
    border: 1px solid rgba(67, 97, 238, 0.3);
    animation: main-pulse 5s infinite ease-in-out;
}

.main-node i {
    font-size: 3.5rem;
    margin-bottom: 0.8rem;
    background: linear-gradient(135deg, #4cc9f0 0%, #4361ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(67, 97, 238, 0.4));
}

.main-node .node-label {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.main-node .node-status {
    font-size: 0.8rem;
    background: rgba(76, 201, 240, 0.2);
    color: #4cc9f0;
    padding: 4px 12px;
    border-radius: 20px;
    margin-top: 8px;
    font-weight: 600;
}

/* Satellite Nodes */
.sub-node {
    width: 110px;
    height: 100px;
    z-index: 5;
}

.sub-node i {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 8px;
}

.sub-node span {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Individual Styles */
.node-cpu {
    top: 10%;
    right: 5%;
    animation: float-cloud 6s infinite ease-in-out;
}

.node-cpu i {
    color: #f72585;
}

.node-ram {
    bottom: 15%;
    right: 15%;
    animation: float-cloud 5s infinite ease-in-out reverse;
}

.node-ram i {
    color: #4cc9f0;
}

.node-ssd {
    bottom: 25%;
    left: 5%;
    animation: float-cloud 7s infinite ease-in-out 1s;
}

.node-ssd i {
    color: #7209b7;
}

.node-net {
    top: 15%;
    left: 10%;
    animation: float-cloud 8s infinite ease-in-out reverse 0.5s;
}

.node-net i {
    color: #4361ee;
}

/* Connection Lines (simulated with pseudo elements on main container if needed, but keeping clean for glassmorphism) */

@keyframes main-pulse {

    0%,
    100% {
        box-shadow: 0 0 30px rgba(67, 97, 238, 0.15);
        transform: translateY(0) scale(1);
    }

    50% {
        box-shadow: 0 0 60px rgba(67, 97, 238, 0.3);
        transform: translateY(-10px) scale(1.02);
    }
}

@keyframes float-cloud {

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

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

/* Responsive adjustment for cloud visual */
@media (max-width: 768px) {
    .cloud-visual-container {
        transform: scale(0.8);
        height: 350px;
    }
}

/* Shared Hosting Visual Animation */
.shared-visual-container {
    position: relative;
    width: 450px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shared-server-base {
    width: 200px;
    height: 140px;
    background: linear-gradient(180deg, #2a2a30 0%, #18181b 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: absolute;
    bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.server-indicators {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.server-indicators span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
    animation: blink 2s infinite;
}

.server-indicators span:nth-child(1) {
    background: #00ff88;
    animation-delay: 0s;
}

.server-indicators span:nth-child(2) {
    background: #00ff88;
    animation-delay: 0.2s;
}

.server-indicators span:nth-child(3) {
    background: #ffcc00;
    animation-delay: 0.5s;
}

.server-slot {
    width: 80%;
    height: 4px;
    background: #333;
    margin: 4px 0;
    border-radius: 2px;
}

/* Floating Site Cards */
.site-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    z-index: 5;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.site-card i {
    font-size: 1.5rem;
}

.site-card span {
    font-weight: 600;
    font-size: 0.9rem;
}

.site-wp {
    top: 60px;
    left: 20px;
    animation: float-site 6s infinite ease-in-out;
}

.site-wp i {
    color: #21759b;
}

/* WordPress Blue */

.site-shop {
    top: 40px;
    right: 30px;
    animation: float-site 7s infinite ease-in-out 1s;
}

.site-shop i {
    color: #fe6e4f;
}

/* Magento/Shop Orange */

.site-code {
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    animation: float-site 8s infinite ease-in-out 0.5s;
}

.site-code i {
    color: #f7df1e;
}

/* JS Yellow */

.shared-glow-ring {
    position: absolute;
    width: 350px;
    height: 350px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spin-slow 40s linear infinite;
    z-index: 0;
}

@keyframes float-site {

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

    50% {
        transform: translateY(-15px) translateX(5px);
    }
}

@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Override center transform for site-code */
.site-code {
    animation: float-site-center 8s infinite ease-in-out 0.5s;
}

@keyframes float-site-center {

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

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

/* cPanel Hero Visual Animation */
.cpanel-visual-container {
    position: relative;
    width: 450px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.cpanel-dashboard {
    width: 240px;
    height: 160px;
    background: rgba(30, 30, 35, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 10;
    transform: rotateX(10deg) rotateY(-10deg);
    animation: dashboard-float 6s infinite ease-in-out;
}

.dashboard-header {
    height: 12px;
    width: 100%;
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.dashboard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #555;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dashboard-dot.red {
    background: #ff5f56;
}

.dashboard-dot.yellow {
    background: #ffbd2e;
}

.dashboard-dot.green {
    background: #27c93f;
}

.dashboard-row {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.dashboard-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    width: 0%;
    animation: load-bar-anim 3s infinite ease-in-out;
}

.bar-1 {
    width: 70%;
    animation-delay: 0s;
}

.bar-2 {
    width: 45%;
    animation-delay: 0.5s;
    background: #4cc9f0;
}

.bar-3 {
    width: 90%;
    animation-delay: 1s;
    background: #ffbd2e;
}

/* Floating Tools */
.tool-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: white;
    z-index: 12;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.tool-email {
    top: 20%;
    left: 0;
    animation: float-tool 5s infinite ease-in-out;
}

.tool-email i {
    color: #4cc9f0;
}

.tool-db {
    top: 10%;
    right: 10%;
    animation: float-tool 6s infinite ease-in-out 1s;
}

.tool-db i {
    color: #ffbd2e;
}

.tool-file {
    bottom: 15%;
    left: 10%;
    animation: float-tool 7s infinite ease-in-out 0.5s;
}

.tool-file i {
    color: #ff5f56;
}

.tool-lock {
    bottom: 25%;
    right: 5%;
    animation: float-tool 5.5s infinite ease-in-out 1.5s;
}

.tool-lock i {
    color: #27c93f;
}

.cpanel-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    background: var(--primary);
    filter: blur(90px);
    opacity: 0.3;
    z-index: 0;
}

@keyframes dashboard-float {

    0%,
    100% {
        transform: rotateX(10deg) rotateY(-10deg) translateY(0);
    }

    50% {
        transform: rotateX(5deg) rotateY(-5deg) translateY(-10px);
    }
}

@keyframes load-bar-anim {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes float-tool {

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

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

/* WordPress Hero Visual Animation */
.wp-visual-container {
    position: relative;
    width: 450px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wp-logo-center {
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 40px rgba(33, 117, 155, 0.3);
    position: relative;
    z-index: 10;
    animation: wp-pulse 4s infinite ease-in-out;
}

.wp-logo-center i {
    font-size: 5rem;
    color: #21759b;
    /* Official WP Blue */
    filter: drop-shadow(0 0 10px rgba(33, 117, 155, 0.6));
}

.wp-orbit-ring {
    position: absolute;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spin-slow 20s linear infinite;
}

.ring-1 {
    width: 280px;
    height: 280px;
    animation-duration: 25s;
}

.ring-2 {
    width: 400px;
    height: 400px;
    animation-duration: 40s;
    animation-direction: reverse;
}

.orbit-item {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(30, 30, 35, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Position items on Ring 1 */
.item-rocket {
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.item-rocket i {
    color: #fe6e4f;
}

.item-shield {
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.item-shield i {
    color: #27c93f;
}

/* Position items on Ring 2 */
.item-plug {
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
}

.item-plug i {
    color: #f7df1e;
}

.item-theme {
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
}

.item-theme i {
    color: #d9204e;
}

@keyframes wp-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 40px rgba(33, 117, 155, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 70px rgba(33, 117, 155, 0.5);
    }
}

@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Rotate items counter to ring spin to keep them upright */
.ring-1 .orbit-item {
    animation: counter-spin 25s linear infinite;
}

.ring-2 .orbit-item {
    animation: counter-spin-reverse 40s linear infinite;
}

@keyframes counter-spin {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(-360deg);
    }
}

@keyframes counter-spin-reverse {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Magento Hero Visual Animation */
.magento-visual-container {
    position: relative;
    width: 450px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 800px;
}

.magento-box {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(244, 107, 35, 0.2) 0%, rgba(20, 20, 23, 0.8) 100%);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(244, 107, 35, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    animation: box-rotate 10s infinite linear;
    position: relative;
    box-shadow: 0 0 50px rgba(244, 107, 35, 0.2);
}

.magento-box::before,
.magento-box::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(244, 107, 35, 0.3);
}

.magento-box::before {
    transform: translateZ(20px);
}

.magento-box::after {
    transform: translateZ(-20px);
}

.magento-logo-3d {
    font-size: 6rem;
    color: #f46b23;
    /* Magento Orange */
    filter: drop-shadow(0 0 15px rgba(244, 107, 35, 0.6));
    animation: logo-float 4s infinite ease-in-out;
    transform: translateZ(30px);
}

/* Floating E-commerce Elements */
.ecom-item {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(30, 30, 35, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.item-cart {
    top: 20px;
    right: 40px;
    animation: float-ecom 5s infinite ease-in-out;
}

.item-cart i {
    color: #27c93f;
}

.item-card {
    bottom: 40px;
    left: 30px;
    animation: float-ecom 6s infinite ease-in-out 1s;
}

.item-card i {
    color: #4cc9f0;
}

.item-bag {
    top: 40%;
    left: -30px;
    animation: float-ecom 7s infinite ease-in-out 0.5s;
}

.item-bag i {
    color: #ffbd2e;
}

.item-chart {
    bottom: 30%;
    right: -20px;
    animation: float-ecom 5.5s infinite ease-in-out 1.5s;
}

.item-chart i {
    color: #f72585;
}

@keyframes box-rotate {
    0% {
        transform: rotateX(15deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(15deg) rotateY(360deg);
    }
}

@keyframes logo-float {

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

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

@keyframes float-ecom {

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

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

/* Enhanced cPanel/WHM Visual */
.whm-dashboard {
    width: 260px;
    height: 180px;
    background: rgba(40, 40, 45, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 107, 43, 0.3);
    /* WHM Orange border */
    border-radius: 12px;
    position: absolute;
    top: -20px;
    left: -30px;
    z-index: 5;
    transform: rotateX(10deg) rotateY(-15deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    padding: 15px;
    animation: dashboard-float-delayed 7s infinite ease-in-out;
}

.whm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.whm-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ff6b2b;
    /* WHM Orange */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cpanel-dashboard {
    /* Existing style override/refinement if needed, or rely on previous */
    z-index: 10;
    border-color: rgba(255, 152, 43, 0.4);
    /* cPanel Orange/Yellow tint */
}

.cpanel-logo-ph {
    font-weight: 800;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpanel-logo-ph span {
    background: #ff6c2c;
    color: black;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}

@keyframes dashboard-float-delayed {

    0%,
    100% {
        transform: rotateX(10deg) rotateY(-15deg) translateY(0);
    }

    50% {
        transform: rotateX(5deg) rotateY(-10deg) translateY(-8px);
    }
}

/* AWS Hero Visual Animation */
.aws-visual-container {
    position: relative;
    width: 450px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aws-hex-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Hexagonal pattern background */
    background-color: transparent;
    opacity: 0.1;
    background-image: linear-gradient(30deg, #ff9900 12%, transparent 12.5%, transparent 87%, #ff9900 87.5%, #ff9900),
        linear-gradient(150deg, #ff9900 12%, transparent 12.5%, transparent 87%, #ff9900 87.5%, #ff9900),
        linear-gradient(30deg, #ff9900 12%, transparent 12.5%, transparent 87%, #ff9900 87.5%, #ff9900),
        linear-gradient(150deg, #ff9900 12%, transparent 12.5%, transparent 87%, #ff9900 87.5%, #ff9900),
        linear-gradient(60deg, #ff990077 25%, transparent 25.5%, transparent 75%, #ff990077 75%, #ff990077),
        linear-gradient(60deg, #ff990077 25%, transparent 25.5%, transparent 75%, #ff990077 75%, #ff990077);
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
    mask-image: radial-gradient(circle, black 40%, transparent 60%);
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 70%);
}

.aws-core {
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, rgba(255, 153, 0, 0.2) 0%, rgba(30, 30, 35, 0.9) 70%);
    backdrop-filter: blur(8px);
    border: 2px solid #ff9900;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    box-shadow: 0 0 50px rgba(255, 153, 0, 0.3);
    animation: aws-pulse 3s infinite ease-in-out;
}

.aws-core i {
    font-size: 4rem;
    color: #ff9900;
    filter: drop-shadow(0 0 10px rgba(255, 153, 0, 0.6));
}

.service-orb {
    position: absolute;
    width: 70px;
    height: 70px;
    background: rgba(30, 30, 35, 0.8);
    border: 1px solid rgba(255, 153, 0, 0.4);
    border-radius: 50%;
    /* Or keep square/hex for AWS feeling */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.8rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    z-index: 5;
    transition: all 0.3s ease;
}

.orb-ec2 {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    animation: float-hex 6s infinite ease-in-out;
}

.orb-ec2 i {
    color: #f90;
}

.orb-s3 {
    bottom: 60px;
    right: 40px;
    animation: float-hex 7s infinite ease-in-out 1s;
}

.orb-s3 i {
    color: #569a31;
    /* S3 Green */
}

.orb-rds {
    bottom: 60px;
    left: 40px;
    animation: float-hex 5s infinite ease-in-out 0.5s;
}

.orb-rds i {
    color: #3b48cc;
    /* RDS Blue */
}

.connector-line {
    position: absolute;
    background: rgba(255, 153, 0, 0.3);
    z-index: 1;
}

@keyframes aws-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 40px rgba(255, 153, 0, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 70px rgba(255, 153, 0, 0.5);
    }
}

@keyframes float-hex {

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

    50% {
        transform: translateX(var(--tx, 0)) translateY(-15px);
    }
}

/* Adjust transforms for animations to keep centering */
.orb-ec2 {
    --tx: -50%;
}

.orb-s3 {
    --tx: 0;
}

.orb-rds {
    --tx: 0;
}

/* AWS 2.0 Visual Refinement */
.aws-network-mesh {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle, rgba(255, 153, 0, 0.2) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 153, 0, 0.2) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    mask-image: radial-gradient(circle, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 80%);
    animation: mesh-pulse 4s infinite ease-in-out;
    z-index: 0;
}

.aws-center-logo {
    width: 140px;
    height: 140px;
    background: #232f3e;
    /* AWS Dark Blue */
    border: 2px solid #ff9900;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    box-shadow: 0 0 50px rgba(255, 153, 0, 0.25);
    animation: aws-float-center 6s infinite ease-in-out;
    position: relative;
}

.aws-center-logo i {
    font-size: 4.5rem;
    color: #ff9900;
    filter: drop-shadow(0 0 10px rgba(255, 153, 0, 0.4));
}

.aws-service-card {
    position: absolute;
    padding: 12px 18px;
    background: rgba(35, 47, 62, 0.9);
    border: 1px solid rgba(255, 153, 0, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    z-index: 5;
    transition: all 0.3s ease;
}

.aws-service-card i {
    font-size: 1.3rem;
}

/* Service Card Positions */
.card-cloudfront {
    top: 15%;
    right: 5%;
    animation: float-aws-card 6s infinite ease-in-out;
}

.card-cloudfront i {
    color: #f90;
}

.card-rds {
    bottom: 20%;
    left: 5%;
    animation: float-aws-card 7s infinite ease-in-out 1s;
}

.card-rds i {
    color: #3b48cc;
}

.card-scaling {
    top: 25%;
    left: -5%;
    animation: float-aws-card 5s infinite ease-in-out 0.5s;
}

.card-scaling i {
    color: #ff9900;
}

.card-shield {
    bottom: 10%;
    right: 15%;
    animation: float-aws-card 8s infinite ease-in-out 1.5s;
}

.card-shield i {
    color: #dd3b4b;
}

@keyframes mesh-pulse {

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

    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

@keyframes aws-float-center {

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

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

@keyframes float-aws-card {

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

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

/* DigitalOcean Visual Animation */
.do-visual-container {
    position: relative;
    width: 450px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.do-waves {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 2px solid rgba(0, 105, 255, 0.2);
    /* DO Blue */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: do-wave-spin 10s linear infinite;
    z-index: 0;
}

.do-waves::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid rgba(0, 105, 255, 0.4);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: do-wave-spin 8s linear infinite reverse;
}

.do-waves::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid rgba(0, 128, 255, 0.1);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: do-wave-spin 12s linear infinite;
}

.droplet-card {
    width: 220px;
    height: 140px;
    background: rgba(20, 20, 40, 0.85);
    /* Deep Blue/Black */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 105, 255, 0.3);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 105, 255, 0.15);
    z-index: 10;
    position: relative;
    animation: droplet-float 6s ease-in-out infinite;
}

.droplet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.droplet-logo {
    color: #0080ff;
    /* DO Brand Blue */
    font-size: 1.5rem;
}

.droplet-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00E676;
    /* Active Green */
    box-shadow: 0 0 5px #00E676;
}

.droplet-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.droplet-stat-val {
    color: white;
    font-weight: 600;
}

/* Floating Feature Bubbles */
.do-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 105, 255, 0.1);
    border: 1px solid rgba(0, 105, 255, 0.2);
    border-radius: 30px;
    font-size: 0.85rem;
    color: white;
    z-index: 5;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.bubble-ssd {
    top: 10%;
    right: 10%;
    animation: float-bubble 5s infinite ease-in-out;
}

.bubble-mon {
    bottom: 15%;
    left: 0%;
    animation: float-bubble 7s infinite ease-in-out 1s;
}

.bubble-api {
    top: 25%;
    left: -5%;
    animation: float-bubble 6s infinite ease-in-out 0.5s;
}

.bubble-backup {
    bottom: 25%;
    right: -5%;
    animation: float-bubble 8s infinite ease-in-out 1.5s;
}

@keyframes do-wave-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes droplet-float {

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

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

@keyframes float-bubble {

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

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

/* Dedicated Server Visual Animation */
.dedicated-visual-container {
    position: relative;
    width: 450px;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
}

.rack-cabinet {
    width: 220px;
    height: 380px;
    background: linear-gradient(90deg, #151515 0%, #2a2a2a 50%, #151515 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    position: relative;
    padding: 10px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    transform: rotateY(-15deg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.rack-cabinet::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.server-blade {
    width: 100%;
    height: 40px;
    background: linear-gradient(90deg, #222 0%, #333 50%, #222 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    position: relative;
    transition: all 0.3s ease;
}

.server-blade:hover {
    background: linear-gradient(90deg, #252525 0%, #444 50%, #252525 100%);
    box-shadow: 0 0 10px rgba(76, 201, 240, 0.3);
}

.blade-lights {
    display: flex;
    gap: 4px;
}

.blade-lights span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #555;
    animation: blink-random 2s infinite;
}

.server-blade:nth-child(1) .blade-lights span {
    animation-delay: 0s;
    background: #00ff88;
}

.server-blade:nth-child(2) .blade-lights span {
    animation-delay: 0.5s;
    background: #00ff88;
}

.server-blade:nth-child(3) .blade-lights span {
    animation-delay: 1.2s;
    background: #ffbd2e;
}

/* ... more varied blinking */

.blade-vent {
    width: 40px;
    height: 20px;
    background: repeating-linear-gradient(90deg, #111, #111 2px, #333 2px, #333 4px);
    border-radius: 2px;
}

/* Highlighted "Owned" Server - Pulled Out */
.server-blade.owned {
    transform: translateZ(30px) translateX(20px);
    background: #1e1e24;
    border-color: var(--primary);
    box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.5), 0 0 15px var(--primary-glow);
    z-index: 15;
    animation: blade-slide 6s infinite ease-in-out;
}

.server-blade.owned .blade-lights span {
    background: var(--primary);
    box-shadow: 0 0 5px var(--primary);
}

/* Data Stream Particles */
.data-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    box-shadow: 0 0 10px white;
    border-radius: 50%;
    opacity: 0;
}

.p1 {
    bottom: 100px;
    left: 50%;
    animation: data-stream 2s infinite linear;
}

.p2 {
    bottom: 100px;
    left: 55%;
    animation: data-stream 2.5s infinite linear 0.5s;
}

.p3 {
    bottom: 100px;
    left: 45%;
    animation: data-stream 1.8s infinite linear 1s;
}

@keyframes blink-random {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

@keyframes blade-slide {

    0%,
    100% {
        transform: translateZ(30px) translateX(15px);
    }

    50% {
        transform: translateZ(30px) translateX(25px);
    }
}

@keyframes data-stream {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(-200px);
        opacity: 0;
    }
}

/* AI Server Visual Animation */
.ai-visual-container {
    position: relative;
    width: 450px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.neural-network {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.neural-node {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-glow);
    animation: node-pulse 3s infinite ease-in-out;
}

.node-1 {
    top: 20%;
    left: 30%;
    animation-delay: 0s;
}

.node-2 {
    top: 40%;
    left: 20%;
    animation-delay: 0.5s;
}

.node-3 {
    top: 70%;
    left: 35%;
    animation-delay: 1s;
}

.node-4 {
    top: 30%;
    right: 30%;
    animation-delay: 0.2s;
}

.node-5 {
    top: 60%;
    right: 25%;
    animation-delay: 0.8s;
}

.node-6 {
    top: 80%;
    right: 40%;
    animation-delay: 1.2s;
}

.neural-line {
    position: absolute;
    transform-origin: 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.4;
    animation: line-flow 4s infinite linear;
}

/* Brain Core */
.ai-brain-core {
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, rgba(20, 20, 25, 0.9) 70%);
    border: 1px solid rgba(236, 72, 153, 0.4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    box-shadow: 0 0 60px rgba(236, 72, 153, 0.3);
    animation: brain-pulse 4s infinite ease-in-out;
    position: relative;
}

.ai-brain-core i {
    font-size: 5rem;
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.6));
}

/* Floating Chips */
.ai-chip {
    position: absolute;
    background: rgba(30, 30, 35, 0.9);
    border: 1px solid rgba(168, 85, 247, 0.4);
    /* Purple border */
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 0.9rem;
    font-family: monospace;
    z-index: 15;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

.chip-gpu {
    top: 15%;
    right: 10%;
    animation: float-chip 6s infinite ease-in-out;
}

.chip-gpu i {
    color: #76ff03;
    /* Nvidia Greenish */
}

.chip-tf {
    bottom: 20%;
    left: 5%;
    animation: float-chip 7s infinite ease-in-out 1s;
}

.chip-tf i {
    color: #ff6f00;
    /* TF Orange */
}

.chip-ml {
    top: 25%;
    left: 5%;
    animation: float-chip 5s infinite ease-in-out 0.5s;
}

.chip-ml i {
    color: #2979ff;
}

@keyframes node-pulse {

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

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

@keyframes brain-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 60px rgba(236, 72, 153, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 90px rgba(236, 72, 153, 0.5);
    }
}

@keyframes float-chip {

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

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

/* AI Hero Theme Overrides */
.hero-section.ai-hero .hero-bg-glow {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, transparent 70%);
}

.hero-section.ai-hero .badge {
    border-color: rgba(168, 85, 247, 0.3);
}

.hero-section.ai-hero .gradient-text {
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-section.ai-hero .cta-btn {
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

.hero-section.ai-hero .cta-btn:hover {
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
}

/* Dark Themed Map Section */
.map-responsive {
    overflow: hidden;
    padding-bottom: 40%;
    position: relative;
    height: 0;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    background: var(--bg-card);
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: 0;
    /* Invert colors to create dark mode effect */
    filter: invert(90%) hue-rotate(180deg) contrast(0.9) saturate(0.85);
    mix-blend-mode: normal;
    transition: filter 0.3s ease;
}

.map-responsive:hover iframe {
    /* Slightly brighten on hover */
    filter: invert(90%) hue-rotate(180deg) contrast(1) saturate(1);
}

.map-overlay-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(15, 15, 18, 0.9);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    z-index: 2;
    max-width: 300px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.map-overlay-card h4 {
    color: var(--primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.map-overlay-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .map-responsive {
        padding-bottom: 75%;
    }

    .map-overlay-card {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 1rem;
        width: 100%;
        max-width: 100%;
    }
}

.review-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s;
}

.review-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.stars {
    color: #ffc107;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.review-text {
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    background: var(--gradient-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.partner-logo {
    opacity: 0.6;
    transition: all 0.3s;
    filter: grayscale(100%);
    font-size: 2.5rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.partner-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    color: var(--primary);
    transform: scale(1.05);
}

/* =========================================
   ENHANCED RESPONSIVE STYLES
   ========================================= */

/* Tablet & Smaller Desktop (max-width: 1024px) */
@media (max-width: 1024px) {
    .hero-section h1 {
        font-size: 3.5rem;
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .visual-col,
    .content-col {
        padding: 0;
    }
}

/* Tablet Portrait (max-width: 900px) - Refinements */
@media (max-width: 900px) {
    .split-section {
        flex-direction: column !important;
        gap: 3rem;
    }

    /* Ensure reversed sections stack correctly (visual first usually better, or content first?) 
       Current design often puts image on left. On mobile, usually image on top is standard, 
       or content on top. Let's stick to column (content -> visual or visual -> content).
       Default flex-direction: column puts first child on top.
       .split-section has .visual-col then .content-col.
       So Visual on Top.
    */

    .visual-col {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .content-col {
        width: 100%;
        text-align: center;
    }

    .content-col .icon-box {
        margin: 0 auto 1.5rem auto;
    }

    .feature-list li {
        justify-content: center;
    }

    /* Animation Containers fit width */
    .server-transfer-anim,
    .app-install-anim,
    .panel-interface-anim {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
    .hero-section {
        padding: 6rem 5% 3rem;
    }

    .hero-content h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .subtitle {
        font-size: 1rem;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
    }

    .cta-btn,
    .secondary-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .trust-indicators {
        flex-wrap: wrap;
        gap: 1rem;
        font-size: 0.85rem;
    }

    /* Section Headers */
    .section-header h2 {
        font-size: 2rem;
    }

    /* Visual Containers Scaling for Mobile */
    .shared-visual-container,
    .cloud-visual-container,
    .wp-visual-container,
    .magento-visual-container,
    .cpanel-visual-container {
        transform: scale(0.65);
        transform-origin: center;
        /* Negative margins to compensate for scale shrinking space */
        margin: -50px 0;
    }

    .server-transfer-anim {
        padding: 0 1rem;
        /* Reduce internal padding */
    }

    .server-icon i {
        font-size: 2rem !important;
    }

    .transfer-stream {
        left: 60px;
        right: 60px;
    }

    /* Footer */
    .footer-content {
        gap: 2rem;
    }

    .footer-col {
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .social-links {
        justify-content: center;
    }

    /* Services / Pricing Cards */
    .service-card {
        padding: 2rem 1.5rem;
    }

    .price-block .amount {
        font-size: 2rem;
    }

    /* Global Infra Map */
    .global-infra .features-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ */
    .faq-question h3 {
        font-size: 1rem;
    }
}

/* Small Mobile (max-width: 380px) */
@media (max-width: 380px) {
    .hero-content h1 {
        font-size: 2.2rem;
    }

    .shared-visual-container,
    .cloud-visual-container {
        transform: scale(0.55);
        margin: -80px 0;
    }

    .app-install-anim,
    .panel-interface-anim {
        transform: scale(0.85);
        transform-origin: center;
    }
}