:root {
            --glow-color: rgba(44, 195, 230, 0.25);
            --gradient-primary: linear-gradient(135deg, #6835D0, #2CC3E6);
        }

        body {
            background-color: #1B1B1B;
            color: #ECE7E5;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6, .font-heading {
            font-family: 'Outfit', sans-serif;
        }

        /* Typography */
        .text-gradient {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Components */
        .glass {
            background: rgba(36, 36, 36, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid #333333;
        }
        
        .glass-header {
            background: rgba(27, 27, 27, 0.8);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(51, 51, 51, 0.5);
        }

        .btn-gradient {
            background: var(--gradient-primary);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }
        
        .btn-gradient::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, #2CC3E6, #6835D0);
            z-index: -1;
            transition: opacity 0.3s ease;
            opacity: 0;
        }

        .btn-gradient:hover::before {
            opacity: 1;
        }

        .btn-gradient:hover {
            box-shadow: 0 0 20px var(--glow-color);
            transform: translateY(-2px);
        }

        .btn-outline {
            border: 1px solid #333333;
            background: transparent;
            transition: all 0.3s ease;
        }

        .btn-outline:hover {
            border-color: #2CC3E6;
            background: rgba(44, 195, 230, 0.05);
            box-shadow: 0 0 15px var(--glow-color) inset;
        }

        .card-hover {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid #333333;
            background: #242424;
        }

        .card-hover:hover {
            transform: translateY(-10px);
            border-color: #6835D0;
            box-shadow: 0 15px 35px rgba(104, 53, 208, 0.15);
        }

        /* Animations */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .stagger-1 { transition-delay: 100ms; }
        .stagger-2 { transition-delay: 200ms; }
        .stagger-3 { transition-delay: 300ms; }

        /* Multi-page behavior */
        .page-view {
            display: none;
            animation: fadeIn 0.5s ease-out forwards;
        }
        
        .page-view.active {
            display: block;
        }

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

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #1B1B1B;
        }
        ::-webkit-scrollbar-thumb {
            background: #333333;
            border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #6835D0;
        }

        /* Modal specific */
        .modal-open { overflow: hidden; }
        #portfolio-modal {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        #portfolio-modal.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        #portfolio-modal:not(.hidden) {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

/*=========================================
PREMIUM ANNOUNCEMENT BAR
=========================================*/

.announcement-bar{

    position:relative;

    width:100%;

    height:44px;

    background:#242424;

    border-top:1px solid rgba(255,255,255,.04);

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

    overflow:hidden;

    z-index:40;

}

.announcement-track{

    display:flex;

    width:max-content;

    height:100%;

    align-items:center;

    animation:announcement-scroll 32s linear infinite;

}

.announcement-track:hover{

    animation-play-state:paused;

}

.announcement-group{

    display:flex;

    align-items:center;

    white-space:nowrap;

}

.announcement-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 28px;

    color:#ECE7E5;

    font-size:14px;

    font-weight:500;

    letter-spacing:.3px;

}

.announcement-item i{

    width:16px;

    height:16px;

    color:#2CC3E6;

}

.announcement-divider{

    width:5px;

    height:5px;

    border-radius:50%;

    background:#6835D0;

    opacity:.6;

}

.live-dot{

    width:8px;

    height:8px;

    margin-right:8px;

    border-radius:50%;

    background:#2CC3E6;

    box-shadow:0 0 12px #2CC3E6;

    animation:livePulse 2s infinite;

}

.announcement-fade-left,
.announcement-fade-right{

    position:absolute;

    top:0;

    width:120px;

    height:100%;

    z-index:5;

    pointer-events:none;

}

.announcement-fade-left{

    left:0;

    background:linear-gradient(to right,#242424,transparent);

}

.announcement-fade-right{

    right:0;

    background:linear-gradient(to left,#242424,transparent);

}

@keyframes announcement-scroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes livePulse{

    0%,100%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.7);

        opacity:.45;

    }

}

