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

.gpu-hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    background:#061320;

}

.gpu-hero-background{

    position:absolute;

    inset:0;

}

.gpu-gradient{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}

.gpu-gradient-1{

    width:500px;

    height:500px;

    background:#1a8cff;

    top:-150px;

    left:-100px;

    opacity:.20;

}

.gpu-gradient-2{

    width:600px;

    height:600px;

    background:#00d4ff;

    bottom:-250px;

    right:-150px;

    opacity:.15;

}

.gpu-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:60px 60px;

}

.gpu-hero .container{

    position:relative;

    z-index:2;

    /*display:grid;*/

    /*grid-template-columns:1.1fr 1fr;*/

    gap:4rem;

    align-items:center;

}

.gpu-hero-content h1{

    font-size:4rem;

    line-height:1.2;

    margin:1rem 0;

}

.gpu-hero-content h1 span{

    color:var(--primary);

}

.gpu-hero-content p{

    max-width:650px;

    font-size:1.2rem;

    color:#cbd8e6;

    line-height:2;

    margin-bottom:2rem;

}

.gpu-actions{

    display:flex;

    gap:1rem;

    margin-bottom:3rem;

}

.gpu-stats{

    display:flex;

    gap:3rem;

}

.gpu-stats div{

    display:flex;

    flex-direction:column;

}

.gpu-stats strong{

    font-size:2rem;

    color:white;

}

.gpu-stats span{

    color:#7fa6c4;

}

.gpu-hero-image{

    display:flex;

    justify-content:center;

}

.gpu-hero-image img{

    width:100%;

    max-width:650px;

    filter:

        drop-shadow(0 0 40px rgba(0,170,255,.35));

    animation:gpuFloat 6s ease-in-out infinite;

}

@keyframes gpuFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================================
   BILLING SWITCH
========================================================== */

.billing-section{

    padding:5rem 0 2rem;

}

.billing-switch{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:3rem;

}

.billing-btn{

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

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

    color:#d9e6f3;

    padding:1rem 2rem;

    border-radius:999px;

    cursor:pointer;

    transition:.3s;

    font-size:1rem;

    backdrop-filter:blur(10px);

}

.billing-btn:hover{

    border-color:var(--primary);

    color:white;

    transform:translateY(-2px);

}

.billing-btn.active{

    background:linear-gradient(
        135deg,
        var(--primary),
        #38bdf8
    );

    color:white;

    border-color:transparent;

    box-shadow:0 10px 25px rgba(56,189,248,.35);

}

/* ==========================================================
   GPU PRICING CARDS
========================================================== */

.gpu-pricing{

    padding:3rem 0 6rem;

}

.gpu-cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}

.gpu-plan{

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

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

    border-radius:24px;

    padding:2rem;

    backdrop-filter:blur(20px);

    transition:.35s;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    position:relative;

}

.saving{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(0,184,255,.18);

    border:1px solid rgba(0,184,255,.4);

    backdrop-filter:blur(10px);

    color:#7dd3fc;

    font-size:.78rem;

    font-weight:700;

    z-index:20;

}

.gpu-plan:hover{

    transform:

        translateY(-12px);

    border-color:#29c9ff;

    box-shadow:

        0 20px 60px rgba(0,0,0,.45),

        0 0 60px rgba(0,180,255,.18);

}

.gpu-plan::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:

        linear-gradient(

            130deg,

            transparent,

            rgba(0,180,255,.4),

            transparent

        );

    mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.gpu-plan:hover::before{

    opacity:1;

}

.gpu-plan.featured{

    border:2px solid var(--primary);

    transform:scale(1.03);

}

.gpu-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:1.5rem;

}

.gpu-chip{

    color:var(--primary);

    font-weight:700;

}

.plan-badge{

    background:var(--primary);

    color:#061320;

    padding:.4rem .8rem;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

}

.gpu-plan h3{

    color:#fff;

    font-size:1.6rem;

    margin-bottom:1rem;

}

.gpu-plan ul{

    list-style:none;

    padding:0;

    margin:0 0 2rem;

}

.gpu-plan li{

    margin-bottom:.8rem;

    color:#cdd7e4;

}

.price{

    margin-top:auto;

    text-align:center;

    padding:1.5rem 0;

}

.amount{

    display:block;

    font-size:2rem;

    font-weight:700;

    color:white;

}

.period{

    color:#8ea7be;

}

.gpu-plan .btn{

    width:100%;

}

@media (max-width:992px){

    .gpu-cards{

        grid-template-columns:1fr;

    }

    .gpu-plan.featured{

        transform:none;

    }

}

/*==================================================
GPU IMAGE
==================================================*/

