*{box-sizing:border-box;
}
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #020617;
    color: #ffffff;
    scroll-behavior: smooth;
}
input::placeholder{color:#fff !important;}
/* Navigation */
.navbar {
    background: rgba(2, 6, 23, 0.9) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.navbar-brand img{    width: 170px;    border-radius: 11px;}
/* Buttons */
.btn-primary-custom {
    background: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
    border: none;
    color: #ffffff !important;
    font-weight: 700;
    padding: 10px 25px;
    border-radius: 50px;
    transition: 0.3s;
}

.btn-primary-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(34, 211, 238, 0.3);
    color: #ffffff !important;
}

/* Glassmorphism Cards */
.glass-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    padding: 40px;
    backdrop-filter: blur(15px);
}
.glass-card p{color:#ccc;}
/* Text & Utility */
.text-gradient {
    background: linear-gradient(to right, #22d3ee, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
textarea {
    background-color: #0d0d0d; /* Dark background */
    border: 1px solid #333333;
    
    /* FIX: Force text to be pure white */
    color: #ffffff !important; 
    
    /* FIX: Make the blinking cursor white/gold so you can see where you type */
    caret-color: #ffffff; 
    
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't break width */
    outline: none;
    transition: 0.3s;
}

/* Maintain your white focus style */
textarea:focus {
    border-color: #ffffff;
    background-color: #151515;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    color: #ffffff; /* Ensures text stays white on focus */
}

/* Optional: Make sure the placeholder isn't too dark to read */
textarea::placeholder {
    color: #888888;
}

/* Realistic Scratch Styles */
#scratch-container {
    position: relative;
    width: 300px;
    height: 160px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.2);
}

#scratch-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: crosshair;
    touch-action: none;
}

.reward-underlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border: 2px solid #334155;
    border-radius: 16px;
}
.form-control{color:#fff;}
/* Form Controls - Fixed Color Issues */
.form-control-custom {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important; /* Forces text color to white */
    padding: 15px;
    border-radius: 12px;
    outline: none;
}

/* Ensures placeholder is visible but distinct */
.form-control-custom::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Fixed focus state to ensure text remains white */
.form-control-custom:focus {
    background-color: #0f172a !important;
    border-color: #22d3ee !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.1);
}



/* Custom Typography for the Hero */
.prooin-hero-title {
    font-size: 3.2rem;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

/* Your exact gradient colors applied to the specific span */
.text-prooin-gradient {
    background: linear-gradient(90deg, #1db3eb, #f89a1c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Glassmorphism accent for the text blocks */
.prooin-description-wrapper {
    padding-left: 20px;
    border-left: 3px solid rgba(29, 179, 235, 0.3);
    background: linear-gradient(90deg, rgba(29, 179, 235, 0.03), transparent);
    transition: 0.3s ease;
}

.prooin-description-wrapper:hover {
    border-left-color: #f89a1c;
    background: linear-gradient(90deg, rgba(248, 154, 28, 0.05), transparent);
}

.cust-v3-description {
    color: #cbd5e1 !important;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Badge Styling */
.cust-v3-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(29, 179, 235, 0.1);
    border: 1px solid rgba(29, 179, 235, 0.2);
    color: #1db3eb;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .prooin-main-text{font-size:17px;}
    .prooin-hero-title {        font-size: 33px;
        line-height: 1.3; }
}


.accordion-body{font-size:20px;color:#ccc !important;font-weight:500;}
/* Accordion Specific Styling */
.accordion-button::after {
    filter: invert(1); /* Makes the arrow icon white */
}
/*  Auth Namespace: auth-v2- */
.auth-v2-body-wrapper {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #020617;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}

.auth-v2-login-container {
    width: 100%;
    max-width: 1100px;
    min-height: 600px;
    display: flex;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    margin: 20px;
}

/* Layout Sides */
.auth-v2-form-side {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-v2-visual-side {
    flex: 1.2;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.auth-v2-visual-circle {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
}

/* Brand & Typography */
.auth-v2-logo-text {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 40px;
}
.auth-v2-logo-text img{width:150px;}
.auth-v2-label {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

/* Form Inputs */
.auth-v2-input {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    border-radius: 12px;
    padding: 14px 18px;
    transition: 0.3s;
    width: 100%;
}

.auth-v2-input:focus {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.1);
    outline: none;
}

/* Action Buttons */
.auth-v2-btn-main {
    background: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
    border: none;
    color: #ffffff !important;
    font-weight: 700;
    padding: 14px;
    border-radius: 12px;
    margin-top: 20px;
    transition: 0.3s;
    width: 100%;
}

.auth-v2-btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(34, 211, 238, 0.3);
}

.auth-v2-social-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
    text-decoration: none;
    font-size: 14px;
}

.auth-v2-social-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Glass Feature Card */
.auth-v2-glass-feature {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    padding: 20px;
    margin-top: 40px;
    text-align: left;
}

/* Responsive */
@media (max-width: 992px) {
    .qr-bg-blob{width:100% !important;}
    .qr-scratch-box{width:100% !important;}
    .auth-v2-visual-side {
        display: none;
    }
    .auth-v2-form-side {
        padding: 40px 30px;
    }
    .auth-v2-login-container {
        min-height: auto;
    }
}
/* --- QR-OFFER MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    /* Prevent horizontal overflow from background blobs */
    .qr-main-wrapper {
        padding: 10px;
        overflow: hidden;
    }

    /* Scale the blobs down so they don't overpower the screen */
    .qr-bg-blob {
        width: 200px;
        height: 200px;
        filter: blur(40px);
    }

    /* Adjust the card container padding */
    .qr-card-container {
        padding: 20px 15px;
    }

    /* Ensure the scratch box and canvas fit mobile widths */
    .qr-scratch-box {
        width: 100%;
        max-width: 300px;
        height: 180px; /* Slightly shorter for mobile aspect ratio */
        margin: 20px auto;
    }

    #qrCanvas {
        width: 100% !important;
        height: auto !important;
        touch-action: none; /* Crucial for mobile scratching */
    }

    /* Adjust typography for smaller screens */
    .qr-title {
        font-size: 1.25rem;
    }

    .qr-subtitle {
        font-size: 0.8rem;
        padding: 0 10px;
    }

    /* Modal responsiveness */
    .qr-modal-content {
        width: 90%;
        padding: 25px 20px;
        margin: 0 15px;
    }

    /* Adjust Progress Bar Dots */
    .qr-progress-bar {
        gap: 8px;
    }

    .qr-dot {
        width: 25px;
        height: 25px;
        font-size: 10px;
    }

    /* Ensure instruction label doesn't wrap awkwardly */
    .qr-status-label {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Fix Reward Text Size */
    .qr-reward-gradient {
        font-size: 1.5rem;
    }
}

/* Specific fix for very small devices (under 360px) */
@media (max-width: 360px) {
    .qr-scratch-box {
        max-width: 260px;
    }
    
    .qr-title {
        font-size: 1.1rem;
    }
}
/*  Namespace: reg-v2- */
.reg-v2-wrapper {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #020617;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 15px;
    position: relative;
    overflow-x: hidden;
}

/* Animated Background Glows */
.reg-v2-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}

.reg-v2-container {
    width: 100%;
    max-width: 850px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    backdrop-filter: blur(25px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.reg-v2-header {
    padding: 50px 60px 20px;
    text-align: center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
}

.reg-v2-body {
    padding: 20px 60px 50px;
}

.reg-v2-tag {
    font-size: 11px;
    font-weight: 800;
    color: #22d3ee;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reg-v2-tag::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(to right, rgba(34, 211, 238, 0.3), transparent);
}

.reg-v2-label {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 8px;
    display: block;
}

.reg-v2-input {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid #334155 !important;
    /* Force text color to white */
    color: #ffffff !important; 
    border-radius: 14px;
    padding: 12px 18px;
    transition: all 0.3s ease;
    outline: none; /* Remove default browser outline */
}

/* FIX: Ensure text remains white even when browser autofills (common issue) */
.reg-v2-input:-webkit-autofill,
.reg-v2-input:-webkit-autofill:hover, 
.reg-v2-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important; /* Matches your background */
    transition: background-color 5000s ease-in-out 0s;
}

.reg-v2-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C2.185 5.355 2.408 4.875 2.812 4.875h9.576c.404 0 .627.48.361.783L8.005 11.14a.5.5 0 0 1-.758 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
cursor: pointer;
}

.reg-v2-select option {
background: #0f172a;
color: #ffffff;
}

/* Placeholder color */
.reg-v2-input::placeholder {
color: rgba(255, 255, 255, 0.3);
font-size: 13px;
}

.reg-v2-input:focus {
    color: #ffffff !important;
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15);
    transform: translateY(-1px);
}

/* Custom Upload Card */
.reg-v2-upload-area {
    border: 2px dashed rgba(51, 65, 85, 0.5);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.02);
    color: #ffffff; /* Ensure any text inside upload area is white */
}

.reg-v2-upload-area:hover {
    border-color: #22d3ee;
    background: rgba(34, 211, 238, 0.05);
    transform: scale(1.01);
}

.reg-v2-btn {
    background: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
    border: none;
    color: #ffffff !important;
    font-weight: 700;
    padding: 16px;
    border-radius: 14px;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
    margin-top: 10px;
    box-shadow: 0 10px 20px -5px rgba(34, 211, 238, 0.4);
}

.reg-v2-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(34, 211, 238, 0.5);
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .reg-v2-header { padding: 40px 25px 15px; }
    .reg-v2-body { padding: 15px 25px 40px; }
    .reg-v2-container { border-radius: 24px; }
    .reg-v2-glow { width: 250px; height: 250px; }
}


/* --- PROOIN BASE THEME --- */
.text-prooin-gradient {
    background: linear-gradient(90deg, #22d3ee, #f89a1c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- INPUT & TEXT FIXES --- */
.auth-v2-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.reg-v2-input {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important; /* CRITICAL: Fixed white text */
    border-radius: 14px;
    padding: 12px 18px;
    transition: all 0.3s ease;
    outline: none;
}

.reg-v2-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.reg-v2-input:focus {
    color: #ffffff !important;
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15);
}

/* Fix for browser autofill turning text black */
.reg-v2-input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important;
}

/* --- DROPDOWN & ICON STYLES --- */
.icon-sq {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}
.icon-sq.cyan { background: rgba(34, 211, 238, 0.1); color: #22d3ee; }
.icon-sq.orange { background: rgba(248, 154, 28, 0.1); color: #f89a1c; }

.dropdown-item { transition: 0.2s; }
.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateX(5px);
}

/* --- ANIMATIONS --- */
@keyframes prooinFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}





.pn-validity-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(220, 38, 38, 0.15); /* Subtle Red Translucency */
    border: 1px solid rgba(239, 68, 68, 0.4);
    padding: 4px 12px;
    border-radius: 4px;
    margin-top: 15px;
    backdrop-filter: blur(4px);
}

