/* ==============================================
   NAYA DESIGN V7 (REALISTIC BRIGHTER METEORS)
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --bg-secondary-translucent: rgba(17, 17, 17, 0.8);
    --accent-primary: #ffffff;
    --accent-secondary: #ffab70;
    --text-primary: #e0e0e0;
    --text-secondary: #999999;
    --text-headings: #ffffff;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover-color: rgba(100, 255, 218, 0.5);
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'Inter', sans-serif;
    --font-headings: 'Inter', sans-serif;
    --ease-out-smooth: ease-out;
    --ease-reveal: cubic-bezier(0.65, 0, 0.35, 1);
    --star-color-blue: #00ffff;
    --star-color-white: #ffffff;
    --glow-opacity-hidden: 0;
    --glow-opacity-visible: 1;
    --box-shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.2);
    --box-shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.3);
    --golden-glow-color: rgba(216, 155, 63, 0.3);
    --golden-glow-hover-color: rgba(240, 199, 118, 0.45);
    
    /* === NAYA: Form Variables === */
    --form-bg: #1c1c1c; 
    --input-bg: #2d2d2d; 
    
    /* === NAYA: Thank You Page Variable === */
    --accent-gold: #FCD535;
}

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

body.client-portal-body { 
    background: #000; 
    color: var(--text-primary); 
    font-family: var(--font-sans); 
    font-weight: 300; 
    line-height: 1.7; 
    overflow-x: hidden; 
    position: relative; 
}
.no-scroll { overflow: hidden !important; }

body.client-portal-body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3; background: radial-gradient( circle at 20% 30%, rgba(80, 0, 120, 0.3) 0%, rgba(0, 0, 0, 0) 25% ), radial-gradient( circle at 80% 70%, rgba(0, 80, 150, 0.3) 0%, rgba(0, 0, 0, 0) 25% ); animation: animateGlow 15s ease-in-out infinite; opacity: var(--glow-opacity-hidden); transition: opacity 1.5s ease-out; }
body.client-portal-body:not(.preload-blue)::before { opacity: var(--glow-opacity-visible); }

@keyframes animateGlow { 0%, 100% { background: radial-gradient(circle at 20% 30%, rgba(80, 0, 120, 0.3) 0%, rgba(0, 0, 0, 0) 25%), radial-gradient(circle at 80% 70%, rgba(0, 80, 150, 0.3) 0%, rgba(0, 0, 0, 0) 25%); } 50% { background: radial-gradient(circle at 80% 30%, rgba(80, 0, 120, 0.35) 0%, rgba(0, 0, 0, 0) 30%), radial-gradient(circle at 20% 70%, rgba(0, 80, 150, 0.35) 0%, rgba(0, 0, 0, 0) 30%); } }

