:root {
    --bg-color: #0a0a12;
    --text-color: #e0e0e0;
    --primary-color: #00f3ff;
    /* Cyan */
    --secondary-color: #bc13fe;
    /* Purple */
    --accent-color: #f0932b;
    /* Gold/Orange */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

body {
    margin: 0;
    font-family: 'Outfit', 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color), inset 0 0 10px var(--primary-color);
}

.btn-primary:hover {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 0 20px var(--primary-color), inset 0 0 20px var(--primary-color);
}

.btn-secondary {
    background: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    box-shadow: 0 0 10px var(--secondary-color), inset 0 0 10px var(--secondary-color);
}

.btn-secondary:hover {
    background: var(--secondary-color);
    color: #fff;
    box-shadow: 0 0 20px var(--secondary-color), inset 0 0 20px var(--secondary-color);
}

.visual-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
    position: relative;
}

.visual-controls {
    display: flex;
    gap: 8px;
}

.visual-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.visual-title .logo-symbol.small {
    font-size: 1.4rem;
    text-shadow: none;
    line-height: 0;
    transform: translateY(-1px);
}

.visual-title .logo-text.small strong,
.visual-title .logo-text.small span {
    font-size: 1rem;
}

.visual-text-suffix {
    opacity: 0.7;
    margin-left: 2px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.3;
}

/* Header */
header {
    padding: 20px 0;
    background: rgba(10, 10, 18, 0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

@media (min-width: 769px) {
    header .container {
        justify-content: center;
    }

    header .logo {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .header-actions {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .nav-link {
        font-weight: 500;
    }

    .header-actions .btn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 18, 0.95);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid var(--glass-border);
    }

    nav.active {
        display: flex;
    }

    nav ul {
        flex-direction: column;
        gap: 20px;
    }

    .header-actions {
        display: none;
    }
}

.logo {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.logo-symbol {
    font-size: 2.5rem;
    color: var(--primary-color);
    line-height: 0;
    font-weight: 300;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    display: inline-block;
    transform: translateY(-2px);
}

.logo-text {
    line-height: 1;
    color: #fff;
}

.logo-text strong {
    font-weight: 700;
}

.logo-text span {
    font-weight: 100;
    opacity: 1;
    letter-spacing: 1px;
    color: #fff;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.logo-text strong {
    font-weight: 700;
}

.logo-text span {
    font-weight: 100;
    opacity: 1;
    letter-spacing: 1px;
    color: #fff;
}

nav a {
    font-weight: 500;
    position: relative;
}

nav a:hover,
nav a.active {
    text-shadow: 0 0 5px var(--primary-color);
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.menu-toggle div {
    width: 25px;
    height: 3px;
    background-color: #fff;
    transition: 0.3s;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
        z-index: 1002;
    }

    /* Mobile wrapper for nav and actions */
    header .container {
        justify-content: space-between;
    }

    /* We need a wrapper to toggle both nav and actions */
    /* Since we split them, we might need JS update, but let's try to style them 
       so they appear when active class is toggled on a common parent or handle via adjacent sibling.
       Actually, the simplest way without changing JS is to make sure 'nav' contains everything on mobile,
       OR change JS to toggle a class on the BODY or HEADER.
       
       Let's stick to the current JS: toggleMenu() toggles class 'active' on 'nav'.
       But we moved actions OUT of nav. 
       
       Quick fix: On mobile, move actions BACK into nav visually or just put them in the HTML inside nav for mobile?
       No, duplication is bad.
       
       Let's just update the JS to toggle class on the HEADER or a generic wrapper, 
       then we can show/hide both NAV and ACTIONS.
       
       Or, update CSS to show .header-actions when nav.active is present?
       They are siblings.
       
       Let's update JS in footer/script tag in a moment. For now, let's style them assuming a parent class.
    */

    header.mobile-active nav,
    header.mobile-active .header-actions {
        display: flex;
    }

    nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 18, 0.95);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        padding: 20px 0 10px;
        border-bottom: 1px solid var(--glass-border);
        order: 3;
    }

    .header-actions {
        display: none;
        position: absolute;
        top: calc(100% + 200px);
        /* rough estimate, or just put it inside the nav flow */
        /* Better: Make nav and actions part of a single mobile container. 
           But I separated them for desktop. 
           
           Let's change strategy: Keep them separated.
           On Mobile:
           nav is absolute.
           header actions should be appended to nav?
           
           Let's use a simpler approach:
           Force them to display block when active.
        */
        width: 100%;
        left: 0;
        background: rgba(10, 10, 18, 0.95);
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--glass-border);
        top: auto;
        /* Position relative to nav? */
    }
}

/* Slider */
/* Slider */
.slider-container {
    position: relative;
    height: 90vh;
    /* Taller hero */
    overflow: hidden;
    background: #000;
    perspective: 1000px;
}