.pn-status-dot {
    width: 6px;
    height: 6px;
    background-color: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 8px #ef4444;
    animation: pn-pulse 2s infinite;
}

.pn-validity-text {
    margin: 0;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

.pn-highlight {
    color: #ef4444;
    text-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
}

@keyframes pn-pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}




/* --- MODAL WRAPPER & OVERLAY --- */
.prooin-demo-modal .modal-content {
    background: #0a0f1d !important; /* Deep dark for contrast */
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 24px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(34, 211, 238, 0.1);
    animation: prooinFadeUp 0.5s ease-out;
}

.prooin-demo-modal .modal-backdrop {
    background-color: #000 !important;
    opacity: 0.85 !important;
}

/* --- INPUTS & SELECTS --- */
.prooin-demo-input {
    background: rgba(15, 23, 42, 1) !important;
    border: 1.5px solid #334155 !important;
    color: #ffffff !important;
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.prooin-demo-input:focus {
    border-color: #22d3ee !important;
    background: #0f172a !important;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
    outline: none;
}

/* Placeholder Visibility Fix */
.prooin-demo-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1;
}

/* Autofill Fix */
.prooin-demo-input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #0a0f1d inset !important;
}

/* --- LABELS & BUTTONS --- */
.prooin-demo-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #22d3ee;
    margin-bottom: 8px;
    display: block;
}

.prooin-demo-btn {
    background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
    border: none;
    color: #ffffff;
    font-weight: 700;
    padding: 18px;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(34, 211, 238, 0.2);
    transition: 0.3s;
}

.prooin-demo-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(34, 211, 238, 0.4);
    color: white;
}

/* --- UPLOAD AREA --- */
.prooin-demo-upload {
    border: 2px dashed rgba(34, 211, 238, 0.3);
    background: rgba(34, 211, 238, 0.05);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}

.prooin-demo-upload:hover {
    border-color: #22d3ee;
    background: rgba(34, 211, 238, 0.1);
}
.fa-play-circle{color:#000 !important;}
/* --- CUSTOM SCROLLBAR FOR MODAL --- */
.prooin-demo-modal .modal-body::-webkit-scrollbar { width: 5px; }
.prooin-demo-modal .modal-body::-webkit-scrollbar-track { background: transparent; }
.prooin-demo-modal .modal-body::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

.text-prooin-gradient {
    background: linear-gradient(90deg, #22d3ee, #f89a1c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cust-v3-main-card {
width: 100%;
max-width: 500px;
background: #0f172a;
min-height: 100vh;
display: flex;
flex-direction: column;
box-shadow: 0 0 80px rgba(0,0,0,0.8);
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
}

/* 1. Seller / Shop Name Section */
.cust-v3-header {
padding: 24px;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(15px);
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cust-v3-shop-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #22d3ee, #6366f1);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 16px rgba(34, 211, 238, 0.2);
}

.cust-v3-shop-name {
font-weight: 800;
font-size: 18px;
margin: 0;
letter-spacing: -0.5px;
}

/* 2. Offer Banner Section */
.cust-v3-hero {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}

.cust-v3-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
}

.cust-v3-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 30%, #0f172a 100%);
}

.cust-v3-badge {
position: absolute;
top: 20px;
right: 20px;
background: rgba(2, 6, 23, 0.8);
border: 1px solid #22d3ee;
color: #22d3ee;
padding: 6px 14px;
border-radius: 50px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}

/* 3. Campaign & Details */
.cust-v3-body-content {
padding: 0 28px 40px;
margin-top: -40px;
position: relative;
z-index: 5;
}

.cust-v3-campaign-title {
font-size: 34px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 15px;
background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.cust-v3-description {
color: #94a3b8;
font-size: 16px;
line-height: 1.6;
margin-bottom: 35px;
}

/* 4. Action Button (Claim/Spin/Scratch) */
.cust-v3-action-btn {
background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
border: none;
color: #000000 !important;
width: 100%;
padding: 22px;
border-radius: 20px;
font-weight: 800;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 15px 30px rgba(217, 119, 6, 0.4);
margin-bottom: 30px;
}

.cust-v3-action-btn:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(217, 119, 6, 0.5);
}