#particles-js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; }
.slow-stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.overlay { display: none; }
@keyframes fall { from { transform: translateY(0); opacity: 0.8; } to { transform: translateY(100vh); opacity: 0; } }
.video-meteor { position: absolute; top: 0; left: var(--x); width: 2px; height: 2px; background: #ffffff; border-radius: 50%; filter: drop-shadow(0 0 6px #ffffff); opacity: 0; transform: rotate(20deg); animation: video-meteor-fall-straight linear infinite var(--d) var(--l); }
.video-meteor::after { content: ''; position: absolute; width: 1px; height: var(--s); bottom: 1px; left: 50%; transform: translateX(-50%); background: linear-gradient(to top, rgba(255, 255, 255, 0.6) 0%, transparent 100%); }
@keyframes video-meteor-fall-straight { 0% { transform: rotate(20deg) translateY(-100vh); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: rotate(20deg) translateY(60vh); opacity: 0; } }

.main-container { 
    max-width: 1350px; 
    margin: 0 auto; 
    padding: 100px 25px 0 25px; 
    position: relative; 
    z-index: 1; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.5s ease-in 0s, visibility 0s linear 0.5s; 
}
.main-container.visible { opacity: 1; visibility: visible; transition-delay: 0.2s; }

.hero-section { text-align: center; padding: 120px 0 160px 0; max-width: 800px; margin: 0 auto 80px auto; position: relative; overflow: hidden; }
.hero-section h1, .hero-section p, .hero-section .button-group { position: relative; z-index: 1; }

.cta-button { display: inline-block; padding: 14px 40px; background-color: #ffffff; color: #000000; border: 1px solid #ffffff; border-radius: 4px; text-decoration: none; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0; transition: all 0.25s var(--ease-out-smooth); cursor: pointer; font-size: 1em; text-transform: none; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); }
.cta-button:hover { background-color: #f0f0f0; border-color: #f0f0f0; color: #000; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15); }
.cta-button.secondary { background-color: transparent; color: #ffffff; border: 1px solid #555; box-shadow: none; }
.cta-button.secondary:hover { background-color: #111; border-color: #777; color: #fff; transform: translateY(-4px); box-shadow: none; }

.hero-section .button-group { display: flex; gap: 15px; margin-top: 50px; justify-content: center; opacity: 0; }
.hero-section h1 { line-height: 1.3; font-size: clamp(2.5em, 5vw, 3.5em); font-weight: 700; }
.hero-section h1 span { display: inline-block; opacity: 0; }
.hero-section p { opacity: 0; }
.hero-section.start-animations .h1-line-1 { animation: fadeInUp 1s var(--ease-out-smooth) 0.3s forwards, revealLeftToRight 1.4s var(--ease-reveal) 0.3s forwards; }
.hero-section.start-animations .h1-line-2 { animation: fadeInUp 1s var(--ease-out-smooth) 0.6s forwards, revealLeftToRight 1.4s var(--ease-reveal) 0.6s forwards; }
.hero-section.start-animations p { animation: fadeInUp 1s var(--ease-out-smooth) 0.9s forwards; }
.hero-section.start-animations .button-group { animation: fadeInUp 1s var(--ease-out-smooth) 1.1s forwards; }

.login-section, .registration-section, .products-section, .thank-you-section { position: relative; background-color: var(--bg-secondary); border: 1px solid var(--border-color); backdrop-filter: blur(10px); border-radius: 6px; box-shadow: var(--box-shadow-medium); }
.login-section, .registration-section { padding: 45px 55px; max-width: 500px; margin: 90px auto; }
.registration-section { max-width: 650px; padding: 40px 50px; }
.login-section h2, .registration-section h2 { font-family: var(--font-headings); color: var(--text-headings); text-align: center; margin-bottom: 40px; font-size: 1.8em; font-weight: 700; letter-spacing: 1px; }
.login-form input, .registration-form input { width: 100%; padding: 16px; margin-bottom: 20px; background-color: rgba(0, 0, 0, 0.8); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 1em; font-family: var(--font-sans); transition: all 0.3s ease; }
.login-form input::placeholder, .registration-form input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.login-form input:focus, .registration-form input:focus { outline: none; border-color: #ffffff; background-color: rgba(0, 0, 0, 0.9); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); }
.login-button, .register-button { display: inline-block; padding: 15px 35px; background-color: #ffffff; color: #000000; border: 1px solid #ffffff; border-radius: 4px; text-decoration: none; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0; transition: all 0.25s var(--ease-out-smooth); cursor: pointer; font-size: 1.1em; width: 100%; margin-top: 10px; text-transform: none; }
.login-button:hover, .register-button:hover { background-color: #f0f0f0; color: #000; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(255, 255, 255, 0.15); }
.login-error, .registration-error { color: #ff8c8c; margin-top: 15px; height: 20px; text-align: center; font-size: 0.9em; }
.registration-form label { display: block; color: var(--text-secondary); margin-bottom: 8px; font-size: 0.9em; }
.registration-form .form-group { margin-bottom: 20px; }
.selected-product { background-color: rgba(0, 0, 0, 0.5); padding: 15px 20px; margin-bottom: 30px; border-left: 3px solid var(--text-headings); text-align: center; }
.selected-product h3 { font-family: var(--font-mono); font-size: 1.4em; color: var(--text-primary); margin-bottom: 5px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.selected-product .version { font-size: 0.8em; color: var(--text-headings); font-weight: normal; background-color: rgba(255, 255, 255, 0.1); padding: 2px 6px; border-radius: 3px; }
.selected-product .price { font-weight: 600; color: var(--accent-secondary); font-size: 1.1em; margin: 0; }
.registration-form p { color: var(--text-secondary); text-align: center; margin-bottom: 30px; font-size: 0.95em; }
.back-link { text-align: center; margin-top: 30px; }
.back-link a { color: var(--text-secondary); text-decoration: none; font-size: 0.9em; transition: color 0.3s ease; }
.back-link a:hover { color: var(--text-headings); }

.products-section { padding: 100px 0; text-align: center; background-color: transparent; border: none; backdrop-filter: none; box-shadow: none; }
.products-section h2 { font-family: var(--font-headings); font-size: clamp(2.2em, 5vw, 3em); margin-bottom: 60px; color: var(--text-headings); position: relative; display: inline-block; }
.products-section h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background-color: var(--text-headings); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; text-align: left; perspective: 1500px; }
.product-card { background-color: var(--bg-secondary); border: 1px solid var(--border-color); backdrop-filter: blur(10px); padding: 35px 30px; border-radius: 6px; display: flex; flex-direction: column; position: relative; z-index: 1; transform-style: preserve-3d; transition: transform 0.1s linear, box-shadow 0.3s ease-out; will-change: transform; box-shadow: 0 0 15px 3px var(--golden-glow-color, rgba(216, 155, 63, 0.25)); }
.product-card:hover { box-shadow: 0 6px 25px 5px var(--golden-glow-hover-color, rgba(240, 199, 118, 0.35)); /* transform handled by JS */ }
.product-card > * { transform: translateZ(20px); }
.product-card h3 { font-family: var(--font-headings); font-size: 1.4em; color: var(--text-primary); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.product-card .version { font-size: 0.8em; color: var(--text-headings); font-weight: normal; background-color: rgba(255, 255, 255, 0.1); padding: 3px 8px; border-radius: 3px; }
.product-card .description { color: var(--text-secondary); margin-bottom: 20px; flex-grow: 1; font-size: 0.95em; font-family: var(--font-sans); }
.product-card .price { font-weight: 600; color: var(--accent-secondary); margin-bottom: 25px; font-size: 1.1em; }
.purchase-button { display: block; text-align: center; width: 100%; margin-top: auto; padding: 10px 20px; background-color: #ffffff; color: #000000; border: 1px solid #ffffff; transition: all 0.25s var(--ease-out-smooth); font-size: 0.9em; border-radius: 4px; font-weight: 600; text-decoration: none; }
.purchase-button:hover { background-color: #f0f0f0; color: #000; transform: translateY(-3px) translateZ(20px); box-shadow: 0 6px 15px rgba(255, 255, 255, 0.15); }
.purchased-tag { color: #00ff7f; font-size: 0.9em; font-weight: 600; }

.portal-footer { text-align: center; padding: 50px 0 30px 0; margin-top: 80px; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.85em; position: relative; z-index: 1; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0px); } }
@keyframes revealLeftToRight { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes slideDownFade { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 768px) { body.client-portal-body { line-height: 1.6; } .main-container { padding: 0 15px; } .hero-section { padding: 80px 0 100px 0; text-align: center; max-width: 100%; } .hero-section h1 { font-size: 2em; } .hero-section p { font-size: 1em; margin: 0 auto; max-width: 90%; } .hero-section .button-group { flex-direction: column; align-items: center; } .cta-button { width: 100%; max-width: 300px; } .login-section, .registration-section { padding: 30px 25px; margin: 60px auto; } .products-section { padding: 60px 0; } .products-section h2 { font-size: 1.8em; margin-bottom: 30px; } .product-grid { perspective: 1000px; } }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px; }
.dashboard-panel { background-color: var(--bg-secondary); border: 1px solid var(--border-color); min-height: 150px; }
.logout-button { display: inline-block; padding: 8px 15px; background-color: transparent; color: #ff7979; border: 1px solid #ff7979; border-radius: 4px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; margin-left: 20px; font-family: var(--font-mono); font-size: 0.9em; }
.logout-button:hover { background-color: rgba(255, 121, 121, 0.1); color: #ff5252; border-color: #ff5252; }

/* === Background Effects === */
.starfield-animation { display: none !important; }
.star { position: absolute; top: -10px; left: calc(var(--x) * 1vw); background: var(--star-color-white); border-radius: 50%; opacity: 0.8; width: var(--size, 1px); height: var(--size, 1px); animation: fall linear infinite; animation-duration: var(--d); animation-delay: var(--l); transition: background 1.5s ease-out, box-shadow 1.5s ease-out; }
body.preload-blue .star { background: var(--star-color-blue); box-shadow: 0 0 10px var(--star-color-blue); }
/* @keyframes fall definitions remain same */
/* .video-meteor definitions remain same */
/* @keyframes video-meteor-fall-straight definitions remain same */

/* === Preloader Video Styles === */
#preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: transparent !important; z-index: 9999; opacity: 1; visibility: visible; transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; overflow: hidden; }
#preloader video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* Poori width le */
  height: 100%; /* Poori height le */
  object-fit: cover; /* Video ko stretch/crop karke cover karega */
  z-index: 9998;
}
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }


/* ===== CONNECT WITH US SECTION STYLES (Final Target Match) ===== */
.connect-section { text-align: center; padding: 80px 0 100px 0; position: relative; overflow: hidden; }
.connect-section h2 { font-family: var(--font-headings); font-size: clamp(2em, 4vw, 2.5em); margin-bottom: 15px; color: var(--text-headings); }
.connect-subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 50px auto; font-size: 1em; line-height: 1.6; }

/* --- Layout (4-in-a-row) --- */
.connect-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1350px; /* Aapke .main-container se match karega */
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

.connect-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transform: none;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 230px;
    /* CSS Variables */
    --connect-glow-color: rgba(216, 155, 63, 0.5);
    --connect-glow-shadow: rgba(216, 155, 63, 0.4);
    --connect-glow-color-rgb: 216, 155, 63;
    --connect-glow-color-rgb-text: 230, 184, 123;
}

/* --- Tilt Effect --- */
.connect-card:hover {
     border-color: var(--connect-glow-color);
     box-shadow: 0 0 15px 3px var(--connect-glow-shadow);
     transform: translateY(-4px) rotateY(-7deg) !important;
}

.card-main-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

/* --- Icon Style --- */
.connect-card-icon {
    font-size: 1.7em;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    flex-shrink: 0;
    width: 56px;
    height: 52px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background-color: rgba(255, 255, 255, 0.05);
}
.connect-card-icon i {
    color: var(--accent-primary);
}

.card-text-content { flex-grow: 1; }


/* --- Text Position (Target Layout) --- */
.connect-card h3 {
    font-family: var(--font-headings);
    font-size: 1.25em;
    color: var(--text-primary);
    margin-bottom: 0.1px; /* Title aur Handle ke beech space */
    position: relative;
    z-index: 1;
}
.card-handle {
    display: block; /* Handle ko neeche wali line par bhejega */
    color: var(--text-secondary);
    font-size: 0.8em;
    font-weight: 500;
    margin-bottom: 12px; /* Handle aur Description ke beech space */
}

.connect-card p {
    color: var(--text-secondary);
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    margin-left: -68px;
}

/* --- Button Style --- */
.connect-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 18px;
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 2;
    margin-top: auto;
}
.connect-button:hover {
    background-color: rgba(var(--connect-glow-color-rgb), 0.1);
    border-color: rgba(var(--connect-glow-color-rgb), 0.6);
    color: rgb(var(--connect-glow-color-rgb-text));
    transform: translateY(0);
}

/* ===== SPECIFIC CARD COLORS ===== */
/* --- Telegram (Blue) --- */
.connect-card[data-glow-color="0, 136, 204"] .connect-card-icon i {
    color: #0088cc;
}
.connect-card[data-glow-color="0, 136, 204"] .connect-button {
    background-color: #0088cc;
    border-color: #0088cc;
    color: #fff;
}
/* --- YouTube (Red) --- */
.connect-card[data-glow-color="255, 0, 0"] .connect-card-icon {
    background-color: #FF0000;
}
.connect-card[data-glow-color="255, 0, 0"] .connect-card-icon i {
    color: #fff;
}
.connect-card[data-glow-color="255, 0, 0"] .connect-button {
    background-color: #FF0000;
    border-color: #FF0000;
    color: #fff;
}
/* --- X (White/Black) --- */
.connect-card[data-glow-color="200, 200, 200"] .connect-card-icon i {
    color: #e0e0e0;
}
.connect-card[data-glow-color="200, 200, 200"] .connect-button {
    background-color: #333;
    border-color: #444;
    color: #fff;
}
.connect-card[data-glow-color="200, 200, 200"] .connect-button:hover {
    background-color: #fff;
    border-color: #fff;
    color: #000;
}
/* --- Instagram (Gradient) --- */
.connect-card[data-glow-color="131, 58, 180"] .connect-card-icon i {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #C13584;
    font-size: 1.4em;
}
.connect-card[data-glow-color="131, 58, 180"] .connect-button {
    background-color: #C13584;
    border-color: #C13584;
    color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .connect-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }
}
@media (max-width: 600px) {
    .connect-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 20px;
    }
    .connect-card { padding: 20px; min-height: 0; }
    .card-main-content { gap: 15px; }
    .connect-card-icon { width: 44px; height: 44px; }
    .connect-card:hover {
        transform: translateY(-4px) rotateY(-7deg) !important;
        box-shadow: 0 0 12px 2px var(--connect-glow-shadow);
     }
}
/* ===== CONNECT STYLING END ===== */


/* ==================================================================
STYLES EXTRACTED FROM PHP FILES
==================================================================
*/

/* ==================================================================
STYLES FROM index.php
==================================================================
*/

/* ===== HEADER STYLING ===== */
.portal-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-out; border-bottom: 1px solid transparent; }
.portal-header.header-visible { opacity: 1; pointer-events: auto; }
.header-container { max-width: 1350px; margin: 10px auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; background-color: transparent; backdrop-filter: blur(0px); border-radius: 8px; border: 1px solid transparent; transition: background-color 0.4s ease-out, backdrop-filter 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out; }
.logo { flex-shrink: 0; transition: transform 0.4s ease-out; }
.logo-main { font-family: var(--font-headings); font-weight: 700; font-size: 1.6em; color: var(--text-headings); text-decoration: none; text-shadow: 0 0 12px rgba(255, 255, 255, 0.6); }
.portal-header .logo-sub { display: none; }
.header-links { display: flex; gap: 35px; flex-grow: 1; justify-content: center; margin-left: 0; margin-right: 0; }
.header-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9em; font-weight: 500; transition: color 0.3s ease; white-space: nowrap; }
.header-links a:hover { color: var(--text-primary); }
.header-button { margin-left: auto; flex-shrink: 0; }
.get-started-button { opacity: 0; transform: translateX(10px); transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s; padding: 7px 18px; font-size: 0.85em; box-shadow: none; display: inline-block; background-color: #ffffff; color: #000000; border: 1px solid #ffffff; border-radius: 4px; text-decoration: none; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0; cursor: pointer; text-transform: none; white-space: nowrap; }
.get-started-button:hover { background-color: #f0f0f0; border-color: #f0f0f0; color: #000; transform: translateY(-2px) translateX(0); box-shadow: 0 4px 10px rgba(255, 255, 255, 0.15); }
.portal-header.is-scrolled { border-bottom-color: var(--border-color); }
.portal-header.is-scrolled .header-container { background-color: var(--bg-secondary-translucent, rgba(17, 17, 17, 0.8)); backdrop-filter: blur(10px); padding: 5px 100px; margin-top: 2px; margin-bottom: 2px; }
.portal-header.is-scrolled .logo { transform: translateX(3px); }
.portal-header.is-scrolled .get-started-button { opacity: 1; transform: translateX(0); }

/* === NAYA PROFILE DROPDOWN CSS (FOR index.php) === */
.header-button {
    position: relative; /* Dropdown ke liye zaroori */
}
.profile-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #31a24c; /* Green color */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border: none;
    padding: 0;
    
    /* FIX: Set opacity and transform to default visible state */
    opacity: 1; 
    transform: translateX(0);
    transition: all 0.4s ease-out; 
}
.portal-header.is-scrolled .profile-toggle {
     opacity: 1; /* Keep this, but its purpose is minimal now */
     transform: translateX(0);
}
/* ... rest of the profile-dropdown styles ... */
.profile-dropdown {
    position: absolute;
    top: 55px; /* Header ke theek neeche */
    right: 0;
    width: 280px;
    background-color: #1c1c1c; /* Dark background */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1001;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
}
.profile-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.profile-dropdown-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}
.profile-dropdown-header .name {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.profile-dropdown-header .email {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin: 0;
    word-break: break-all;
}
.profile-dropdown-links {
    padding: 10px 0;
}
.profile-dropdown-links a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.95em;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.profile-dropdown-links a:hover {
    background-color: rgba(255,255,255,0.05);
    color: var(--text-primary);
}
.profile-dropdown-links a i {
    width: 20px;
    text-align: center;
    font-size: 1.1em;
}
.profile-dropdown-links a.logout {
    color: #ff8c8c; /* Red color */
}
.profile-dropdown-links a.logout:hover {
    background-color: rgba(255, 140, 140, 0.1);
    color: #ffabab;
}

@media (max-width: 900px) { 
    .header-links { display: none; } 
    .header-container { justify-content: space-between; padding: 12px 20px; margin: 10px auto; } 
    .portal-header.is-scrolled .header-container { padding: 8px 20px; margin-top: 5px; margin-bottom: 5px;} 
    
    body:not([data-page]) .main-container {
        padding-top: 80px; 
    }
    
    .portal-header.is-scrolled .logo { transform: translateX(0); } 
}
@media (max-width: 480px) { 
    .logo-main { font-size: 1.3em; text-shadow: none; } 
    .get-started-button { padding: 6px 12px; font-size: 0.8em;} 
    .header-container { padding: 10px 15px; } 
    .portal-header.is-scrolled .header-container { padding-top: 6px; padding-bottom: 6px;} 
}

/* ==================================================================
STYLES FROM auth.php, login.php, register_step2.php (CONSOLIDATED)
==================================================================
*/

/* === 1. No Scroll (Desktop Only) === */
/* === THIS IS THE MAIN FIX (v1.0.3) === */
/* Ab 'html,' selector ko hata diya gaya hai. Sirf body target hogi. */
@media (min-width: 901px) {
    body.client-portal-body[data-page="auth"],
    body.client-portal-body[data-page="login"],
    body.client-portal-body[data-page="register_step2"] {
        height: 100%;
        overflow: hidden; /* No scrolling on desktop */
    }
    
    /* Apply flex layout only to auth pages, not index.php */
    body[data-page="auth"] .main-container,
    body[data-page="login"] .main-container,
    body[data-page="register_step2"] .main-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: center; 
        min-height: 100vh;
        padding-top: 0; /* Override the 100px default */
    }
}
/* === END OF FIX === */


/* === 2. Static Header (Public Auth) === */
.header-public-auth {
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}
.header-public-auth .logo {
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 1.6em; 
    color: var(--text-headings);
    text-decoration: none;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6); 
}

/* === 3. Translucent Nav Box (Public Auth) === */
.nav-public-auth {
    display: flex;
    gap: 35px;
    background-color: var(--bg-secondary-translucent, rgba(17, 17, 17, 0.8));
    border: 1px solid var(--border-color);
    border-radius: 8px; 
    padding: 10px 25px;
    backdrop-filter: blur(10px);
}
.nav-public-auth a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    transition: color 0.3s ease;
}
.nav-public-auth a:hover {
    color: var(--text-primary);
}
.header-public-auth .header-actions a {
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
    transition: all 0.3s ease;
}
.header-public-auth .header-actions .login-btn {
    color: var(--text-primary);
    margin-right: 10px;
}
.header-public-auth .header-actions .login-btn:hover {
    background-color: rgba(255,255,255,0.1);
}
/* Active state for login button on login page */
body[data-page="login"] .header-public-auth .header-actions .login-btn {
     background-color: rgba(255,255,255,0.1);
}
.header-public-auth .header-actions .signup-btn {
    background-color: var(--accent-primary); /* White button */
    color: #000; /* Black text */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}
.header-public-auth .header-actions .signup-btn:hover {
    background-color: #f0f0f0;
}
/* Active state for signup button on auth page */
body[data-page="auth"] .header-public-auth .header-actions .signup-btn {
    background-color: #f0f0f0;
}


/* === 4. Form Styling (Auth Pages) === */
.auth-container {
    max-width: 650px; /* WIDER BOX */
    padding: 40px 45px 35px 45px; 
    margin: 60px auto 40px auto; 
    background-color: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--box-shadow-medium);
    text-align: center;
}
/* Specific width for login/register_step2 */
body[data-page="login"] .auth-container,
body[data-page="register_step2"] .auth-container {
    max-width: 500px;
}

.auth-container h2 {
    font-size: 1.6em; /* === FIX: SMALLER TEXT === */
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-headings);
}
.auth-container .section-subtitle {
    color: var(--text-secondary);
    font-size: 0.9em; /* === FIX: SMALLER TEXT === */
    margin-bottom: 30px; 
}
.selected-product {
    /* display is handled inline by PHP */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px 20px;
    margin-bottom: 30px;
    border-left: 3px solid var(--accent-primary); /* White theme */
    text-align: left;
}
.selected-product-title {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.selected-product h3 {
    font-size: 1.2em;
    color: var(--text-primary);
    margin: 0;
    font-weight: 600;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: left;
}
.form-group { margin-bottom: 20px; text-align: left; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-size: 0.85em; /* === FIX: SMALLER TEXT === */
    font-weight: 500;
}
.input-wrapper { position: relative; }
.input-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.9em;
}
/* Eye icons for password */
.input-wrapper i.fa-eye, .input-wrapper i.fa-eye-slash {
    left: auto;
    right: 16px;
    cursor: pointer;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 14px 16px 14px 45px;
    background-color: var(--input-bg);
    border: 1px solid #444; /* Darker border */
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1em;
    transition: all 0.3s ease;
}
.auth-form input:focus {
    outline: none;
    border-color: var(--accent-primary); /* White focus */
    background-color: var(--form-bg);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* === 5. Phone Dropdown Fix === */
.phone-group { display: flex; gap: 5px; } /* GAP ADDED */
.phone-group select {
     padding: 14px 16px;
     background-color: var(--input-bg);
     border: 1px solid #444; /* Border added */
     border-radius: 6px; /* Full radius */
     color: var(--text-primary);
     font-size: 1em;
     outline: none;
     appearance: none;
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 10px center;
     background-size: 16px;
     padding-right: 40px;
}
.phone-group select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.phone-group input {
    border-radius: 6px; /* Full radius */
    padding-left: 45px;
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    text-align: left;
}
.form-group-checkbox input { width: auto; }
.form-group-checkbox label {
    margin-bottom: 0;
    font-size: 0.85em; /* === FIX: SMALLER TEXT === */
    color: var(--text-secondary);
}
.form-group-checkbox label a {
    color: var(--accent-primary); /* White link */
    text-decoration: none;
    font-weight: 500;
}

.submit-button {
    display: inline-block; width: 100%; padding: 15px;
    background-color: var(--accent-primary); /* White button */
    color: #000; /* Black text */
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    font-weight: 600; font-size: 1.05em; cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 10px;
}
.submit-button:hover {
    background-color: #f0f0f0;
    border-color: #f0f0f0;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}
.divider {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin: 25px 0;
    position: relative;
}
.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-color: var(--border-color);
}
.divider::before { left: 0; }
.divider::after { right: 0; }
.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%; padding: 14px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid #444;
    border-radius: 6px;
    font-weight: 500; font-size: 1em; cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}
.social-button:hover { background-color: #3a3a3a; }
.signin-link {
    text-align: center;
    margin-top: 25px; 
    font-size: 0.85em; /* === FIX: SMALLER TEXT === */
    color: var(--text-secondary);
}
.signin-link a {
    color: var(--accent-primary); /* White link */
    font-weight: 600;
    text-decoration: none;
}
.back-link {
    text-align: center; margin-top: 30px;
    font-size: 0.85em; /* === FIX: SMALLER TEXT === */
    color: var(--text-secondary);
}
.back-link a {
    color: var(--accent-primary); /* White link */
    font-weight: 600; text-decoration: none;
}
.login-error {
    color: #ff8c8c; margin-top: 20px;
    height: 20px; text-align: center; font-size: 0.9em;
}


/* === 6. Mobile Responsive Fixes (Auth Pages) === */
@media (max-width: 900px) {
    .nav-public-auth {
        display: none; /* Mobile par nav links hide karein */
    }
    .header-public-auth {
        justify-content: space-between;
        padding: 20px;
        position: static; /* Mobile par header sticky na ho */
    }
    .auth-container {
        margin-top: 40px;
        margin-bottom: 40px; /* Neeche margin */
        padding: 30px 25px;
        width: 90%;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header-public-auth {
        padding: 15px 20px;
    }
    .header-public-auth .logo {
        font-size: 1.3em; /* Chhota logo */
        text-shadow: none;
    }
    .header-public-auth .header-actions a {
        padding: 6px 12px; /* Chhote buttons */
        font-size: 0.8em;
    }
    .header-public-auth .header-actions .login-btn {
        margin-right: 5px;
    }
    .auth-container {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 25px 20px;
    }
}

/* ==================================================================
STYLES FROM complete_profile.php & product_detail.php (CONSOLIDATED)
==================================================================
*/

/* === NEW RULE for Client Portal Pages === */
body[data-page="complete_profile"] .main-container,
body[data-page="product_detail"] .main-container,
body[data-page="thank_you"] .main-container {
    padding-top: 0;
}


/* === Header (Client Portal) === */
.header-client-portal {
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--bg-secondary-translucent, rgba(17, 17, 17, 0.8));
    backdrop-filter: blur(10px);
}
.auth-header-left { flex: 1; display: flex; justify-content: flex-start; }
.auth-header-center { flex: 1; display: flex; justify-content: center; }
.auth-header-right { 
    flex: 1; 
    display: flex; 
    justify-content: flex-end; 
    position: relative; /* Dropdown ke liye zaroori */
}
.header-client-portal .logo {
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 1.6em; 
    color: var(--text-headings);
    text-decoration: none;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6); 
}
.nav-client-portal {
    display: flex;
    gap: 35px;
    background-color: var(--bg-secondary-translucent, rgba(17, 17, 17, 0.8));
    border: 1px solid var(--border-color);
    border-radius: 8px; 
    padding: 10px 25px;
    backdrop-filter: blur(10px);
}
.nav-client-portal a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    transition: color 0.3s ease;
}
.nav-client-portal a:hover { color: var(--text-primary); }