.gpu-image{

    width:90px;

    display:block;

    margin:0 auto 25px;

    transition:.45s;

    filter:

        drop-shadow(0 0 30px rgba(0,180,255,.35));

}

.gpu-plan:hover .gpu-image{

    transform:

        translateY(-12px)

        scale(1.05)

        rotate(-2deg);

}

.gpu-glow{

    position:absolute;

    inset:auto;

    top:-70px;

    left:50%;

    width:220px;

    height:220px;

    transform:translateX(-50%);

    background:

        radial-gradient(

            rgba(0,180,255,.22),

            transparent 70%

        );

    pointer-events:none;

}

.gpu-specs{

    display:grid;

    gap:14px;

    margin:25px 0;

}

.gpu-specs div{

    display:flex;

    align-items:center;

    gap:0px;

    padding:0px;

}

.gpu-specs span{

    color:#d9e3ee;

}

.saving{

    width:max-content;

    margin:18px auto;

    padding:7px 16px;

    border-radius:50px;

    background:

        rgba(0,180,255,.12);

    color:#45d4ff;

    font-size:.85rem;

}

.price-box{

    padding:22px;

    border-radius:20px;

    margin:20px 0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.05),

            rgba(255,255,255,.02)

        );

}

/*==================================================
BENEFITS
==================================================*/

.benefits-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:60px;

}

.benefit-card{

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

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

    border-radius:22px;

    padding:40px;

    text-align:center;

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}

.benefit-icon{

    font-size:52px;

    margin-bottom:20px;

}

.infra-box{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-top:60px;

}

.infra-box>div{

padding:35px;

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

border-radius:20px;

text-align:center;

}

.faq-list{

max-width:900px;

margin:auto;

}

.faq-item{

margin-bottom:20px;

border-radius:16px;

overflow:hidden;

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

}

.faq-item button{

width:100%;

padding:22px;

background:none;

border:none;

color:white;

font-size:1.1rem;

cursor:pointer;

text-align:right;

}

.faq-item div{

display:none;

padding:0 22px 22px;

color:#c8d5e4;

}

.faq-item.active div{

display:block;

}

.enterprise{

padding:100px 0;

}

.enterprise-box{

text-align:center;

padding:80px;

border-radius:32px;

background:

linear-gradient(

135deg,

rgba(0,150,255,.20),

rgba(255,255,255,.04)

);

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

}

.enterprise-box h2{

font-size:3rem;

margin-bottom:25px;

}

.enterprise-box p{

max-width:700px;

margin:0 auto 40px;

color:#d5dfeb;

line-height:2;

}

.enterprise-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.gpu-plan.selected{

    border:2px solid var(--primary);

    box-shadow:
        0 0 35px rgba(0,180,255,.35);

    transform:translateY(-8px);

}

.faq-answer{

    display:none;

}

.faq-item.active .faq-answer{

    display:block;

}

.gpu-order{

    padding:120px 0;

}

.gpu-order-form{

    max-width:850px;

    margin:auto;

    background:rgba(20,28,42,.65);

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    padding:45px;

    position:relative;

}

.selected-plan{

    margin-bottom:45px;

    background:linear-gradient(135deg,#152238,#0d1727);

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

    border-radius:22px;

    padding:30px;

}

.selected-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}

.selected-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    color:white;

}

.selected-header h3{

    color:white;

    margin-bottom:4px;

}

.selected-header p{

    color:#90a6c5;

    font-size:.9rem;

}