/* 5. Validity Box */
.cust-v3-meta-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
}

.cust-v3-meta-icon {
width: 44px;
height: 44px;
background: rgba(34, 211, 238, 0.1);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #22d3ee;
}

/* 6. Terms & Conditions Section */
.cust-v3-terms-section {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 25px;
}

.cust-v3-terms-header {
color: #64748b;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
cursor: pointer;
}

.cust-v3-terms-body {
font-size: 13px;
color: #475569;
margin-top: 15px;
display: none; /* Controlled by JS */
line-height: 1.7;
}

.cust-v3-footer {
margin-top: auto;
padding: 40px 20px;
text-align: center;
opacity: 0.5;
}


.resultpage {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0f9ff !important; 
background-image: 
    linear-gradient(135deg, #e0f2fe 0%, #ccfbf1 100%) !important;
color: #0f172a ;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

.aqua-win-container {
width: 100%;
max-width: 500px;
margin: 20px auto; /* Centered */
min-height: 90vh;
display: flex;
flex-direction: column;
position: relative;
padding: 50px 25px 30px;
text-align: center;

/* Glassmorphism Effect */
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

/* Rounded & Cyber Borders */
border-radius: 40px;
border: 1px solid rgba(255, 255, 255, 0.6);

/* Multi-layered Futuristic Shadow */
box-shadow: 
0 4px 6px -1px rgba(0, 0, 0, 0.05),
0 20px 40px -10px rgba(15, 23, 42, 0.12),
0 0 0 1px rgba(34, 211, 238, 0.1); /* Subtle Cyan rim glow */

/* Smooth Entrance Animation */
animation: containerFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}

/* Optional: Adding a subtle animated gradient line at the top */
.aqua-win-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #22d3ee, #0ea5e9, #22d3ee);
background-size: 200% auto;
animation: shine 3s linear infinite;
}

@keyframes containerFadeUp {
from { opacity: 0; transform: translateY(30px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shine {
to { background-position: 200% center; }
}

/* Icon Animation */
.aqua-win-icon-box {
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, #22d3ee, #0ea5e9);
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.3);
    transform: rotate(-5deg);
    color: #fff;
}

/* Congratulations Message */
.aqua-win-badge {
    font-size: 12px;
    font-weight: 800;
    color: #0d9488;
    background: #ccfbf1;
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.aqua-win-title {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 35px;
    color: #0f172a;
}

/* 2. Won Offer Details (Aqua Gradient Card) */
.aqua-win-reward-card {
    background: linear-gradient(135deg, #0ea5e9 0%, #2dd4bf 100%);
    border-radius: 30px;
    padding: 40px 20px;
    margin-bottom: 35px;
    color: #ffffff;
    position: relative;
    box-shadow: 0 20px 40px rgba(13, 148, 136, 0.2);
}

.aqua-win-offer-value {
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.aqua-win-offer-desc {
    font-size: 18px;
    font-weight: 600;
    opacity: 0.95;
}

/* 3. Code Section */
.aqua-win-code-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 12px;
}

.aqua-win-coupon {
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    padding: 20px;
    border-radius: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 5px;
    margin-bottom: 35px;
}

/* Action Button */
.aqua-win-btn-primary {
    background: #0f172a;
    color: #ffffff;
    border: none;
    width: 100%;
    padding: 22px;
    border-radius: 22px;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: 0.3s;
    margin-bottom: 25px;
}

.aqua-win-btn-primary:active {
    transform: scale(0.96);
}

/* MODAL POPUP DESIGN */
.aqua-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    display: none; /* Controlled by JS */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.aqua-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 350px;
    border-radius: 30px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: aqua-modal-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes aqua-modal-pop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.aqua-modal-check {
    width: 65px;
    height: 65px;
    background: #2dd4bf;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.aqua-win-footer {
    margin-top: auto;
    opacity: 0.6;
    padding-top: 30px;
}


.qr-main-wrapper {
        font-family: 'Plus Jakarta Sans', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 20px;
        position: relative;
    }

    /* Animated Background Blobs */
    .qr-bg-blob {
        position: absolute;
        width: 450px; 
        height: 450px;
        background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, transparent 70%);
        top: -100px; 
        left: -100px;
        z-index: 0;
        animation: float 12s infinite alternate ease-in-out;
    }

    .qr-blob-2 { 
        top: auto; 
        left: auto; 
        bottom: -100px; 
        right: -100px; 
        background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 70%); 
        animation-delay: -3s;
    }

    @keyframes float { 
        from { transform: translate(0,0); } 
        to { transform: translate(60px, 40px); } 
    }

    /* Main Container */
    .qr-card-container {
        width: 100%;
        max-width: 420px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-radius: 40px;
        border: 1px solid rgba(255, 255, 255, 0.7);
        padding: 45px 30px;
        text-align: center;
        box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08);
        z-index: 1;
    }

    .qr-brand-badge {
        display: inline-block;
        padding: 5px 14px;
        background: #f0f9ff;
        color: #0ea5e9;
        border-radius: 100px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.5px;
        margin-bottom: 18px;
        border: 1px solid rgba(14, 165, 233, 0.1);
    }

    .qr-title { 
        font-weight: 800; 
        color: #0f172a; 
        font-size: 28px; 
        margin: 0; 
        letter-spacing: -0.5px; 
    }

    .qr-subtitle { 
        font-size: 14px; 
        color: #64748b; 
        margin-top: 10px; 
        margin-bottom: 35px; 
        line-height: 1.6; 
    }

    /* Progress Steps */
    .qr-progress-bar { 
        display: flex; 
        justify-content: center; 
        gap: 14px; 
        margin-bottom: 40px; 
    }

    .qr-dot { 
        width: 26px; 
        height: 26px; 
        background: #f1f5f9; 
        border-radius: 50%; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        font-size: 11px; 
        font-weight: 800; 
        color: #cbd5e1; 
        transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .qr-dot.active { 
        background: #0ea5e9; 
        color: white; 
        box-shadow: 0 0 15px rgba(14, 165, 233, 0.35); 
        transform: scale(1.15);
    }

    /* Scratch Card Area */
    .qr-scratch-box {
        position: relative;
        width: 300px;
        height: 200px;
        margin: 0 auto 25px;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 26px;
        overflow: hidden;
        border: 2px solid #fff;
        box-shadow: 0 15px 30px rgba(0,0,0,0.04), inset 0 0 20px rgba(255,255,255,0.6);
    }

    #qrCanvas { 
        position: absolute; 
        top: 0; 
        left: 0; 
        cursor: crosshair; 
        touch-action: none; 
        z-index: 2; 
    }

    .qr-hidden-reward {
        position: absolute; 
        inset: 0; 
        display: flex; 
        flex-direction: column;
        align-items: center; 
        justify-content: center; 
        z-index: 1;
    }
.strong{display:block; margin-bottom:3px; font-weight:800;font-size:20px;color:red;}
    .qr-reward-gradient {
        font-size: 17px; 
        font-weight: 900;
        background: linear-gradient(135deg, #0ea5e9, #22d3ee);
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
    }

    .qr-reward-sub { 
        font-size: 10px; 
        font-weight: 800; 
        color: #94a3b8; 
        letter-spacing: 2px; 
        margin-top: 8px; 
    }

    .qr-status-label { 
        font-weight: 700; 
        color: #0ea5e9; 
        font-size: 13px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 8px;
    }

    /* Modal / Popups */
    .qr-modal-bg { 
        position: fixed; 
        inset: 0; 
        background: rgba(15, 23, 42, 0.5); 
        backdrop-filter: blur(12px); 
        display: none; 
        align-items: center; 
        justify-content: center; 
        z-index: 9999; 
        padding: 20px; 
    }

    .qr-modal-content { 
        background: #fff; 
        width: 100%; 
        max-width: 380px; 
        padding: 40px; 
        border-radius: 35px; 
        box-shadow: 0 30px 60px rgba(0,0,0,0.15); 
        text-align: center;
        animation: qrSlideUp 0.4s ease-out;
    }

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

    .qr-modal-header h3 { 
        font-weight: 800; 
        margin: 0 0 8px; 
        color: #0f172a; 
        font-size: 22px; 
    }

    .qr-modal-header p { 
        font-size: 14px; 
        color: #64748b; 
        margin-bottom: 25px; 
    }

    .qr-input-box { 
        width: 100%; 
        padding: 18px 22px; 
        border-radius: 18px; 
        box-sizing: border-box;
        border: 2px solid #f1f5f9; 
        margin-bottom: 20px; 
        font-weight: 600; 
        outline: none; 
        transition: 0.3s; 
        font-family: inherit; 
        font-size: 16px;
    }

    .qr-input-box:focus { 
        border-color: #0ea5e9; 
        background: #f0f9ff; 
    }

    /* City Grid */
    .qr-city-grid { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 12px; 
        margin-bottom: 25px; 
    }

    .qr-city-card {
        padding: 16px; 
        border: 2px solid #f1f5f9; 
        border-radius: 18px;
        cursor: pointer; 
        font-weight: 700; 
        transition: 0.3s; 
        color: #64748b; 
        font-size: 14px;
    }

    .qr-city-card:hover { 
        border-color: #e2e8f0; 
        background: #f8fafc; 
    }

    .qr-city-card.active { 
        background: #f0f9ff; 
        border-color: #0ea5e9; 
        color: #0ea5e9; 
        transform: translateY(-2px); 
    }

    .qr-submit-btn { 
        width: 100%; 
        padding: 20px; 
        background: #0f172a; 
        color: #fff; 
        border: none; 
        border-radius: 20px; 
        font-weight: 800; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 10px; 
        transition: 0.3s; 
        cursor: pointer; 
        text-transform: uppercase; 
        letter-spacing: 1px;
    }

    .qr-submit-btn:hover { 
        background: #1e293b; 
        transform: translateY(-2px); 
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1); 
    }

    /* Final Lock State */
    .qr-lock-notice { 
        background: #fffbeb; 
        border: 1px solid #fde68a; 
        color: #92400e; 
        padding: 22px; 
        border-radius: 26px; 
        font-size: 13px; 
        text-align: left;
        display: none; 
        align-items: flex-start; 
        gap: 14px; 
        margin-top: 20px;
    }

    .qr-footer {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.qr-activate-btn {
    position: relative;
    background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%);
    color: #ffffff;
    border: none;
    padding: 14px 40px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3), 
                0 0 15px rgba(34, 211, 238, 0.2);
}

/* The Animated Shimmer Effect */
.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transition: all 0.6s;
    animation: qrShine 3s infinite;
}