/* === Profile Dropdown (Shared by index.php and client portal) === */
/* Styles are already defined in the index.php section above */


/* === Profile Form Styling === */
.profile-container {
    width: 100%;
    max-width: 650px; /* === FIX: Box ko narrow kiya === */
    padding: 35px 45px;
    margin: 60px auto; 
    background-color: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--box-shadow-medium);
    text-align: left;
}
.profile-container h1 {
    font-size: 1.8em; /* === FIX: Chhota Text === */
    font-weight: 600;
    color: var(--text-headings);
    margin-bottom: 5px;
}
.profile-container h2 {
    font-size: 1.1em; /* === FIX: Chhota Text === */
    font-weight: 600;
    color: var(--text-headings);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
}
.profile-container p {
    color: var(--text-secondary);
    font-size: 0.95em; /* === FIX: Chhota Text === */
    margin-bottom: 25px;
}

/* Re-using .form-grid from auth pages */
.profile-container .form-group { margin-bottom: 20px; }
.profile-container .form-group.full-width { grid-column: 1 / -1; }
.profile-container .form-group label {
    display: block;
    color: var(--text-primary); 
    margin-bottom: 8px;
    font-size: 0.95em;
    font-weight: 500;
}
.profile-container .form-group p.description {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 5px;
    margin-bottom: 0;
}
.profile-container .input-wrapper input[type="text"],
.profile-container .input-wrapper input[type="email"],
.profile-container .input-wrapper input[type="tel"] {
    width: 100%;
    padding: 14px 16px; 
    background-color: var(--input-bg);
    border: 1px solid #444;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1em;
    transition: all 0.3s ease;
}
.profile-container .input-wrapper input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background-color: var(--form-bg);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.profile-container .input-wrapper input:disabled {
    background-color: #222;
    color: var(--text-secondary);
    cursor: not-allowed;
}
/* Re-using .phone-group from auth pages */
.profile-container .phone-group select {
     padding: 14px 16px;
     background-color: var(--input-bg);
     border: 1px solid #444; 
     border-radius: 6px; 
     color: var(--text-primary);
     font-size: 1em;
     outline: none;
     appearance: none;
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 10px center;
     background-size: 16px;
     padding-right: 40px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 30px;
    border-top: 1px solid var(--border-color);
    padding-top: 25px;
}
.form-actions p {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 0;
    margin-right: auto;
}
.save-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--accent-primary);
    color: #000;
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.25s ease;
}
.save-button:hover {
    background-color: #f0f0f0;
    border-color: #f0f0f0;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

@media (max-width: 900px) {
    .nav-client-portal { display: none; }
    .header-client-portal { padding: 20px; }
    .profile-container { margin: 30px auto; width: 90%; }
}
@media (max-width: 600px) {
    .profile-container .form-grid {
         grid-template-columns: 1fr; /* Mobile par hamesha stack */
    }
     .profile-container {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 25px 20px;
    }
}

/* ==================================================================
STYLES FROM product_detail.php
==================================================================
*/
.detail-container {
    max-width: 900px;
    margin: 60px auto;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--box-shadow-medium);
    overflow: hidden; 
}
.detail-header {
    padding: 40px 50px;
    background-color: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--border-color);
}
.detail-header h1 {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--text-headings);
    margin-bottom: 5px;
}
.detail-header .version {
    font-size: 1.2em; color: var(--accent-primary); /* White */
    font-weight: 500;
}
.detail-body {
    padding: 40px 50px;
}
.detail-body h3 {
    font-size: 1.4em;
    color: var(--accent-primary); /* White */
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.detail-body p {
    color: var(--text-secondary);
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 30px;
}
.feature-list {
    list-style: none;
    margin-bottom: 30px;
}
.feature-list li {
    position: relative;
    padding-left: 30px;
    color: var(--text-primary);
    font-size: 1.05em;
    margin-bottom: 15px;
}
.feature-list li::before {
    content: '✓'; /* Checkmark */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-primary); /* White */
    font-weight: 700;
}