.selected-main{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.selected-gpu span{

    display:block;

    color:#3b82f6;

    font-size:1.5rem;

    font-weight:700;

}

.selected-gpu strong{

    color:white;

    font-size:1rem;

}

.selected-price{

    text-align:left;

}

.selected-price span{

    display:block;

    color:#8ea8c7;

}

.selected-price strong{

    color:rgb(59, 130, 246);

    font-size:1.6rem;

}

.selected-specs{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

}

.selected-specs div{

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

    border-radius:14px;

    padding:16px;

    text-align:center;

    color:white;

}

.plan-summary{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.plan-summary div{

    padding:18px;

    border-radius:16px;

    background:#162233;

    text-align:center;

}

.plan-summary span{

    display:block;

    color:#8fa8c5;

    font-size:.85rem;

    margin-bottom:8px;

}

.plan-summary strong{

    font-size:1.15rem;

    color:white;

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group.full{

    grid-column:1/-1;

}

.form-group label{

    margin-bottom:10px;

    color:#c8d5e4;

}

.form-group textarea {

    resize:vertical;

    min-height:140px;

}

.char-counter{

    margin-top:8px;

    text-align:left;

    color:#7d8ca5;

    font-size:.82rem;

}

.form-group.error input,
.form-group.error textarea{

    border-color:#ef4444;

    box-shadow:0 0 0 3px rgba(239,68,68,.18);

}

.field-error{

    display:block;

    min-height:18px;

    margin-top:6px;

    font-size:.82rem;

    color:#ef4444;

    opacity:0;

    transition:.2s;

}

.form-group.error .field-error{

    opacity:1;

}

.form-group input,
.form-group textarea{

    background:#111827;

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

    border-radius:14px;

    padding:16px;

    color:white;

    font-size:1rem;

    transition:.3s;

}

.form-group input:focus,
.form-group textarea:focus{

    border-color:#3b82f6;

    outline:none;

    box-shadow:0 0 0 3px rgba(59,130,246,.2);

}

.submit-btn{

    margin-top:35px;

    width:100%;

}

/*=========================================================
  SWEET ALERT
=========================================================*/

.alpha-popup{

    border-radius:28px !important;

    background:rgba(16,22,40,.95) !important;

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

    backdrop-filter:blur(20px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.06);

    padding:2rem !important;

}

.alpha-title{

    font-size:2rem !important;

    font-weight:700;

    color:#fff !important;

}

.success-content{

    margin-top:1rem;

    text-align:center;

    color:#b8c4d9;

    line-height:2;

}

.success-plan{

    margin-top:2rem;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1rem;

}

.success-plan div{

    padding:1rem;

    border-radius:18px;

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

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

}

.success-plan span{

    display:block;

    color:#7f95b8;

    font-size:.85rem;

    margin-bottom:.4rem;

}

.success-plan strong{

    color:#fff;

    font-size:1rem;

}

.alpha-button{

    border-radius:14px !important;

    padding:.9rem 2.5rem !important;

    font-size:1rem !important;

    font-weight:600 !important;

}

/* Empty state */

.selected-plan.empty{

    opacity:.65;

    border:2px dashed rgba(255,255,255,.15);

}

.selected-plan.empty .selected-icon{

    background:#666;

}

.selected-plan.empty strong{

    color:#8c97a9;

}

.selected-plan.empty .selected-price strong{

    color:#8c97a9;

}

/*=========================================================
FORM HIGHLIGHT
=========================================================*/

.gpu-order{

    transition:all .5s ease;

}

.gpu-order.highlight{

    animation:highlightForm 1.4s ease;

}

@keyframes highlightForm{

    0%{

        box-shadow:0 0 0 rgba(46,124,246,0);

    }

    25%{

        box-shadow:
            0 0 70px rgba(46,124,246,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(46,124,246,0);

    }

}

/*=========================================================
SELECT CARD ANIMATION
=========================================================*/

.gpu-plan.selected{

    animation:selectedPulse .45s ease;

}

@keyframes selectedPulse{

    0%{

        transform:scale(.96);

    }

    60%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

/*=========================================================
SELECT CARD ANIMATION
=========================================================*/

.gpu-plan.selected{

    animation:selectedPulse .45s ease;

}

@keyframes selectedPulse{

    0%{

        transform:scale(.96);

    }

    60%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

.selected-icon{

    transition:all .35s ease;

}

.selected-plan:not(.empty) .selected-icon{

    background:#2E7CF6;

    color:#fff;

    transform:scale(1.15) rotate(360deg);

}

.selected-price strong{

    transition:opacity .25s ease;

}

.selected-price strong.updating{

    opacity:.2;

}

.submit-btn:disabled{

    opacity:.5;

    pointer-events:none;

    filter:grayscale(.3);

    transform:none !important;

    box-shadow:none !important;

}

.submit-btn:not(:disabled){

    opacity:1;
}

#customerFields{

    opacity:.45;

    transition:.3s;

}

#customerFields.enabled{

    opacity:1;

}

.form-lock{

    position:absolute;

    inset:0;

    background:rgba(8,12,24,.55);

    backdrop-filter:blur(3px);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:20;

    border-radius:24px;

    font-size:20px;

    font-weight:700;

}

.form-lock.hidden{

    display:none;

}

@media (max-width:768px){

    .benefits-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .infra-box{

        grid-template-columns:repeat(2,1fr);

        gap:1rem;

    }

}

/* =========================================================
   GPU ORDER - MOBILE
========================================================= */

@media (max-width:768px){

    .gpu-order-form{

        padding:22px;

        border-radius:20px;

    }

    .selected-main{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .selected-price{

        width:100%;

        text-align:right;

    }

    .selected-specs{

        grid-template-columns:1fr;

        gap:12px;

    }

    .form-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .form-group.full{

        grid-column:auto;

    }

    .form-group input,
    .form-group textarea{

        width:100%;

        min-width:0;

        box-sizing:border-box;

    }

}