.qr-activate-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.5), 
                0 0 20px rgba(34, 211, 238, 0.4);
    filter: brightness(1.1);
}

.qr-activate-btn:active {
    transform: translateY(1px);
}
/* Smooth entrance for the final button */
.fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    opacity: 0;
}

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

/* Ensure the footer has a minimum height so the card doesn't jump */
.qr-footer {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Animations */
@keyframes qrShine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* Adjusting for Mobile */
@media (max-width: 768px) {
    .qr-activate-btn {
        width: 100%;
        padding: 16px;
    }
}

    /* Loader */
    .spinner-border-sm { 
        width: 1.2rem; 
        height: 1.2rem; 
        border: 2.5px solid currentColor; 
        border-right-color: transparent; 
        border-radius: 50%; 
        animation: spin .75s linear infinite; 
    }

    @keyframes spin { to { transform: rotate(360deg); } }
   
.main-content {
    margin-left: 280px;
    padding: 40px;
}

/* Reusable UI Components */
.glass-card {
    /* Replaced --card-bg */
    background: rgba(15, 23, 42, 0.8); 
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 24px;
    height: 100%;
}

.stat-value { 
    font-size: 1.8rem; 
    font-weight: 800; 
    margin-bottom: 0; 
}

.stat-label { 
    font-size: 0.75rem; 
    color: #94a3b8; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

.btn-action {
    /* Hardcoded gradient colors */
    background: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
    border: none; 
    color: white; 
    border-radius: 10px; 
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn-action:hover {
    opacity: 0.9;
}

.form-control-dark {
    background: #0f172a !important; 
    border: 1px solid #334155 !important;
    color: white !important; 
    border-radius: 10px; 
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}
.nav .nav-link{color:#fff;}
/* Mobile Adjustments */
@media (max-width: 992px) {
    .sidebar { 
        transform: translateX(-100%); 
    }
    .main-content { 
        margin-left: 0; 
        padding: 20px; 
    }
}

/* QR Preview Box */
.qr-box {
    background: white; 
    padding: 10px; 
    border-radius: 12px; 
    width: 120px; 
    height: 120px; 
    margin: 0 auto;
}

/* Container for the Pricing Card must have these */
.pricing-card {
    position: relative;
    overflow: hidden; /* Keeps the circle from leaking out */
    z-index: 1;
}

/* Updated Floating Badge Class */
.cust-v3-floating-badge {
    position: absolute;
        top: 0px;
    left: 0px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    z-index: -1; /* Puts it BEHIND the text */
    border: 1px solid rgba(34, 211, 238, 0.2);
    background: radial-gradient(circle, rgba(34, 211, 238, 0.05) 0%, transparent 70%);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);
    animation: floatBadge 6s ease-in-out infinite;
}

/* Refined Label */
.badge-label {
    font-size: 10px;
    font-weight: 800;
    color: rgb(34 211 238); /* Faded color so it's not distracting */
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: rotate(-15deg);
    line-height: 1.1;
}

/* Gold Variant for Growth Plan */
.badge-gold {
    border-color: rgba(255, 215, 0, 0.2);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
}
.badge-gold .badge-label {
    rgb(255 215 0 / 88%)
}

@keyframes floatBadge {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5px, 10px) rotate(5deg); }
}
 /* Section Base */
    .cust-v3-about-section {
        padding-top: 50px;
        padding-bottom: 50px;
        color: #ffffff;
        background-color: #020617;
    }

    .cust-v3-parallax-bg {
        position: absolute; inset: 0;
        background-size: cover; background-position: center; background-attachment: fixed;
        filter: blur(5px) saturate(0.5);
        z-index: 1;
    }

    .cust-v3-gradient-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(145deg, rgba(2, 6, 23, 0.9) 0%, rgba(2, 6, 23, 0.6) 50%, rgba(1, 127, 208, 0.4) 100%);
        z-index: 2;
    }

  /* Container expansion */
.cust-v6-large-container {
    position: relative;
    padding: 40px;
    display: inline-block;
    width: 100%;
    max-width: 600px; /* Increased from standard size */
}