/* Background Animation */
.slider-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(188, 19, 254, 0.1) 0%, transparent 50%),
        radial-gradient(circle, rgba(0, 243, 255, 0.1) 0%, transparent 50%);
    background-size: 50% 50%, 60% 60%;
    background-position: 0 0, 100% 100%;
    animation: bgMove 20s linear infinite;
    z-index: 1;
}

@keyframes bgMove {
    0% {
        transform: rotate(0deg);
    }

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

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transform: scale(1.1);
    transition: opacity 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

/* Matrix Canvas */
#matrix-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.3;
    /* Adjusted opacity so text is readable */
}

.slide::before {
    /* Removing the old background */
    display: none;
}

@keyframes zoomEffect {
    0% {
        transform: scale(1);
    }

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

.slide-content {
    text-align: center;
    max-width: 800px;
    padding: 20px;
    position: relative;
}

.slide-icon-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
    animation: floatIcon 4s ease-in-out infinite;
}

.slide-svg {
    width: 50px;
    height: 50px;
    stroke: var(--primary-color);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 5px var(--primary-color));
}

@keyframes floatIcon {

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

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

.slide h1 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.3s;
}

.slide.active h1 {
    opacity: 1;
    transform: translateY(0);
}

.slide h1 span {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
}

.slide h1 span::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    background: var(--primary-color);
    bottom: 5px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
    filter: blur(5px);
}

.slide p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.5s;
}

.slide.active p {
    opacity: 1;
    transform: translateY(0);
}

.slide .btn {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.7s;
}

.slide.active .btn {
    opacity: 1;
    transform: translateY(0);
}

.slide.active .slide-content .btn {
    animation: fadeInUp 0.8s ease 0.9s forwards;
}

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

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

/* Navigation */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 30;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    opacity: 0;
    /* Hidden by default */
}

/* Show buttons on hover */
.slider-container:hover .slider-btn {
    opacity: 1;
}

.slider-btn:hover {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 0 30px var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 40px;
}

.next-btn {
    right: 40px;
}

.slider-dots {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 30;
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dot {
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color);
    transform: scale(1.4);
}

/* Features */
.features {
    padding: 80px 0;
}

/* Features Section */
.features {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.features-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
}

.features-text {
    flex: 1;
    min-width: 300px;
}

.features h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    background: linear-gradient(to right, #fff, var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 30px;
    border-radius: 20px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: 0.4s;
    pointer-events: none;
    /* Fix: Allow clicks to pass through overlay */
    z-index: 1;
    /* Keep visual on top but non-interactive */
}

/* Ensure content inside card is clickable and above potential overlays */
.card>* {
    position: relative;
    z-index: 2;
}

.card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 30px rgba(0, 243, 255, 0.15);
}

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

.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(0, 243, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--primary-color);
    transition: 0.4s;
}

.card:hover .icon-box {
    background: var(--primary-color);
    color: #000;
    transform: rotateY(360deg);
}

.card h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Features Visual (Thumbnail) */
.features-visual {
    flex: 1;
    min-width: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.visual-card {
    width: 100%;
    max-width: 500px;
    background: rgba(15, 15, 25, 0.9);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    transform: rotateY(-10deg) rotateX(5deg);
    transition: 0.5s;
    animation: float 6s ease-in-out infinite;
}

.features-visual:hover .visual-card {
    transform: rotateY(0) rotateX(0);
}

/* Scroll Animation Classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.visual-header {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.red {
    background: #ff5f56;
}

.dot.yellow {
    background: #ffbd2e;
}

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

.visual-content {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    height: 200px;
}

.chart-area {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex: 1;
    height: 100%;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.bar {
    width: 30px;
    background: var(--primary-color);
    border-radius: 5px 5px 0 0;
    opacity: 0.8;
    animation: barGrow 3s infinite alternate;
}

.bar-1 {
    height: 40%;
    animation-delay: 0s;
}

.bar-2 {
    height: 80%;
    animation-delay: 0.2s;
    background: var(--secondary-color);
}

.bar-3 {
    height: 60%;
    animation-delay: 0.4s;
    background: var(--accent-color);
}

@keyframes barGrow {
    0% {
        transform: scaleY(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scaleY(1.1);
        opacity: 1;
    }
}

.info-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.line {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.line.lg {
    width: 100%;
}

.line.md {
    width: 70%;
}

.line.sm {
    width: 40%;
}

.floating-badge {
    position: absolute;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    animation: floatBadge 5s infinite ease-in-out;
}

.badge-1 {
    top: -20px;
    right: -20px;
    background: rgba(0, 243, 255, 0.2);
    border-color: var(--primary-color);
    animation-delay: 0s;
}

.badge-2 {
    bottom: -20px;
    left: -20px;
    background: rgba(188, 19, 254, 0.2);
    border-color: var(--secondary-color);
    animation-delay: 2.5s;
}

@keyframes float {

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

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

@keyframes floatBadge {

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

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

@media (max-width: 991px) {
    .features-wrapper {
        flex-direction: column;
    }

    .visual-card {
        transform: none !important;
        animation: none;
    }
}

/* Forms */
.auth-container {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 40px;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.auth-box h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary-color);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: #fff;
    box-sizing: border-box;
    /* Fix padding issue */
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}