@media(max-width:768px){

.announcement-bar{

height:40px;

}

.announcement-item{

padding:0 18px;

font-size:12px;

}

.announcement-fade-left,
.announcement-fade-right{

width:40px;

}

}

/* ===========================
      OFFER SECTION
=========================== */

.offer-container{

    position:relative;

    background:rgba(36,36,36,.65);

    border:1px solid #333;

    border-radius:32px;

    backdrop-filter:blur(14px);

    overflow:hidden;

    padding:70px;

}

.offer-container::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(44,195,230,.12),

    transparent 45%),

    radial-gradient(circle at bottom left,

    rgba(104,53,208,.15),

    transparent 50%);

}

.offer-content{

    position:relative;

    z-index:2;

}

.offer-ribbon{

    position:absolute;

    top:25px;

    right:-45px;

    transform:rotate(40deg);

    background:linear-gradient(135deg,#6835D0,#2CC3E6);

    color:#fff;

    padding:10px 60px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    z-index:5;

}

.offer-badge{

    display:inline-block;

    background:rgba(44,195,230,.1);

    color:#2CC3E6;

    padding:8px 18px;

    border-radius:30px;

    border:1px solid rgba(44,195,230,.3);

    margin-bottom:20px;

}

.offer-content h2{

    font-size:52px;

    line-height:1.2;

    margin-bottom:20px;

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

}

.offer-content h2 span{

    color:#2CC3E6;

}

.offer-content p{

    color:#B8B8B8;

    max-width:700px;

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}

.offer-features{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:35px;

}

.feature{

    padding:10px 18px;

    border-radius:50px;

    border:1px solid #333;

    background:#1f1f1f;

}

.countdown{

    display:none;

    gap:20px;

    margin-bottom:40px;

}

.time-box{

    width:95px;

    height:95px;

    border-radius:18px;

    background:#1f1f1f;

    border:1px solid #333;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.time-box span{

    font-size:34px;

    font-weight:700;

    color:#2CC3E6;

}

.time-box small{

    margin-top:5px;

    color:#999;

}

.offer-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.offer-container:hover{

    border-color:#2CC3E6;

    box-shadow:0 20px 60px rgba(44,195,230,.12);

}

@media(max-width:768px){

.offer-container{

padding:35px 25px;

}

.offer-content h2{

font-size:34px;

}

.countdown{

flex-wrap:wrap;

}

.offer-ribbon{

display:none;

}

}

        /* FAQ Accordion */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease;
            opacity: 0;
        }
        .faq-item.active .faq-answer {
            max-height: 500px;
            opacity: 1;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        .faq-item.active .faq-icon {
            transform: rotate(45deg);
            color: #2CC3E6;
        }

/* ===========================
   CONTACT FORM
=========================== */

.contact-form{
    width:100%;
}

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

.form-label{
    display:block;
    margin-bottom:8px;
    font-size:15px;
    font-weight:500;
    color:#ECE7E5;
}

.form-input{
    width:100%;
    padding:14px 18px;
    background:#242424;
    color:#ECE7E5;
    border:1px solid #333333;
    border-radius:14px;
    font-size:15px;
    font-family:'Inter',sans-serif;
    transition:.3s ease;
    outline:none;
    appearance:none;
}

.form-input::placeholder{
    color:#9CA3AF;
}

.form-input:hover{
    border-color:#6835D0;
}

.form-input:focus{
    border-color:#2CC3E6;
    box-shadow:0 0 0 4px rgba(44,195,230,.15);
}

textarea.form-input{
    resize:vertical;
    min-height:160px;
}

select.form-input{
    cursor:pointer;
}

.contact-form button{
    width:100%;
    margin-top:10px;
}

.contact-form{
    width:100%;
    display:block;
}

.contact-form form{
    width:100%;
}

.form-group{
    width:100%;
}

.form-input{
    width:100%;
    box-sizing:border-box;
}