.cust-v6-main-image-wrap {
    position: relative;
    border-radius: 40px;
    overflow: visible; /* Allows image to "pop" out */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cust-v6-main-image-wrap:hover {
    transform: scale(1.05) rotate(1deg);
}

.cust-v6-img-fluid {
    width: 100%;
    height: auto;
    border-radius:21px;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5));
    transform: scale(1.15); /* Boosts the actual image size */
}

/* Glass & Glows */
.cust-v6-glass-overlay {
    position: absolute; 
    inset: 0; 
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%); 
    pointer-events: none;
    border-radius: 40px;
}

.large-glow-cyan {
    background: radial-gradient(circle, rgba(29, 179, 235, 0.3) 0%, transparent 70%);
    left: -50px; 
    top: 5%;
    width: 300px;
    height: 300px;
}

.large-glow-orange {
    background: radial-gradient(circle, rgba(248, 154, 28, 0.25) 0%, transparent 70%);
    right: -50px; 
    bottom: 5%;
    width: 300px;
    height: 300px;
}

/* Floating Layer Icons */
.cust-v6-float-layer {
    position: absolute;
    z-index: 10;
    animation: floatAnim 4s infinite alternate ease-in-out;
}

.fl-top {
    top: 5%;
    left: -10%;
    color: #1db3eb;
    filter: drop-shadow(0 0 20px rgba(29, 179, 235, 0.5));
}

.fl-bottom {
    bottom: -5%;
    right: -5%;
    color: #f89a1c;
    filter: drop-shadow(0 0 20px rgba(248, 154, 28, 0.4));
    animation-delay: -2s;
}