/* Steps Section */
.steps-section {
    padding: 100px 0;
    position: relative;
    background: radial-gradient(circle at center, rgba(188, 19, 254, 0.05), transparent 70%);
}

.steps-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    position: relative;
    flex-wrap: wrap;
    gap: 30px;
}

.step-card {
    flex: 1;
    min-width: 280px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    transition: 0.4s;
    position: relative;
    z-index: 2;
}

.step-card:hover {
    transform: translateY(-10px);
    border-color: var(--secondary-color);
    box-shadow: 0 10px 40px rgba(188, 19, 254, 0.15);
}

.step-header {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
}

.step-number {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: #000;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 0 15px var(--primary-color);
    z-index: 2;
}

.step-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid var(--glass-border);
    font-size: 2rem;
}

.step-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--secondary-color);
    transition: 0.4s;
}

.step-card:hover .step-icon svg {
    transform: scale(1.2) rotate(10deg);
    stroke: var(--primary-color);
}

.step-card h3 {
    margin-bottom: 15px;
    color: #fff;
    font-size: 1.4rem;
}

.step-card p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.step-arrow {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
    animation: slideRight 1.5s infinite ease-in-out;
}

@keyframes slideRight {

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

    50% {
        transform: translateX(10px);
        opacity: 0.6;
    }
}

@media (max-width: 900px) {
    .steps-wrapper {
        flex-direction: column;
    }

    .step-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
        animation: slideDown 1.5s infinite ease-in-out;
    }

    @keyframes slideDown {

        0%,
        100% {
            transform: rotate(90deg) translateX(0);
        }

        50% {
            transform: rotate(90deg) translateX(10px);
        }
    }
}

/* Why Alfa Section */
.why-alfa-section {
    padding: 80px 0;
    position: relative;
    background: linear-gradient(180deg, transparent, rgba(0, 243, 255, 0.02), transparent);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #fff;
}

.neon-text {
    color: var(--primary-color);
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Testimonials Section */
.testimonials-section {
    padding: 80px 0 120px;
    position: relative;
    background: linear-gradient(0deg, transparent, rgba(188, 19, 254, 0.02), transparent);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 30px;
    border-radius: 20px;
    position: relative;
    transition: 0.3s;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 243, 255, 0.1);
}

.quote-icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    opacity: 0.5;
}

.testimonial-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    font-style: italic;
    min-height: 80px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.author-info h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
}

.author-info span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* CTA Section */
.cta-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    margin-top: 50px;
    text-align: center;
}

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

.cta-title {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #fff;
}

.cta-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.cta-btn,
.cta-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 60px;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 60px;
    gap: 10px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    text-decoration: none;
    line-height: normal;
    /* Fix any line-height interference */
}

/* Specific overrides if needed, but keeping layout distinct from coloring */
.cta-btn {
    /* Primary button specific styles if any extra needed beyond generic btn classes */
}

.cta-btn-outline {
    /* Secondary/Outline specific if needed */
}

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

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

.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.glow-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: pulseGlow 5s infinite alternate;
}

.circle-1 {
    width: 300px;
    height: 300px;
    background: var(--primary-color);
    top: -50px;
    left: 20%;
}

.circle-2 {
    width: 400px;
    height: 400px;
    background: var(--secondary-color);
    bottom: -100px;
    right: 20%;
    animation-delay: 2s;
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }

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

@media (max-width: 768px) {
    .cta-title {
        font-size: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
    }
}

/* Footer */
footer {
    padding: 80px 0 30px;
    background: rgba(0, 0, 0, 0.8);
    border-top: 1px solid var(--glass-border);
    margin-top: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, auto);
        /* Use auto to fit content instead of 1fr stretching */
        gap: 160px;
        /* Increased gap as requested */
        justify-content: center;
        /* Center the whole grid */
        padding-left: 0;
        /* Removed fixed left padding to rely on centering */
    }
}

.footer-col h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.footer-col h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.2rem;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: var(--primary-color);
}

.footer-col .logo {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
}

.footer-col .logo-symbol {
    font-size: 2.2rem;
}

.footer-col p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: rgba(255, 255, 255, 0.7);
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-col ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    transition: 0.3s;
    border: 1px solid var(--glass-border);
}

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

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