.purchase-section {
    text-align: center;
    padding: 30px;
    background-color: rgba(0,0,0,0.2);
    border-top: 1px solid var(--border-color);
}
.purchase-section .price {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--accent-secondary); /* Original orange price */
    margin-bottom: 20px;
}
.purchase-button {
    display: inline-block; padding: 15px 40px;
    background-color: var(--accent-primary); /* White button */
    color: #000; /* Black text */
    border: 1px solid var(--accent-primary); border-radius: 6px;
    font-weight: 600; font-size: 1.1em; cursor: pointer;
    transition: all 0.25s ease; text-decoration: none;
}
.purchase-button:hover {
    background-color: #f0f0f0; /* Lighter white */
    border-color: #f0f0f0;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

@media (max-width: 900px) {
    .detail-container { margin: 30px auto; width: 90%; }
}


/* ==================================================================
STYLES FROM request_received.php
==================================================================
*/
.thank-you-section {
    text-align: center; padding: 100px 20px 120px 20px;
    max-width: 650px; margin: 60px auto;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: var(--box-shadow-medium);
}
.thank-you-section h1 {
    font-family: var(--font-headings); font-size: 2.2em;
    color: var(--text-headings); margin-bottom: 25px;
}
.thank-you-section p {
    color: var(--text-secondary); margin: 0 auto 35px auto;
    font-size: 1.1em; line-height: 1.8;
}
.back-home-button {
    display: inline-block; padding: 12px 35px;
    background-color: var(--accent-gold); color: #000;
    border: 1px solid var(--accent-gold); border-radius: 4px;
    text-decoration: none; font-weight: 600;
    transition: all 0.25s ease; font-size: 1em;
}
.back-home-button:hover {
    background-color: #f0c300; transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(252, 213, 53, 0.15);
}
.icon-box {
    font-size: 1.5rem;
    margin-bottom: 12px;
    /* Purple Tint Background */
    background: rgba(108, 93, 211, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    /* 🔥 Purple Color */
    color: #6C5DD3; 
    border: 1px solid rgba(108, 93, 211, 0.2);
    box-shadow: 0 0 10px rgba(108, 93, 211, 0.1);
    transition: all 0.3s ease;
}

.feature-card:hover .icon-box {
    background: rgba(108, 93, 211, 0.2);
    box-shadow: 0 0 20px rgba(108, 93, 211, 0.5); /* Purple Glow */
    transform: scale(1.1);
    color: #fff;
    border-color: #6C5DD3;
}
/* =========================================
   🔥 ULTIMATE ALGO CARD (Final Smooth 3D + New Pricing)
   ========================================= */

/* 1. Base Card Styling */
.pricing-card.algo-card {
    background-color: rgba(15, 15, 19, 0.6); /* Dark Glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px 25px;
    
    /* 🔥 PHYSICS ENGINE (Smooth 0.1s Delay) */
    transform-style: preserve-3d;
    /* Ye line zaroori hai JS ke sath smooth chalne ke liye */
    transition: transform 0.1s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
    
    /* Glow */
    box-shadow: 0 0 15px 3px rgba(108, 93, 211, 0.15); /* Purple soft glow */
    
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left !important;
}

/* 2. Hover Effects */
.pricing-card.algo-card:hover {
    border-color: rgba(108, 93, 211, 0.5); /* Purple Border */
    box-shadow: 0 6px 25px 5px rgba(108, 93, 211, 0.35); /* Stronger Glow */
    z-index: 10;
    /* Transform JS handle karega */
}

/* 3. Pop-Out Elements (3D Depth) */
.pricing-card.algo-card > * {
    transform: translateZ(20px); 
}

/* Important items ko aur ubhara hua dikhayein */
.algo-main-price, .discount-badge, .btn-glow, .algo-header-row {
    transform: translateZ(35px); 
}

/* =========================================
   💰 PRICING TEXT DESIGN (Launch Price Layout)
   ========================================= */

.discount-badge {
    position: absolute;
    top: 15px; right: 15px;
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
}

.launch-label {
    display: block; font-size: 0.85rem; color: #888;
    margin-bottom: 2px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
}

.algo-main-price {
    font-size: 2.2rem; font-weight: 700; color: #fff; line-height: 1.1; margin-right: 5px;
}

.algo-savings-row {
    font-size: 0.9rem; margin-top: 5px; display: flex; gap: 8px; align-items: center;
}

.old-price { text-decoration: line-through; color: #666; }
.save-text { color: #00ff88; font-weight: 600; }

/* Icon Box inside Algo Card (Agar use ho raha ho) */
.algo-icon {
    font-size: 2rem; color: #6C5DD3;
    margin-left: 10px;
    filter: drop-shadow(0 0 10px rgba(108, 93, 211, 0.4));
    transform: translateZ(25px);
}

/* --- HEADER ROW (Aligned to Baseline) --- */
.algo-header-row {
    margin-bottom: 15px;
    display: flex;
    align-items: baseline; /* 🔥 IMPORTANT: Ye text ki neev (base) pakad lega */
}

/* Heading Style */
.algo-header-row h3 {
    margin: 0;
    font-size: 1.6rem; 
    color: #fff;
    font-weight: 700;
    
    display: inline-flex;
    align-items: baseline; /* 🔥 IMPORTANT: Text aur Badge ka base same hoga */
}

/* --- BASE BADGE STYLE --- */
.version-sup-badge {
    font-size: 0.55rem; 
    color: #6C5DD3;
    background: rgba(108, 93, 211, 0.15);
    border: 1px solid rgba(108, 93, 211, 0.3);
    padding: 2px 5px; 
    border-radius: 4px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px; /* Thoda pass laye */
    box-shadow: 0 0 5px rgba(108, 93, 211, 0.15);
    position: relative;
}

/* --- 🔥 DYNAMIC GAPS (Magic Logic) --- */

/* --- 🔥 DYNAMIC GAPS (Higher Lift) --- */

/* Case 1: Chote Letters (o, r, a, e...) */
/* Example: Cygnus Pro, Cygnus Scalper */
.version-sup-badge.gap-normal {
    /* Pehle -13px tha, ab aur upar */
    transform: translateY(-16px); 
}

/* Case 2: Lambe Letters (d, l, h, t...) */
/* Example: Cygnus Standard */
.version-sup-badge.gap-tall {
    /* Pehle -19px tha, ab aur upar taaki 'd' se clear rahe */
    transform: translateY(-22px); 
}
/* --- 🔥 LAUNCH OFFER BADGE (Fire Glow Style) --- */
.launch-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Icon aur text ke beech gap */
    
    /* Background & Border (Orange/Fire Theme) */
    background: rgba(255, 69, 0, 0.08); 
    border: 1px solid rgba(255, 94, 0, 0.4);
    
    /* Text Style */
    color: #ff9e42; /* Orange Gold Text */
    padding: 10px 25px;
    border-radius: 50px; /* Pill Shape */
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 15px; /* Heading se gap */
    
    /* 🔥 The Glow Effect */
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.2), inset 0 0 10px rgba(255, 69, 0, 0.05);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Hover Animation */
.launch-offer-badge:hover {
    box-shadow: 0 0 35px rgba(255, 69, 0, 0.6); /* Thoda aur bright kiya */
    
    /* 🔥 CHANGE: 'scale(1.05)' add kiya taaki bada ho */
    transform: translateY(-2px) scale(1.05); 
    
    border-color: #ffbe76;
    color: #fff;
    cursor: pointer; /* Mouse hand ban jayega */
}

/* Fire Icon Color */
.launch-offer-badge i {
    color: #ff4757; /* Deep Red/Orange Fire */
    font-size: 1.1rem;
    animation: flicker 1.5s infinite alternate;
}

/* Fire Flicker Animation */
@keyframes flicker {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(1.1); }
}
/* --- FIX: Force Heading and Badge to Stack Vertically --- */
.products-section .section-header {
    display: flex;
    flex-direction: column; /* Upar se neeche */
    align-items: center;    /* Center align */
    justify-content: center;
    gap: 15px; /* Heading aur Badge ke beech gap */
}
/* --- 🏆 MOST POPULAR BADGE (Center Fix) --- */
.popular-badge {
    position: absolute;
    top: -14px;
    
    /* 🔥 CENTER FIX LOGIC */
    left: 0;
    right: 0;
    margin: 0 auto; /* Ye badge ko beech mein kheech layega */
    width: fit-content; /* Box utna hi bada hoga jitna text hai */
    
    /* 3D Lift */
    transform: translateZ(40px);
    
    /* Design */
    background: linear-gradient(90deg, #6C5DD3, #4E3CC3);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(108, 93, 211, 0.6);
    z-index: 20;
}
/* --- 🏆 POPULAR CARD BORDER RING (Thinner & Sleek) --- */
.pricing-card.algo-card.is-popular {
    /* 🔥 CHANGE: 2px se 1px kar diya (Sleek Look) */
    border: 1px solid #6C5DD3 !important; 
    
    /* Glow waisa hi rakha hai taaki chamke */
    box-shadow: 0 0 25px rgba(108, 93, 211, 0.4), inset 0 0 10px rgba(108, 93, 211, 0.1) !important;
    
    z-index: 5;
    position: relative;
}

/* Hover par bhi border patla hi rahega */
.pricing-card.algo-card.is-popular:hover {
    box-shadow: 0 0 40px rgba(108, 93, 211, 0.6), inset 0 0 20px rgba(108, 93, 211, 0.2) !important;
    border-color: #8c7ae6 !important; 
}
/* ==============================================
   🔥 FIX: HEADING GLOW & BADGE CLIPPING ISSUE
   ============================================== */

/* 1. Section Header ko khula chodenge taaki kuch kate na */
.products-section .section-header {
    overflow: visible !important;
}

/* 2. Heading Text (Our Automated Algorithms) ko sabse upar rakhenge */
.products-section h2 {
    position: relative;
    z-index: 50; /* Ye sabse upar rahega */
}

/* 3. Badge ko Heading ke neeche layer mein rakhenge */
.launch-offer-badge {
    position: relative;
    z-index: 10; /* Ye text ke peeche rahega agar overlap hua toh */
}
/* --- 🎁 3D ICON STYLING (Lifted Up) --- */
.gift-box-anim {
    width: 29px;
    height: 29px;
    margin-right: 10px;
    
    /* 🔥 FIX: 'margin-bottom' hataya aur 'translateY' se upar uthaya */
    /* -3px ka matlab: Apni jagah se 3 pixel upar */
    transform: translateY(-4.5px); 
    
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- 🔥 HOVER EFFECT (Lift + Zoom) --- */
.launch-offer-badge:hover .gift-box-anim {
    /* 🔥 IMPORTANT: Hover par bhi usse upar rakhna zaroori hai */
    /* -3px upar hi rahega + 1.2x bada hoga */
    transform: translateY(-4.5px) scale(1.2); 
}

/* --- ⚡ KEYFRAMES (Hilne ka style) --- */
@keyframes gift-shake {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(1.1) rotate(-3deg); }
    30%, 50%, 70% { transform: scale(1.1) rotate(3deg); }
    40%, 60% { transform: scale(1.1) rotate(-3deg); }
    80% { transform: scale(1.1) rotate(0); }
    100% { transform: scale(1); }
}
/* =========================================
   📊 NEW DETAILED STATS (PropQuant Style)
   ========================================= */

/* 1. The 4-Box Grid */
.stats-box-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columns */
    gap: 12px;
    margin-top: 25px;
    margin-bottom: 20px;
}

.stat-item {
    background: rgba(0, 0, 0, 0.25); /* Darker Inner Box */
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Label Styling */
.stat-item .lbl {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.stat-item .lbl i { color: #555; } /* Icon dim color */

/* Value Styling */
.stat-item .val {
    font-size: 0.95rem;
    font-weight: 600;
    color: #eee;
}

/* 2. Equity Curve Section */
.equity-curve-box {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.curve-label {
    display: block;
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}
.curve-label::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: #00ff88;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px #00ff88;
}

/* 3. SVG Graph Styling */
.curve-svg {
    width: 100%;
    height: 50px;
    overflow: visible;
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.2));
}

/* BTC Card Special Color */
.result-card.featured .stat-item .val.text-green { color: #6C5DD3; text-shadow: 0 0 8px rgba(108, 93, 211, 0.4); }
.result-card.featured .curve-label::before { background: #6C5DD3; box-shadow: 0 0 5px #6C5DD3; }
/* =========================================
   🔄 3D CAROUSEL STYLES (Wider & Taller Fix)
   ========================================= */

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1300px; /* Container ko thoda aur khula kiya */
    height: 750px; /* 🔥 FIX: Height badhai taaki upar/neeche se kate na */
    margin: 20px auto 0;
    perspective: 1200px; /* Depth thodi badhai */
    overflow: hidden; /* Ab height badi hai toh katega nahi */
}

/* Track container */
.results-track {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* =========================================
   🔥 FORCE FIX: PREMIUM GLASS LOOK (Transparent)
   ========================================= */

/* --- 🃏 CARD BASE STYLE --- */
.result-card {
    position: absolute;
    width: 400px; 
    top: 50%;
    left: 50%;
    
    /* Default State */
    transform: translate(-50%, -50%) scale(0.5); 
    opacity: 0;
    z-index: 0;
    
    /* 🔥 GLASS EFFECT MAGIC HERE */
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(255, 255, 255, 0.01) 100%
    ) !important;
    
    /* Blur Effect (Peeche ka dhundhla dikhega) */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Glass Borders (Top-Left shiny, Bottom-Right dim) */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Shine on top edge */
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* Shine on left edge */
    
    border-radius: 24px;
    padding: 35px;
    
    /* Deep Shadow for 3D Lift */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

/* --- 🎯 CARD POSITIONS --- */

/* 1. ACTIVE (Center - Thoda zyada solid aur glow) */
.result-card.active {
    opacity: 1;
    z-index: 10;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1.05); 
    
    /* Active state me border thoda bright */
    border-color: rgba(108, 93, 211, 0.4);
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 50px rgba(108, 93, 211, 0.15);
}

/* 2. PREV (Left) */
.result-card.prev {
    opacity: 0.3; /* Thoda transparent taaki focus center par rahe */
    z-index: 5;
    pointer-events: all;
    cursor: pointer;
    transform: translate(calc(-50% - 480px), -50%) scale(0.85) rotateY(25deg);
    filter: blur(2px); /* Door wale thode dhundhle */
}

/* 3. NEXT (Right) */
.result-card.next {
    opacity: 0.3;
    z-index: 5;
    pointer-events: all;
    cursor: pointer;
    transform: translate(calc(-50% + 480px), -50%) scale(0.85) rotateY(-25deg);
    filter: blur(2px);
}

/* --- 🏹 ARROWS (Centered) --- */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px; height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 20;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.nav-arrow:hover { 
    background: #6C5DD3; 
    border-color: #6C5DD3; 
    box-shadow: 0 0 25px rgba(108, 93, 211, 0.6); 
}
.prev-btn { left: 40px; }
.next-btn { right: 40px; }

/* --- 📱 MOBILE RESPONSIVE FIX --- */
@media (max-width: 900px) {
    .carousel-container { height: 650px; }
    
    /* Mobile par card wapis chota karo warna screen se bahar jayega */
    .result-card { width: 320px; padding: 25px; }
    
    .result-card.prev { 
        transform: translate(calc(-50% - 340px), -50%) scale(0.8); 
    }
    .result-card.next { 
        transform: translate(calc(-50% + 340px), -50%) scale(0.8); 
    }
}

@media (max-width: 600px) {
    .nav-arrow { display: none; }
    /* Mobile pe sirf active dikhao */
    .result-card.prev, .result-card.next { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

/* --- 📊 EXISTING INNER STYLES (Keep as is) --- */
.card-top { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
.pair-info { display: flex; align-items: center; gap: 12px; }
.pair-info .icon { font-size: 1.8rem; }
.pair-info h4 { margin: 0; font-size: 1.2rem; color: #fff; font-weight: 700; }
.pair-info small { color: #888; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
.badge.success { background: rgba(0, 255, 136, 0.15); color: #00ff88; padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; border: 1px solid rgba(0, 255, 136, 0.2); }
.circle-chart { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20px 0; position: relative; }
.circle-chart .percentage { font-size: 2.2rem; font-weight: 700; color: #fff; text-shadow: 0 0 15px rgba(108, 93, 211, 0.4); }
.circle-chart .label { font-size: 0.75rem; color: #888; text-transform: uppercase; margin-top: 5px; letter-spacing: 2px; }
.stats-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.stat-item { background: rgba(0, 0, 0, 0.2); padding: 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); }
.lbl { font-size: 0.7rem; color: #888; display: block; text-transform: uppercase; margin-bottom: 4px; }
.val { font-size: 1rem; font-weight: 600; color: #fff; }
.text-green { color: #00ff88; } .text-orange { color: #ffaa00; }
.equity-curve-box { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.08); position: relative; cursor: crosshair; }
.graph-tooltip { position: absolute; top: -40px; left: 50%; transform: translateX(-50%) translateY(10px); background: #6C5DD3; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; opacity: 0; transition: all 0.3s ease; white-space: nowrap; box-shadow: 0 5px 15px rgba(0,0,0,0.3); pointer-events: none; z-index: 20; }
.graph-tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-width: 5px 5px 0; border-style: solid; border-color: #6C5DD3 transparent transparent transparent; }
.equity-curve-box:hover .graph-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
.equity-curve-box:hover .curve-svg path { filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.6)); }
.curve-svg { width: 100%; height: 50px; overflow: visible; }
/* =========================================
   🔥 FORCE FIX: BOX UP, ARROW DOWN
   ========================================= */

.result-card .badge.success {
    background: rgba(0, 255, 136, 0.08) !important;
    color: #00ff88 !important;
    border: 1px solid rgba(0, 255, 136, 0.15) !important;

    /* Shape */
    border-radius: 50px !important;
    font-weight: 800 !important;

    /* Flex & Alignment */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px; 

    /* Size */
    padding: 5px 14px !important;
    font-size: 0.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;

    /* 🔥 1. POORA BOX UPAR KIYA (-5px) */
    transform: translateY(-10px) !important; 
    margin-top: 0 !important;

    line-height: 1 !important;
    white-space: nowrap; 
}

/* 🔥 2. SIRF ARROW ICON KO NEECHE KIYA */
.result-card .badge.success i {
    font-size: 0.7rem !important;
    position: relative;
    /* Arrow text ke mukable thoda neeche lagega */
    top: 1px !important; 
}
/* =========================================
   🔥 FORCE FIX: SMALLER SUBTITLE (Backtest Results)
   ========================================= */

.pair-info small { 
    font-size: 0.6rem !important; /* Size chota kiya */
    text-transform: uppercase !important; /* Capital letters for clean look */
    letter-spacing: 1px !important; /* Thoda spacing diya */
    opacity: 0.7 !important; /* Thoda dim kiya taaki main heading highlight ho */
    font-weight: 600 !important;
    margin-top: 2px !important;
    display: block !important;
}
/* =========================================
   🔥 PREMIUM STATS BOX – V2 (ELITE LOOK)
   ========================================= */

/* Grid Layout */
.stats-box-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 22px 0 28px;
}

/* Individual Box */
.stat-item {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.015)
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;

    display: flex;
    flex-direction: column;
    justify-content: center;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    position: relative;
    overflow: hidden;

    transition: all 0.35s ease !important;
}

/* Soft Inner Highlight */
.stat-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.08),
        transparent 60%
    );
    opacity: 0.4;
    pointer-events: none;
}

/* Hover Effect */
.stat-item:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* Label */
.stat-item .lbl {
    font-size: 0.62rem !important;
    color: #9a9a9a !important;
    text-transform: uppercase !important;
    letter-spacing: 1.8px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;

    display: flex;
    align-items: center;
    gap: 7px;
}

/* Label Icon */
.stat-item .lbl i {
    font-size: 0.85rem !important;
    color: rgba(255,255,255,0.5) !important;
}

/* Main Value */
.stat-item .val {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    letter-spacing: 0.4px !important;
}

/* Profit Green */
.stat-item .val.text-green {
    color: #00ff9c !important;
    text-shadow: 0 0 14px rgba(0, 255, 156, 0.35);
}

/* Drawdown Orange */
.stat-item .val.text-orange {
    color: #ffb020 !important;
    text-shadow: 0 0 10px rgba(255, 176, 32, 0.25);
}

/* Percentage Pill */
.sub-val {
    margin-top: 6px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;

    padding: 4px 10px;
    border-radius: 999px;

    background: linear-gradient(
        135deg,
        rgba(0,255,156,0.25),
        rgba(0,255,156,0.08)
    );

    color: #00ff9c;
    box-shadow: inset 0 0 0 1px rgba(0,255,156,0.25);
    width: fit-content;
}
/* =========================================
   🔥 FORCE FIX: PERFECT STATS ALIGNMENT
   ========================================= */

.stat-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    
    /* Flexbox Settings */
    display: flex;
    flex-direction: column;
    
    /* 🔥 FIX: Center hata kar 'flex-start' kiya */
    /* Isse sab kuch upar se shuru hoga, alignment same rahegi */
    justify-content: flex-start !important; 
    
    /* 🔥 FIX: Fixed Height di taaki boxes barabar dikhein */
    min-height: 85px !important; 
    
    transition: background 0.3s ease;
}

/* Label Styling */
.stat-item .lbl {
    font-size: 0.65rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    
    /* Consistent Gap below Label */
    margin-bottom: 8px !important; 
}

/* Value Styling */
.stat-item .val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    line-height: 1; /* Tight line height for alignment */
}

/* Percentage Pill (Profit Box Only) */
.sub-val {
    font-size: 0.65rem;
    font-weight: 600;
    margin-top: 6px !important; /* Value se thoda neeche */
    display: block;
    width: fit-content;
    background: rgba(0, 255, 136, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}
/* =========================================
   ⭕ CIRCLE SIZE ADJUSTMENT
   ========================================= */

.circle-chart {
    position: relative;
    
    /* 🔥 SIZE BADHAYA: 140px se 170px kar diya */
    width: 170px !important;  
    height: 170px !important;
    
    margin: 10px auto 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* SVG Ko Sahi Jagah Set Krna */
.progress-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Top se start ho */
}

/* Peeche wala Grey Circle */
.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05); /* Halka Grey */
    stroke-width: 6;
}

/* Aage wala Colored Circle */
.ring-progress {
    fill: none;
    stroke: #00ff88; /* Default Green */
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 251;
    transition: stroke-dashoffset 1s ease-in-out;
    filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.4));
}

/* Featured Card (Purple Circle) */
.result-card.featured .ring-progress {
    stroke: #6C5DD3;
    filter: drop-shadow(0 0 6px rgba(108, 93, 211, 0.4));
}

/* Text Positioning Fix */
.circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 2;
}

.circle-chart .percentage {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    display: block;
    line-height: 1;
}

.circle-chart .label {
    font-size: 0.65rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-top: 5px;
    display: block;
}
/* =========================================
   🔥 FIX: CAROUSEL CUTTING ISSUE
   ========================================= */

.carousel-container {
    /* Upar aur neeche extra jagah di taaki bada hone par kate nahi */
    padding-top: 80px !important;   
    padding-bottom: 100px !important; 
    
    /* Container ki height ensure ki */
    min-height: 650px !important; 
    
    /* Agar shadow abhi bhi cut rahi ho toh isse visible karein */
    overflow: visible !important; 
}

/* Section ko bhi thoda khula kiya */
.products-section {
    overflow: visible !important;
    padding-bottom: 80px !important;
}

/* Card ki position ko thoda adjust kiya taaki center mein rahe */
.results-track {
    height: 100% !important;
    min-height: 600px !important;
    display: flex;
    align-items: center;
}
/* =========================================
   🔥 FIX: EQUITY CURVE FOOTER (Left-Right Spacing)
   ========================================= */

.curve-footer {
    display: flex !important;
    justify-content: space-between !important; /* Start Left, End Right */
    align-items: center !important;
    width: 100% !important;
    
    /* Thoda spacing aur safai */
    margin-top: 8px !important;
    padding: 0 5px !important; /* Thoda sa andar spacing */
}

/* Font Styling (Optional: Agar text style karna ho) */
.curve-footer span {
    font-size: 0.75rem !important;
    color: #888 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}
/* =========================================
   🔥 SMOOTH ACCORDION (FAQ)
   ========================================= */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: #0f0f13;
    border-radius: 12px;
    border: 1px solid #1f1f25;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Question Button */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    text-align: left;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

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

/* Icon Rotation */
.faq-question .icon {
    color: #6C5DD3;
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

/* Active State (JS will add this class) */
.faq-item.active .faq-question .icon {
    transform: rotate(45deg); /* Plus turns to Cross */
    color: #ff4757;
}

.faq-item.active {
    border-color: rgba(108, 93, 211, 0.4);
    background: #14141a;
}

/* 🔥 ANIMATION LOGIC: Max-Height Trick */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-inner {
    padding: 0 24px 24px 24px;
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.6;
    border-top: 1px solid transparent;
}

.faq-item.active .faq-content {
    /* JS will set exact height via style, max-height acts as safety */
    max-height: 500px; 
}

.faq-item.active .faq-inner {
    border-top-color: rgba(255, 255, 255, 0.05);
    padding-top: 15px;
}
/* =========================================
   🔥 FINAL FIX: REMOVE ALL EXTRA LINES IN FAQ
   ========================================= */

/* 1. Paragraph ke upar ki line hatayi */
.faq-item p, 
.faq-inner p {
    border-top: none !important; 
    border-bottom: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* =========================================
   🔥 REMOVE HEADER BORDER LINE
   ========================================= */

.portal-header {
    border-bottom: none !important;
    box-shadow: none !important; /* Agar shadow ki wajah se line lag rahi ho to wo bhi hat jayegi */
}

/* Scroll hone par bhi line na aaye */
.portal-header.is-scrolled {
    border-bottom: none !important;
}
/* =========================================
   🔥 COMPACT BACKTEST CARDS (Small Size Fix)
   ========================================= */

/* 1. Card ka size aur padding kam karein */
.result-card {
    padding: 20px !important;       /* Pehle se kam padding */
    max-width: 350px !important;    /* Width fix kardi taaki fail na jaye */
    width: 95% !important;          /* Mobile pe screen se bahar na jaye */
    margin: 0 auto;                 /* Center alignment */
    border-radius: 16px !important; /* Thoda radius adjust */
}

/* 2. Beech wala Gola (Circle Chart) chota karein */
.result-card .circle-chart {
    width: 130px !important;        /* 130px se 100px */
    height: 130px !important;       /* 130px se 100px */
    margin: 15px auto !important;   /* Gap kam kiya */
    border-width: 2px !important;   /* Border patla kiya */
}

/* 3. Text aur Numbers ka size adjust karein */
.result-card .circle-chart .percentage {
    font-size: 1.4rem !important;   /* Font chota kiya */
}

.result-card .stat-item .val {
    font-size: 0.95rem !important;  /* Stats number chota */
}

.result-card .stat-item .lbl {
    font-size: 0.7rem !important;   /* Label chota */
    margin-bottom: 2px !important;
}

.result-card .card-top h4 {
    font-size: 1rem !important;     /* Heading choti */
}

/* 4. Equity Graph ko fit karein */
.result-card .equity-curve-box {
    margin-top: 15px !important;
    padding-top: 10px !important;
}
/* --- Professional CSS Chart Styling --- */
.css-chart-container {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(2, 6, 23, 0.9) 100%);
    border: 1px solid rgba(148, 163, 253, 0.2);
    border-radius: 12px;
    padding: 0;
    position: relative;
    height: 160px; /* Fixed height for consistency */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.css-chart-header {
    padding: 10px 14px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Share Tech Mono', monospace;
    z-index: 2;
}

.css-chart-header .pair {
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.css-chart-header .timeframe {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
}

.css-chart-header .pnl {
    font-weight: bold;
    font-size: 0.9rem;
}

.css-chart-header .pnl.positive {
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.css-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
    margin-top: -10px; /* Pull chart up slightly */
}

/* Optional: Scanline effect for pro look */
.css-chart-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.2) 51%);
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.3;
}
/* =========================================
   🚨 PANIC BUTTON STYLES (STEP 4)
   ========================================= */

.panic-btn-trigger {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid #dc2626;
    color: #ff4d4d;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    display: none; /* JS will show this when account active */
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    animation: pulse-red 2s infinite;
    font-weight: 700;
    letter-spacing: 1px;
}

.panic-btn-trigger:hover {
    background: #dc2626;
    color: white;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
    transform: translateY(-1px);
}

.panic-btn-trigger i {
    font-size: 0.9rem;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
/* 🔴 Red Breathing Glow for the Card */
@keyframes breathingRed {
    0% { box-shadow: 0 0 10px rgba(220, 38, 38, 0.5); border-color: #dc2626; }
    50% { box-shadow: 0 0 25px rgba(220, 38, 38, 0.9); border-color: #ff4d4d; }
    100% { box-shadow: 0 0 10px rgba(220, 38, 38, 0.5); border-color: #dc2626; }
}

.emergency-active-card {
    animation: breathingRed 2s infinite;
    border: 2px solid #dc2626 !important;
}

/* ⚠️ Emergency Active Text */
.emergency-status-text {
    color: #ff4d4d;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin-top: 15px;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
}

/* 🔓 Release Button */
.release-btn {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    color: #10b981;
    padding: 10px 20px;
    width: 100%;
    margin-top: 10px;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.release-btn:hover {
    background: #10b981;
    color: #000;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}