@keyframes floatAnim {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(-20px) rotate(10deg); }
}

    /* UI Components */
    .cust-v3-brand-badge {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 5px 14px; background: rgba(34, 211, 238, 0.1);
        color: #22d3ee; border: 1px solid rgba(34, 211, 238, 0.2);
        border-radius: 100px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
    }

    .cust-v3-description { 
        color: #cbd5e1 !important; 
        max-width: 600px; 
        line-height: 1.8; 
        font-size: 1.1rem; 
    }

    .cust-v3-demo-link {
        display: flex; align-items: center; gap: 10px;
        color: #ffffff !important; text-decoration: none; font-weight: 700; font-size: 14px;
        transition: 0.3s;
    }
    .cust-v3-demo-link:hover { color: #22d3ee !important; transform: translateX(3px); }

    /* Responsiveness */
    @media (max-width: 992px) {
        .cust-v3-about-section { padding-top: 100px; padding-bottom: 80px; text-align: center; }
        .cust-v3-brand-badge, .d-flex { justify-content: center !important; }
        .cust-v3-visual-container { height: 250px; margin-top: 50px; }
        .cust-v3-description { margin-left: auto; margin-right: auto;        font-size: 14px;
        line-height: 17px; }
    }
    
.prooin-welcome-card {
        position: relative;
        background: rgba(15, 23, 42, 0.9);
        border: 1px solid rgba(34, 211, 238, 0.3);
        border-radius: 20px;
        padding: 10px 13px;
        text-align: center;
        overflow: hidden;
        max-width: 500px;
        margin: 20px auto;
        backdrop-filter: blur(15px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    }

    .prooin-glow-aura {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(34, 211, 238, 0.05) 0%, transparent 70%);
        pointer-events: none;
    }

    .prooin-top-bar {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 3px;
        background: linear-gradient(90deg, transparent, #22d3ee, #a855f7, transparent);
        box-shadow: 0 0 15px #22d3ee;
    }

    .prooin-icon-wrapper {
        margin-bottom: 20px;
        color: #22d3ee;
        filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.6));
    }

    .prooin-main-text {
        color: #ffffff;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: 1px;
        margin-bottom: 15px;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .prooin-brand {
        background: linear-gradient(90deg, #22d3ee, #a855f7);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .prooin-sub-text {
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    /* Moving Scanner Decoration */
    .prooin-scanner-line {
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
        position: relative;
        overflow: hidden;
    }

    .prooin-scanner-line::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, #22d3ee, transparent);
        animation: prooin-scan 3s infinite linear;
    }

    @keyframes prooin-scan {
        0% { left: -100%; }
        100% { left: 100%; }
    }

    /* Subtle Entrance Animation */
    .prooin-welcome-card {
        animation: prooin-fade-up 0.8s ease-out;
    }

    @keyframes prooin-fade-up {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
/* --- PROOIN HOW IT WORKS: CORE STYLING --- */

/* Section Background: Deep Navy from Logo */
.how-it-works-v3 {
    padding: 100px 0;
    background-color: #0a1120;
    color: #ffffff;
    overflow: hidden;
}

/* Header & Typography */
.header-v3 {
    text-align: center;
    margin-bottom: 70px;
}

.badge-v3 {
    display: inline-block;
    padding: 6px 20px;
    background: rgba(29, 179, 235, 0.1);
    border: 1px solid rgba(29, 179, 235, 0.3);
    color: #1db3eb; /* Prooin Cyan Default */
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.title-v3 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.text-prooin-cyan {
    color: #1db3eb;
}

.desc-v3 {
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- THE STEP CARDS --- */
.card-v3 {
    position: relative;
    height: 100%;
    padding: 45px 35px;
    background: rgba(255, 255, 255, 0.02);
    /* Default Cyan Border */
    border: 1px solid rgba(29, 179, 235, 0.2); 
    border-radius: 30px;
    backdrop-filter: blur(15px);
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    z-index: 1;
}

/* --- HOVER STATE: THE "ORANGE" TRANSFORMATION --- */
.card-v3:hover {
    transform: translateY(-12px);
    border-color: #f89a1c; /* Prooin Orange on Hover */
    background: rgba(248, 154, 28, 0.05); /* Subtle Orange Glow */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 
                0 0 20px rgba(248, 154, 28, 0.15);
}

/* Step Number Icon Styling */
.num-v3 {
    width: 55px;
    height: 55px;
    background: #1db3eb; /* Prooin Cyan Default */
    color: #0a1120;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.3rem;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(29, 179, 235, 0.2);
    transition: all 0.4s ease;
}

/* Change Icon to Orange on Card Hover */
.card-v3:hover .num-v3 {
    background: #f89a1c; /* Prooin Orange */
    box-shadow: 0 10px 20px rgba(248, 154, 28, 0.4);
    transform: rotate(10deg); /* Modern Playful Tilt */
}

/* Card Text Styling */
.card-title-v3 {
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #ffffff;
    transition: color 0.4s ease;
}

/* Title turns Orange on Hover */
.card-v3:hover .card-title-v3 {
    color: #f89a1c;
}

.card-text-v3 {
    color: #94a3b8;
    line-height: 1.8;
    font-size: 0.95rem;
}



#special-offer {
    /* Layer 1: The Cyan Glow (Top Left) 
       Layer 2: The Orange Glow (Bottom Right)
       Layer 3: The Dark Core (Center - for text readability)
       Layer 4: The Background Image */
    background: 
        radial-gradient(circle at 0% 0%, rgba(29, 179, 235, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(248, 154, 28, 0.15) 0%, transparent 40%),
        linear-gradient(rgba(10, 17, 32, 0.85), rgba(10, 17, 32, 0.85)), 
        url('img/bgh2.jpg');
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: adds a smooth parallax feel */
    position: relative;
    border-top: 1px solid rgba(29, 179, 235, 0.1);
    border-bottom: 1px solid rgba(248, 154, 28, 0.1);
    
    /* Adds a high-end frosted glass effect to the whole section */
    backdrop-filter: blur(4px); 
    padding: 100px 0; /* Professional breathing room */
}

/* Optional: Add a subtle animated pulse to the brand glows */
#special-offer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(45deg, rgba(29, 179, 235, 0.05), transparent, rgba(248, 154, 28, 0.05));
    z-index: 0;
    pointer-events: none;
}



/* --- SPECIAL LAYOUTS --- */

/* Final Step Enhancement (Step 07) */
.final-v3 {
    text-align: center;
    border: 2px dashed rgba(29, 179, 235, 0.3);
}

.final-v3:hover {
    border: 2px dashed #f89a1c;
}

.max-w-700 {
    max-width: 700px;
    margin: 0 auto;
}

/* Logo Swoosh Background Effect */
.swoosh-gradient {
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(29, 179, 235, 0.12) 0%, transparent 70%);
    z-index: -1;
    transition: background 0.5s ease;
}

/* Swoosh Glow turns Orange on Hover */
.card-v3:hover .swoosh-gradient {
    background: radial-gradient(circle, rgba(248, 154, 28, 0.15) 0%, transparent 70%);
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 991px) {
    .how-it-works-v3 {
        padding: 60px 0;
    }
    .title-v3 {
        font-size: 2.2rem;
    }
    .card-v3 {
        text-align: center;
        padding: 35px 25px;
    }
    .num-v3 {
        margin: 0 auto 25px auto;
    }
}

/* --- PROOIN MESH GRADIENT BACKGROUND --- */
.what-get-v3 {
    padding: 120px 0;
    background-color: #0a1120;
    position: relative;
    overflow: hidden;
}

.mesh-gradient-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

.glow-cyan { top: -200px; left: -200px; background: #1db3eb; }
.glow-orange { bottom: -200px; right: -200px; background: #f89a1c; }

/* --- HEADER --- */
.header-v3 {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.badge-v3 {
    display: inline-block;
    padding: 6px 20px;
    background: rgba(29, 179, 235, 0.1);
    border: 1px solid rgba(29, 179, 235, 0.3);
    color: #1db3eb;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.title-v3 { font-size: 3.5rem; font-weight: 900; color: #ffffff; letter-spacing: -1px; }
.text-orange { color: #f89a1c; }
.desc-v3 { color: #94a3b8; max-width: 700px; margin: 20px auto 0; font-size: 1.15rem; }

/* --- THE CARDS --- */
.card-v3 {
    position: relative;
    height: 100%;
    padding: 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(29, 179, 235, 0.2); /* Default Prooin Cyan */
    border-radius: 35px;
    backdrop-filter: blur(20px);
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    overflow: hidden;
    z-index: 1;
}

/* Hover: Shift to Orange */
.card-v3:hover {
    transform: translateY(-15px);
    border-color: #f89a1c;
    background: rgba(248, 154, 28, 0.05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* FIXED WATERMARK NUMBER: Using z-index and absolute positioning */
.card-num-v3 {
        position: absolute;
    top: 6px;
    right: 10px;
    font-size: 3rem;
    font-weight: 900;
    color: rgb(29 179 235 / 25%);
    line-height: 1;
    z-index: 7;
    pointer-events: none;
    transition: 0.5s ease;
}

.card-v3:hover .card-num-v3 {
    color: rgba(248, 154, 28, 0.15); /* Glowing Orange */
    transform: scale(1.1);
}

/* Image Container */
.img-container-v3 {
    width: 100%;
    height: 70%;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
    z-index: 2; /* Image stays above the number */
}

.img-container-v3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(40%) brightness(0.8);
    transition: 0.5s ease;
}

.card-v3:hover .img-container-v3 img {
    filter: grayscale(0%) brightness(1.1);
    transform: scale(1.05);
}

/* Card Content */
.card-title-v3 {
    position: relative;
    z-index: 3; /* Title above everything */
    font-weight: 800;
    font-size: 1.35rem;
    color: #ffffff;
    margin-bottom: 12px;
    transition: 0.4s;
}

.card-v3:hover .card-title-v3 { color: #f89a1c; }

.card-text-v3 {
    position: relative;
    z-index: 3;
    color: #94a3b8;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Special Case: Point 12 Glow */
.special-focus {
    border-color: rgba(248, 154, 28, 0.4);
    box-shadow: 0 0 20px rgba(248, 154, 28, 0.1);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 991px) {
    .title-v3 { font-size: 2.2rem; }
    .card-v3 { text-align: center; padding: 25px; }
    .card-num-v3 { font-size: 6rem; right: 50%; transform: translateX(50%); top: 0; }
}
.prooin-pricing-v5 {
    padding: 100px 0;
    background-color: #0a1120;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

/* Background Glow Effects */
.prooin-glow-top { position: absolute; top: -10%; left: -10%; width: 500px; height: 500px; background: rgba(29, 179, 235, 0.15); filter: blur(120px); border-radius: 50%; z-index: 0; }
.prooin-glow-bottom { position: absolute; bottom: -10%; right: -10%; width: 500px; height: 500px; background: rgba(248, 154, 28, 0.15); filter: blur(120px); border-radius: 50%; z-index: 0; }

/* Header Elements */
.prooin-badge { display: inline-block; padding: 5px 15px; background: rgba(29, 179, 235, 0.1); border: 1px solid rgba(29, 179, 235, 0.2); color: #1db3eb; border-radius: 50px; font-size: 11px; font-weight: 800; letter-spacing: 2px; margin-bottom: 15px; }
.prooin-h2 { font-size: 2.8rem; font-weight: 900; letter-spacing: -1px; }
.prooin-sub { color: #94a3b8; max-width: 600px; margin: 10px auto; }
.text-orange { color: #f89a1c; }

/* Pricing Cards */
.p-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 40px 25px 102px 25px;
    height: 100%;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

/* Background Images per Card */
.starter-card { background-image: linear-gradient(rgba(10,17,32,0.92), rgba(10,17,32,0.92)), url('https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=400'); }
.pro-card { 
    background-image: linear-gradient(rgba(10, 17, 32, 0.88), rgba(10, 17, 32, 0.88)), url('../img/pro.jpg'); 
    background-position: center center; 
    background-size: cover;           
    background-repeat: no-repeat;    
}
.growth-card { background-image: linear-gradient(rgba(10,17,32,0.88), rgba(10,17,32,0.88)), url('../img/growth.jfif'); }
.business-card { background-image: linear-gradient(rgba(10,17,32,0.92), rgba(10,17,32,0.92)), url('../img/customplan.jfif'); }

.p-card:hover { transform: translateY(-10px); border-color: #f89a1c; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.featured { border: 2px solid #1db3eb; box-shadow: 0 0 30px rgba(29, 179, 235, 0.1); }

.popular-pill {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f89a1c; /* Prooin Gold/Orange */
    color: #0a1120; /* Deep Navy for contrast */
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    
    /* High-Visibility Base Glow */
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px rgba(248, 154, 28, 0.7);
    
    /* Smooth slow pulse animation */
    animation: intense-orange-glow 3s infinite ease-in-out;
    white-space: nowrap;
    z-index: 10;
}

/* Removal of Shimmer (Pseudo-element removed/hidden) */
.popular-pill::after {
    display: none;
}

/* Intense Orange Glow Keyframes */
@keyframes intense-orange-glow {
    0%, 100% { 
        /* Deep, soft orange aura */
        box-shadow: 0 0 15px rgba(248, 154, 28, 0.6), 
                    inset 0 0 8px rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%) scale(1);
    }
    50% { 
        /* Bright, wide orange "Neon" effect */
        box-shadow: 0 0 30px rgba(248, 154, 28, 1), 
                    0 0 12px rgba(255, 255, 255, 0.5),
                    inset 0 0 10px rgba(255, 255, 255, 0.4);
        /* Subtle "Breathing" scale */
        transform: translate(-50%, -50%) scale(1.05);
    }
}
 .prooin-meta-text {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 600;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .text-prooin-gradient {
        background: linear-gradient(90deg, #22d3ee, #a855f7);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .prooin-accent-bar {
        height: 3px;
        width: 60px;
        background: linear-gradient(90deg, #22d3ee, transparent);
        border-radius: 50px;
    }
/* Plan Content */
.p-plan-title { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; opacity: 0.9; }
.p-meta { font-size: 0.8rem; color: #1db3eb; font-weight: 700; margin-bottom: 10px; }
.p-price { font-size: 2.5rem; font-weight: 900; margin-bottom: 0; }
.p-price small { font-size: 0.9rem; color: #94a3b8; font-weight: 500; }
.p-divider { border-color: rgba(255,255,255,0.1); margin: 20px 0; }

/* Features */
.p-features { list-style: none; padding: 0; margin-bottom: 25px; }
.p-features li { font-size: 0.88rem; color: #cbd5e1; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; }
.p-features li i { color: #1db3eb; width:auto; margin-top: 3px; }
.p-features .disabled { opacity: 0.4; text-decoration: line-through; }
/* --- THE EYE-CATCHING SCROLLBAR --- */
.pro-scroll {
    max-height: 280px; /* Adjusted for better visibility */
    overflow-y: auto;
    padding-right: 12px;
    margin-right: -10px; /* Pulls scrollbar to the edge */
    
    /* Smooth scrolling for modern browsers */
    scroll-behavior: smooth;
}

/* 1. The Track (The background part) */
.pro-scroll::-webkit-scrollbar {
    width: 5px; /* Thin and elegant */
}

.pro-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03); /* Nearly invisible */
    border-radius: 10px;
    margin: 10px 0; /* Adds spacing at top/bottom of scroll */
}

/* 2. The Thumb (The moving part) */
.pro-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #1db3eb, #f89a1c); /* Prooin Cyan to Orange Gradient */
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle glass edge */
    box-shadow: 0 0 10px rgba(29, 179, 235, 0.4); /* Neon Glow effect */
}

/* 3. Hover Effect on Thumb */
.pro-scroll::-webkit-scrollbar-thumb:hover {
    background: #f89a1c; /* Turns solid Prooin Orange on hover */
    box-shadow: 0 0 15px rgba(248, 154, 28, 0.6); /* Stronger Orange glow */
}

/* 4. Firefox Support */
.pro-scroll {
    scrollbar-width: thin;
    scrollbar-color: #1db3eb rgba(255, 255, 255, 0.05);
}

/* Growth Group Headings */
.p-group-head { font-size: 0.85rem; font-weight: 900; color: #f89a1c; text-transform: uppercase; margin: 15px 0 8px; }

/* ADMIN CIRCLE (Bottom Left) */
.admin-circle {
    position: absolute; bottom: 20px; left: 20px;
    width: 60px; height: 60px;
    border: 1px solid rgba(29, 179, 235, 0.3);
    background: rgba(29, 179, 235, 0.05);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px); transition: 0.4s ease;
}
.admin-circle span { font-size: 9px; font-weight: 900; color: #1db3eb; text-transform: uppercase; line-height: 1.1; text-align: center; }

.p-card:hover .admin-circle { border-color: #f89a1c; background: rgba(248, 154, 28, 0.1); transform: rotate(15deg) scale(1.1); }
.p-card:hover .admin-circle span { color: #f89a1c; }

/* Buttons */
.p-btn {
    display: block; width: 100%; padding: 14px; border-radius: 50px;
    font-size: 0.9rem; font-weight: 900; text-align: center; text-decoration: none;
    border: none; transition: 0.3s ease; margin-top: auto;
}
.outline { border: 1.5px solid #1db3eb; color: #1db3eb; background: transparent; }
.outline:hover { background: #1db3eb; color: #0a1120; }
.solid-cyan { background: #1db3eb; color: #0a1120; }
.solid-cyan:hover { background: #f89a1c; transform: scale(1.02); }
.solid-orange { background: #f89a1c; color: #ffffff; }

/* Mobile */
@media (max-width: 991px) {
    .p-card { margin-bottom: 20px; }
    .prooin-h2 { font-size: 2.2rem; }
}
.prooin-offer-banner.centered-v6 {
    position: relative;
    max-width: 900px;
    margin: 60px auto;
    padding: 27px 40px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

/* Background Brand Glows */
.p-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.35;
    animation: blobFloat 8s infinite alternate ease-in-out;
}
.cyan-blob { top: -80px; left: 15%; background: #1db3eb; }
.orange-blob { bottom: -80px; right: 15%; background: #f89a1c; animation-delay: 2s; }

@keyframes blobFloat {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(40px, 30px) scale(1.1); }
}

/* Typography & Layout */
.p-text-zone { width: 100%; }

.p-context-text {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.p-highlight-line {
    color: #ffffff;
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1.2;
}

.text-gradient {
    background: linear-gradient(to right, #1db3eb, #f89a1c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 20px rgba(29, 179, 235, 0.1);
}

/* Feature Tags */
.p-features-minimal {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 0px;
}

.p-tag {
    font-size: 0.85rem;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.04);
    padding: 8px 18px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: 0.3s;
}

.p-tag:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.p-tag i { color: #f89a1c; width: 14px; }

/* Action Button */
.p-reveal-btn {
    background: linear-gradient(45deg, #1db3eb, #0ea5e9);
    color: #0a1120;
    border: none;
    padding: 18px 45px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 35px rgba(29, 179, 235, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.p-reveal-btn:hover {
    background: linear-gradient(45deg, #f89a1c, #fbbf24);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 20px 40px rgba(248, 154, 28, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .p-highlight-line { font-size: 1.8rem; }
    .prooin-offer-banner.centered-v6 { padding: 40px 20px; margin: 30px 15px; }
}
/* --- THE FOOTER MASTERCLASS --- */

.prooin-footer-v6 {
    background: #070d19; /* Deeper dark for better contrast */
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.footer-neon-line {
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, #1db3eb, #f89a1c, transparent);
    box-shadow: 0 0 20px rgba(29, 179, 235, 0.5);
}

/* Logo Animation */
.footer-brand-container {
    position: relative;
    display: inline-block;
    transition: transform 0.4s ease;
}

.footer-brand-container:hover {
    transform: translateY(-10px);
}

.footer-logo-img {
    height: 50px;
    position: relative;
    z-index: 2;
}

.footer-logo-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(29, 179, 235, 0.15) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 1;
}

/* Modern Link Hover Effects */
.f-v6-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: block;
}

.f-v6-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icon-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1.4rem; /* Adjusted for Font Awesome visibility */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

/* Specific Hover States */
.social-icon-btn.cyan:hover {
    background: #1db3eb;
    color: #fff;
    box-shadow: 0 0 25px rgba(29, 179, 235, 0.6);
    transform: translateY(-5px) scale(1.1);
}

.social-icon-btn.orange:hover {
    background: #f89a1c;
    color: #fff;
    box-shadow: 0 0 25px rgba(248, 154, 28, 0.6);
    transform: translateY(-5px) scale(1.1);
}

.social-icon-btn.white:hover {
    background: #ffffff;
    color: #0a1120;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
    transform: translateY(-5px) scale(1.1);
}

/* Ensures the icon itself is centered */
.social-icon-btn i {
    line-height: 0;
}
/* Bottom Credit Glass Card */
.footer-bottom-card {
    display: inline-block;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    backdrop-filter: blur(10px);
}
.text-prooin-gradient {
            background: linear-gradient(90deg, #1db3eb, #f89a1c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
        }

        /* --- BREADCRUMB OUTSIDE SECTION --- */
        .breadcrumb-container {
            background: rgba(15, 23, 32, 0.8);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding: 15px 0;
            backdrop-filter: blur(10px);
        }

        .breadcrumb-v6-pill {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 25px;
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
        }

        .breadcrumb-item a {
            color: #1db3eb;
            text-decoration: none;
            font-weight: 500;
            transition: 0.3s;
        }

        .breadcrumb-item a:hover {
            color: #f89a1c;
        }

        .breadcrumb-item.active {
            color: #94a3b8;
        }

        .breadcrumb-item + .breadcrumb-item::before {
            color: rgba(255, 255, 255, 0.2);
            content: "\f105"; 
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }

        /* --- CONTENT SECTION --- */
        .policy-section {
            padding: 130px 0;
        }

        .prooin-accent-bar {
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #1db3eb, #f89a1c);
            border-radius: 50px;
            margin: 20px 0 40px 0;
        }

        .glass-policy-card {
            background: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 40px;
            position: relative;
            overflow: hidden;
        }

        .bg-glow-spot {
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(29, 179, 235, 0.1) 0%, transparent 70%);
            pointer-events: none;
        }

        .icon-box-v6 {
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .icon-box-v6.cyan { background: rgba(29, 179, 235, 0.1); color: #1db3eb; border: 1px solid rgba(29, 179, 235, 0.2); }
        .icon-box-v6.orange { background: rgba(248, 154, 28, 0.1); color: #f89a1c; border: 1px solid rgba(248, 154, 28, 0.2); }

        .leading-relaxed {
            line-height: 1.8;
            color: #94a3b8;
        }

        .usage-highlight-box {
            background: rgba(255, 255, 255, 0.02);
            border-left: 4px solid #1db3eb;
            padding: 30px;
            border-radius: 20px;
        }

        .text-prooin-cyan { color: #1db3eb; }

        .consent-footer {
            border: 1px dashed rgba(255, 255, 255, 0.1);
            padding: 25px;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.01);
        }
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 75px;
    z-index: 1020;
}
        @media (max-width: 768px) {
            .display-4 { font-size: 2.5rem; }
            .breadcrumb-container { text-align: center; }
            .sticky-top{top:65px;}
        }
        
.terms-section {
    padding: 105px 0;
}

.prooin-accent-bar {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #1db3eb, #f89a1c);
    border-radius: 50px;
    margin: 20px 0 40px 0;
}

.glass-terms-card {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    position: relative;
    overflow: hidden;
}

.bg-glow-spot-orange {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(248, 154, 28, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Terms Item Grid */
.terms-grid-item {
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 30px;
}

.terms-grid-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.icon-box-v6 {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.icon-box-v6.cyan { background: rgba(29, 179, 235, 0.1); color: #1db3eb; border: 1px solid rgba(29, 179, 235, 0.2); }
.icon-box-v6.orange { background: rgba(248, 154, 28, 0.1); color: #f89a1c; border: 1px solid rgba(248, 154, 28, 0.2); }

.leading-relaxed {
    line-height: 1.8;
    color: #94a3b8;
}

.consent-footer {
    border: 1px dashed rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.01);
}
.refund-section {
    padding: 105px 0;
}

.prooin-accent-bar {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #1db3eb, #f89a1c);
    border-radius: 50px;
    margin: 20px 0 40px 0;
}

.glass-refund-card {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    position: relative;
    overflow: hidden;
}

.bg-glow-spot-cyan {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(29, 179, 235, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Policy Item Styling */
.policy-item {
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 30px;
}

.policy-item:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.icon-box-v6 {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.icon-box-v6.cyan { background: rgba(29, 179, 235, 0.1); color: #1db3eb; border: 1px solid rgba(29, 179, 235, 0.2); }
.icon-box-v6.orange { background: rgba(248, 154, 28, 0.1); color: #f89a1c; border: 1px solid rgba(248, 154, 28, 0.2); }

.leading-relaxed {
    line-height: 1.8;
    color: #94a3b8;
}

.warning-highlight {
    background: rgba(248, 154, 28, 0.05);
    border: 1px solid rgba(248, 154, 28, 0.15);
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 30px;
}
/* Captcha Wrapper Styling */
.auth-v2-captcha-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.auth-v2-captcha-wrapper:hover {
    border-color: rgba(29, 179, 235, 0.4);
    background: rgba(29, 179, 235, 0.02);
}

/* Custom Checkbox Animation */
.captcha-checkbox {
    width: 28px;
    height: 28px;
    border: 2px solid #334155;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.captcha-checkbox i {
    color: white;
    font-size: 14px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

/* Verified State (Neon Cyan) */
.captcha-checkbox.verified {
    background: #1db3eb;
    border-color: #1db3eb;
    box-shadow: 0 0 15px rgba(29, 179, 235, 0.5);
}

.captcha-checkbox.verified i {
    opacity: 1;
    transform: scale(1);
}
.th-form-control {
    width: 100%;
    /* Use Prooin Cyan with slight transparency for the base border */
    border: 1px solid rgba(29, 179, 235, 0.4); 
    padding: 14px 18px;
    /* Prooin Deep Navy Background */
    background: #0a1120; 
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    outline: none;
}

/* Interaction: Focus State using Prooin Cyan */
.th-form-control:focus {
    color: #fff !important;
    background: #0f172a; /* Slightly lighter navy on focus */
    border-color: #1db3eb; /* Pure Prooin Cyan */
    /* Add a soft Cyan glow */
    box-shadow: 0 0 0 4px rgba(29, 179, 235, 0.15), 
                0 4px 15px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}

/* Target Black Placeholder as requested */
.th-form-control::placeholder {
    color: #fff !important;
    opacity: 0.7;
    font-weight: 600;
}

/* Webkit specific fix for placeholder color */
.th-form-control::-webkit-input-placeholder {
    color: #fff !important;
}

.th-btn-submit {
    /* Base Prooin Cyan */
    background: linear-gradient(135deg, #1db3eb, #1594c4);
    color: #ffffff;
    border: none;
    border-radius: 8px; /* Slightly softer corners for a modern feel */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Subtle outer glow */
    box-shadow: 0 4px 15px rgba(29, 179, 235, 0.3);
    cursor: pointer;
}

/* Hover State: Transitions to Prooin Gold */
.th-btn-submit:hover {
    background: linear-gradient(135deg, #f89a1c, #d98214);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(248, 154, 28, 0.4);
}

/* Highlighted Shimmer Effect */
.th-btn-submit::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: none;
    animation: th-shimmer 4s infinite linear;
}

@keyframes th-shimmer {
    0% { left: -60%; }
    20% { left: 120%; }
    100% { left: 120%; }
}

/* Active Press Effect */
.th-btn-submit:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(248, 154, 28, 0.2);
}
.fw-500 { font-weight: 500; }