:root {
    --primary: #6C5CE7;
    --primary-dark: #5A4BD1;
    --primary-light: #F0EDFF;
    --primary-50: #F5F3FF;
    --primary-100: #EDE9FE;
    --primary-200: #DDD6FE;
    --primary-600: #7C3AED;
    --secondary: #0D1B2A;
    --accent: #FF6B35;
    --accent-light: #FFF0E8;
    --accent-dark: #E55A2B;
    --success: #00C9A7;
    --success-light: #E6FBF5;
    --danger: #FF4757;
    --warning: #FFB845;
    --info: #339AF0;
    --dark: #0D1B2A;
    --dark-800: #1B2838;
    --light: #F8F9FC;
    --white: #FFFFFF;
    --gray-50: #F8F9FC;
    --gray-100: #F1F3F8;
    --gray-200: #E2E6EF;
    --gray-300: #CBD1DE;
    --gray-400: #9BA3B5;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.16);
    --shadow-glow: 0 0 40px rgba(108,92,231,0.15);
    --shadow-accent: 0 8px 32px rgba(255,107,53,0.25);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:15px;line-height:1.7;color:var(--gray-700);background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-dark)}
h1,h2,h3,h4,h5,h6{font-family:var(--font);font-weight:700;color:var(--dark);line-height:1.25}
img{max-width:100%;height:auto}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatSlow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(108,92,231,0.3)}50%{box-shadow:0 0 40px rgba(108,92,231,0.5)}}
@keyframes slideIn{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
@keyframes typewriter{from{width:0}to{width:100%}}
@keyframes blink{0%,100%{border-color:transparent}50%{border-color:var(--accent)}}
@keyframes countUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes morph{0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}}
@keyframes orbit{0%{transform:rotate(0deg) translateX(150px) rotate(0deg)}100%{transform:rotate(360deg) translateX(150px) rotate(-360deg)}}
@keyframes dash{to{stroke-dashoffset:0}}

.animate-fadeInUp{animation:fadeInUp 0.7s ease-out forwards}
.animate-fadeInLeft{animation:fadeInLeft 0.7s ease-out forwards}
.animate-fadeInRight{animation:fadeInRight 0.7s ease-out forwards}
.animate-scaleIn{animation:scaleIn 0.6s ease-out forwards}
.delay-1{animation-delay:0.1s;opacity:0}
.delay-2{animation-delay:0.2s;opacity:0}
.delay-3{animation-delay:0.3s;opacity:0}
.delay-4{animation-delay:0.4s;opacity:0}
.delay-5{animation-delay:0.5s;opacity:0}
.delay-6{animation-delay:0.6s;opacity:0}

/* ========== NAVBAR ========== */
.navbar{padding:0.75rem 0;background:rgba(255,255,255,0.92)!important;backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(0,0,0,0.04);transition:var(--transition);box-shadow:none}
.navbar.scrolled{box-shadow:0 4px 30px rgba(0,0,0,0.06);padding:0.6rem 0}
.navbar-brand{font-weight:800;font-size:1.5rem;color:var(--primary)!important;letter-spacing:-0.5px;display:flex;align-items:center;gap:0.5rem}
.navbar-brand span{color:var(--dark)}
.nav-link{font-weight:500;color:var(--gray-600)!important;padding:0.5rem 1.1rem!important;font-size:0.92rem;transition:var(--transition);position:relative;border-radius:var(--radius-sm)}
.nav-link:hover,.nav-link.active{color:var(--primary)!important;background:var(--primary-50)}
.nav-link::after{display:none}
.nav-icons{display:flex;align-items:center;gap:0.5rem}
.nav-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gray-600);transition:var(--transition);background:transparent}
.nav-icon:hover{background:var(--primary-50);color:var(--primary);transform:translateY(-2px)}
.cart-badge{position:absolute;top:2px;right:2px;background:var(--accent);color:#fff;font-size:0.6rem;padding:2px 5px;border-radius:10px;font-weight:700;min-width:16px;text-align:center;animation:scaleIn 0.3s ease;line-height:1}
.btn-nav-cart{position:relative}

/* ========== HERO SECTION ========== */
.hero-section{
    background:linear-gradient(135deg,#0D1B2A 0%,#1a1040 30%,#2d1b69 60%,#1a1040 100%);
    color:#fff;
    padding:7rem 0 8rem;
    position:relative;
    overflow:hidden;
    min-height:600px;
    display:flex;
    align-items:center;
}
.hero-section::before{
    content:'';
    position:absolute;
    top:-200px;
    right:-200px;
    width:700px;
    height:700px;
    background:radial-gradient(circle,rgba(108,92,231,0.3) 0%,rgba(124,58,237,0.1) 40%,transparent 70%);
    border-radius:50%;
    animation:float 8s ease-in-out infinite;
}
.hero-section::after{
    content:'';
    position:absolute;
    bottom:-150px;
    left:-100px;
    width:500px;
    height:500px;
    background:radial-gradient(circle,rgba(255,107,53,0.2) 0%,transparent 70%);
    border-radius:50%;
    animation:float 10s ease-in-out infinite reverse;
}
.hero-orb{
    position:absolute;
    border-radius:50%;
    animation:morph 8s ease-in-out infinite;
}
.hero-orb-1{width:300px;height:300px;top:10%;right:5%;background:rgba(108,92,231,0.15);animation-delay:0s}
.hero-orb-2{width:200px;height:200px;bottom:20%;left:10%;background:rgba(255,107,53,0.1);animation-delay:2s}
.hero-orb-3{width:150px;height:150px;top:30%;left:30%;background:rgba(0,201,167,0.08);animation-delay:4s}

.hero-content{position:relative;z-index:2}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.12);
    padding:0.5rem 1.25rem;
    border-radius:50px;
    font-size:0.82rem;
    font-weight:500;
    margin-bottom:1.5rem;
    animation:fadeInDown 0.7s ease;
    color:rgba(255,255,255,0.9);
}
.hero-badge i{color:var(--accent);font-size:0.9rem}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}

.hero-section h1{
    font-size:3.8rem;
    font-weight:900;
    margin-bottom:1.25rem;
    line-height:1.08;
    letter-spacing:-2px;
    animation:fadeInUp 0.8s ease;
}
.hero-section h1 .highlight{
    background:linear-gradient(135deg,#FF6B35,#FFB845);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    position:relative;
}
.hero-section h1 .gradient-text{
    background:linear-gradient(135deg,#A78BFA,#818CF8,#60A5FA);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero-section p{
    font-size:1.2rem;
    opacity:0.85;
    max-width:520px;
    line-height:1.8;
    margin-bottom:2.5rem;
    animation:fadeInUp 0.8s ease 0.2s both;
}

.hero-actions{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    animation:fadeInUp 0.8s ease 0.4s both;
}
.hero-actions .btn-primary{
    background:linear-gradient(135deg,var(--accent),#FF8C5A);
    box-shadow:var(--shadow-accent);
    font-weight:700;
    padding:0.9rem 2.2rem;
    font-size:1rem;
    border-radius:var(--radius-lg);
    border:none;
}
.hero-actions .btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 36px rgba(255,107,53,0.4);
}
.hero-actions .btn-outline-white{
    background:rgba(255,255,255,0.06);
    color:#fff;
    border:2px solid rgba(255,255,255,0.2);
    padding:0.9rem 2.2rem;
    font-size:1rem;
    border-radius:var(--radius-lg);
    font-weight:600;
}
.hero-actions .btn-outline-white:hover{
    background:rgba(255,255,255,0.12);
    border-color:rgba(255,255,255,0.4);
    transform:translateY(-3px);
}

.hero-stats{
    display:flex;
    gap:3rem;
    margin-top:3.5rem;
    animation:fadeInUp 0.8s ease 0.6s both;
}
.hero-stat{position:relative;padding-left:1.25rem}
.hero-stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),var(--primary));border-radius:1px}
.hero-stat .stat-number{font-size:1.8rem;font-weight:800;color:#fff;display:block}
.hero-stat .stat-label{font-size:0.82rem;opacity:0.7;font-weight:500}

.hero-visual{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
    animation:fadeInRight 1s ease 0.3s both;
}
.hero-mockup{
    position:relative;
    width:100%;
    max-width:480px;
}
.hero-mockup img{
    width:100%;
    border-radius:var(--radius-2xl);
    box-shadow:0 32px 80px rgba(0,0,0,0.4);
    border:1px solid rgba(255,255,255,0.1);
}
.hero-floating-card{
    position:absolute;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:var(--radius-lg);
    padding:0.85rem 1.2rem;
    animation:float 4s ease-in-out infinite;
}
.hero-floating-card.card-1{top:-15px;right:-30px;animation-delay:0s}
.hero-floating-card.card-2{bottom:30px;left:-40px;animation-delay:1.5s}
.hero-floating-card .card-label{font-size:0.72rem;color:rgba(255,255,255,0.7);margin-bottom:2px}
.hero-floating-card .card-value{font-weight:800;font-size:0.95rem}

/* ========== BUTTONS ========== */
.btn{
    font-weight:600;
    border-radius:var(--radius);
    padding:0.65rem 1.6rem;
    transition:var(--transition);
    font-size:0.92rem;
    border:none;
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
}
.btn::after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    pointer-events:none;
    background-image:radial-gradient(circle,#fff 10%,transparent 10.01%);
    background-repeat:no-repeat;
    background-position:50%;
    transform:scale(10,10);
    opacity:0;
    transition:transform .5s,opacity 1s;
}
.btn:active::after{transform:scale(0,0);opacity:.3;transition:0s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 16px rgba(108,92,231,0.35)}
.btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 28px rgba(108,92,231,0.45)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent)}
.btn-accent:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px);box-shadow:0 12px 36px rgba(255,107,53,0.4)}
.btn-white{background:#fff;color:var(--primary);box-shadow:var(--shadow-md)}
.btn-white:hover{background:var(--gray-50);color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.3)}
.btn-outline-white:hover{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.6);transform:translateY(-2px)}
.btn-outline-primary{color:var(--primary);border:2px solid var(--primary-200);background:transparent}
.btn-outline-primary:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 16px rgba(108,92,231,0.3)}
.btn-buy{background:var(--success);color:#fff;box-shadow:0 4px 16px rgba(0,201,167,0.35)}
.btn-buy:hover{background:#00B894;color:#fff;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,201,167,0.45)}
.btn-lg{padding:0.85rem 2rem;font-size:1rem}
.btn-xl{padding:1rem 2.5rem;font-size:1.05rem;border-radius:var(--radius-lg)}

/* ========== SECTIONS ========== */
.section{padding:6rem 0}
.section-label{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--primary);
    margin-bottom:0.75rem;
    padding:0.4rem 1rem;
    background:var(--primary-50);
    border-radius:50px;
}
.section-label i{font-size:0.85rem}
.section-title{font-size:2.6rem;font-weight:800;margin-bottom:0.75rem;letter-spacing:-0.5px}
.section-title .highlight{color:var(--accent)}
.section-subtitle{color:var(--gray-500);font-size:1.05rem;max-width:560px;margin:0 auto 3.5rem;line-height:1.8}
.section-dark{background:var(--dark);color:#fff}
.section-dark h2,.section-dark h3,.section-dark h5{color:#fff}
.section-gray{background:var(--gray-50)}

/* ========== TRUST BAR ========== */
.trust-bar{
    background:linear-gradient(135deg,var(--gray-50),var(--white));
    border-bottom:1px solid var(--gray-200);
    padding:1.25rem 0;
    position:relative;
}
.trust-bar .container{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}
.trust-item{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-size:0.85rem;
    color:var(--gray-600);
    font-weight:500;
    transition:var(--transition);
}
.trust-item:hover{color:var(--primary);transform:translateY(-1px)}
.trust-item i{color:var(--primary);font-size:1.15rem;transition:var(--transition)}
.trust-item:hover i{transform:scale(1.15)}

/* ========== FEATURE CARDS ========== */
.feature-card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-xl);
    padding:2.25rem;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}
.feature-card:hover{
    border-color:transparent;
    transform:translateY(-8px);
    box-shadow:var(--shadow-xl),var(--shadow-glow);
}
.feature-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    transform:scaleX(0);
    transition:var(--transition);
    transform-origin:left;
}
.feature-card:hover::before{transform:scaleX(1)}
.feature-icon{
    width:68px;height:68px;
    border-radius:var(--radius-lg);
    display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;
    margin-bottom:1.25rem;
    transition:var(--transition);
}
.feature-icon.blue{background:var(--primary-light);color:var(--primary)}
.feature-icon.green{background:var(--success-light);color:var(--success)}
.feature-icon.amber{background:var(--accent-light);color:var(--accent)}
.feature-icon.red{background:#FFF0F0;color:var(--danger)}
.feature-icon.purple{background:#F5F3FF;color:#7C3AED}
.feature-icon.cyan{background:#ECFEFF;color:#06B6D4}
.feature-card:hover .feature-icon{transform:scale(1.12) rotate(-5deg)}
.feature-card h5{font-size:1.05rem;font-weight:700;margin-bottom:0.5rem}
.feature-card p{font-size:0.88rem;color:var(--gray-500);margin:0;line-height:1.7}

/* ========== STATS COUNTER ========== */
.stats-section{
    background:linear-gradient(135deg,var(--dark) 0%,var(--dark-800) 100%);
    padding:5rem 0;
    position:relative;
    overflow:hidden;
}
.stats-section::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.04)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
}
.stats-section::after{
    content:'';
    position:absolute;
    top:-100px;right:-100px;
    width:400px;height:400px;
    background:radial-gradient(circle,rgba(108,92,231,0.15),transparent 70%);
    border-radius:50%;
}
.stat-box{text-align:center;position:relative;z-index:1}
.stat-box .stat-number{font-size:3rem;font-weight:900;color:#fff;line-height:1}
.stat-box .stat-suffix{font-size:1.6rem;font-weight:700;color:var(--accent)}
.stat-box .stat-label{font-size:0.88rem;color:rgba(255,255,255,0.6);margin-top:0.5rem;font-weight:500}

/* ========== CATEGORY CARDS ========== */
.category-card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-xl);
    padding:2rem 1.25rem;
    text-align:center;
    transition:var(--transition);
    cursor:pointer;
    position:relative;
    overflow:hidden;
}
.category-card:hover{
    border-color:transparent;
    box-shadow:var(--shadow-lg);
    transform:translateY(-6px);
}
.category-card::after{
    content:'';
    position:absolute;
    bottom:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    transform:scaleX(0);
    transition:var(--transition);
}
.category-card:hover::after{transform:scaleX(1)}
.category-icon{
    width:64px;height:64px;
    border-radius:var(--radius-lg);
    background:var(--primary-light);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 1rem;
    font-size:1.5rem;
    color:var(--primary);
    transition:var(--transition);
}
.category-card:hover .category-icon{
    background:var(--primary);
    color:#fff;
    transform:scale(1.12) rotate(-5deg);
    box-shadow:0 8px 24px rgba(108,92,231,0.3);
}
.category-card .category-name{font-weight:700;color:var(--dark);margin-bottom:0.2rem;font-size:0.95rem}
.category-card .category-count{font-size:0.78rem;color:var(--gray-400);font-weight:500}

/* ========== PRODUCT CARD ========== */
.product-card{
    border:1px solid var(--gray-200);
    border-radius:var(--radius-xl);
    overflow:hidden;
    transition:var(--transition);
    background:#fff;
    height:100%;
    display:flex;
    flex-direction:column;
    position:relative;
}
.product-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-xl);
    border-color:transparent;
}
.product-card .product-image{
    position:relative;
    padding-top:65%;
    overflow:hidden;
    background:var(--gray-100);
}
.product-card .product-image img{
    position:absolute;top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover .product-image img{transform:scale(1.08)}
.product-card .product-badge{
    position:absolute;top:12px;left:12px;
    z-index:2;
    display:flex;flex-direction:column;gap:6px;
}
.badge-discount{background:var(--danger);color:#fff;padding:4px 12px;border-radius:20px;font-size:0.72rem;font-weight:700;letter-spacing:0.3px;box-shadow:0 2px 8px rgba(255,71,87,0.3)}
.badge-featured{background:var(--primary);color:#fff;padding:4px 12px;border-radius:20px;font-size:0.72rem;font-weight:700;box-shadow:0 2px 8px rgba(108,92,231,0.3)}
.badge-new{background:var(--success);color:#fff;padding:4px 12px;border-radius:20px;font-size:0.72rem;font-weight:700;box-shadow:0 2px 8px rgba(0,201,167,0.3)}
.badge-bestseller{background:var(--accent);color:#fff;padding:4px 12px;border-radius:20px;font-size:0.72rem;font-weight:700;box-shadow:0 2px 8px rgba(255,107,53,0.3)}
.product-card .product-wishlist{
    position:absolute;top:12px;right:12px;
    width:36px;height:36px;
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;
    color:var(--gray-400);
    transition:var(--transition);
    border:none;cursor:pointer;z-index:2;
    box-shadow:var(--shadow-sm);
}
.product-card .product-wishlist:hover{background:var(--danger);color:#fff;transform:scale(1.1);box-shadow:0 4px 12px rgba(255,71,87,0.3)}
.product-card .product-body{padding:1.25rem;flex:1;display:flex;flex-direction:column}
.product-card .product-category{font-size:0.72rem;color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:0.4rem}
.product-card .product-title{font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:0.5rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .product-title a{color:inherit}
.product-card .product-title a:hover{color:var(--primary)}
.product-card .product-desc{font-size:0.82rem;color:var(--gray-500);margin-bottom:0.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;line-height:1.7}
.product-card .product-meta{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;font-size:0.78rem;color:var(--gray-400)}
.product-card .product-meta .rating{color:var(--accent);font-weight:600}
.product-card .product-meta i{font-size:0.7rem}
.product-card .product-price{display:flex;align-items:baseline;gap:0.5rem;margin-bottom:1rem}
.product-card .current-price{font-size:1.35rem;font-weight:800;color:var(--primary)}
.product-card .original-price{font-size:0.88rem;color:var(--gray-400);text-decoration:line-through}
.product-card .product-actions{display:flex;gap:0.5rem}
.product-card .product-actions .btn{flex:1;font-size:0.82rem;padding:0.6rem 0.75rem}

/* ========== HOW IT WORKS ========== */
.step-card{text-align:center;padding:2.5rem 1.5rem;position:relative}
.step-number{
    width:64px;height:64px;
    border-radius:50%;
    background:var(--primary-light);
    color:var(--primary);
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;font-weight:800;
    margin:0 auto 1.25rem;
    transition:var(--transition);
    position:relative;
}
.step-number::after{
    content:'';
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:2px dashed var(--primary-200);
    transition:var(--transition);
}
.step-card:hover .step-number{background:var(--primary);color:#fff;transform:scale(1.15);box-shadow:0 8px 24px rgba(108,92,231,0.3)}
.step-card:hover .step-number::after{border-color:var(--primary);animation:spin 8s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.step-connector{position:absolute;top:52px;right:-25%;width:50%;height:2px;background:linear-gradient(90deg,var(--primary-200),var(--gray-200))}
.step-card:last-child .step-connector{display:none}
.step-card h5{font-size:1.05rem;font-weight:700;margin-bottom:0.4rem}
.step-card p{font-size:0.85rem;color:var(--gray-500);margin:0;line-height:1.6}

/* ========== TESTIMONIALS ========== */
.testimonial-card{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:var(--radius-xl);
    padding:2.25rem;
    transition:var(--transition);
    position:relative;
}
.testimonial-card:hover{box-shadow:var(--shadow-lg);border-color:transparent}
.testimonial-card .quote-icon{font-size:2.5rem;color:var(--primary-200);line-height:1;margin-bottom:0.75rem}
.testimonial-card .stars{color:var(--accent);margin-bottom:1rem;display:flex;gap:2px}
.testimonial-card .stars i{font-size:0.88rem}
.testimonial-card .content{font-style:italic;color:var(--gray-600);margin-bottom:1.25rem;line-height:1.8;font-size:0.95rem}
.testimonial-card .author{display:flex;align-items:center;gap:0.75rem}
.testimonial-card .author-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1rem;flex-shrink:0}
.testimonial-card .author-name{font-weight:700;color:var(--dark);font-size:0.95rem}
.testimonial-card .author-title{font-size:0.78rem;color:var(--gray-400)}

/* ========== FAQ ========== */
.faq-item{border:1px solid var(--gray-200);border-radius:var(--radius-lg);margin-bottom:0.75rem;overflow:hidden;transition:var(--transition)}
.faq-item.active{border-color:var(--primary-200);box-shadow:0 4px 16px rgba(108,92,231,0.08)}
.faq-item .faq-question{padding:1.1rem 1.5rem;font-weight:600;color:var(--dark);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:var(--transition);font-size:0.95rem}
.faq-item .faq-question:hover{background:var(--gray-50)}
.faq-item .faq-question i{transition:var(--transition);color:var(--gray-400);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gray-100)}
.faq-item.active .faq-question i{transform:rotate(180deg);color:#fff;background:var(--primary)}
.faq-item .faq-answer{padding:0 1.5rem;max-height:0;overflow:hidden;transition:all 0.4s ease;color:var(--gray-600);font-size:0.92rem;line-height:1.8}
.faq-item.active .faq-answer{padding:0 1.5rem 1.25rem;max-height:500px}

/* ========== NEWSLETTER ========== */
.newsletter-section{
    background:linear-gradient(135deg,var(--dark) 0%,#1a1040 50%,var(--dark) 100%);
    color:#fff;
    padding:6rem 0;
    position:relative;
    overflow:hidden;
}
.newsletter-section::before{
    content:'';
    position:absolute;
    top:-50%;right:-20%;
    width:600px;height:600px;
    background:radial-gradient(circle,rgba(108,92,231,0.2) 0%,transparent 70%);
    border-radius:50%;
}
.newsletter-section::after{
    content:'';
    position:absolute;
    bottom:-30%;left:-10%;
    width:400px;height:400px;
    background:radial-gradient(circle,rgba(255,107,53,0.15) 0%,transparent 70%);
    border-radius:50%;
}
.newsletter-form .form-control{
    border-radius:var(--radius);
    padding:0.9rem 1.2rem;
    border:2px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.06);
    color:#fff;
    font-size:0.95rem;
    transition:var(--transition);
}
.newsletter-form .form-control::placeholder{color:rgba(255,255,255,0.4)}
.newsletter-form .form-control:focus{background:rgba(255,255,255,0.1);border-color:var(--primary);box-shadow:0 0 0 4px rgba(108,92,231,0.2);color:#fff}
.newsletter-form .btn{border-radius:var(--radius);padding:0.9rem 2.5rem;font-weight:700;background:var(--accent);box-shadow:var(--shadow-accent)}
.newsletter-form .btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,53,0.4)}

/* ========== CTA SECTION ========== */
.cta-section{
    background:linear-gradient(135deg,var(--primary) 0%,#7C3AED 40%,#2563EB 100%);
    background-size:200% 200%;
    animation:gradientShift 8s ease infinite;
    color:#fff;
    padding:6rem 0;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.cta-section::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}

/* ========== FOOTER ========== */
.footer{background:var(--dark);color:var(--gray-400);padding:5rem 0 0}
.footer h5{color:#fff;font-weight:700;margin-bottom:1.5rem;font-size:1.05rem}
.footer ul{list-style:none;padding:0}
.footer ul li{margin-bottom:0.65rem}
.footer ul li a{color:var(--gray-400);font-size:0.88rem;transition:var(--transition);display:inline-flex;align-items:center;gap:0.4rem}
.footer ul li a:hover{color:#fff;transform:translateX(4px)}
.footer-brand{font-size:1.6rem;font-weight:800;color:#fff!important;margin-bottom:1rem;display:inline-block}
.footer-brand span{color:var(--primary)}
.footer-desc{color:var(--gray-500);font-size:0.9rem;line-height:1.8;margin-bottom:1.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding:1.5rem 0;margin-top:3rem;text-align:center;font-size:0.82rem;color:var(--gray-500)}
.footer-social{display:flex;gap:0.75rem}
.footer-social a{
    width:42px;height:42px;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    display:flex;align-items:center;justify-content:center;
    color:var(--gray-400);
    transition:var(--transition);
    border:1px solid rgba(255,255,255,0.08);
}
.footer-social a:hover{background:var(--primary);color:#fff;transform:translateY(-3px);border-color:var(--primary);box-shadow:0 4px 16px rgba(108,92,231,0.3)}
.footer-payments{display:flex;gap:0.75rem;margin-top:1rem}
.footer-payments img{height:28px;opacity:0.6;transition:var(--transition)}
.footer-payments img:hover{opacity:1}

/* ========== PRODUCT DETAIL ========== */
.product-detail-section{padding:3rem 0}
.product-gallery{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--gray-200);box-shadow:var(--shadow)}
.product-info h1{font-size:1.8rem;margin-bottom:0.75rem}
.product-info .price-box{background:linear-gradient(135deg,var(--primary-50),var(--gray-50));border:1px solid var(--primary-100);padding:1.25rem;border-radius:var(--radius-lg);margin:1.25rem 0}
.product-info .current-price{font-size:2rem;font-weight:800;color:var(--primary)}
.product-info .original-price{font-size:1.1rem;color:var(--gray-400);text-decoration:line-through}
.product-info .discount-badge{background:var(--danger);color:#fff;padding:4px 12px;border-radius:20px;font-size:0.85rem;font-weight:700;margin-left:0.5rem}
.product-features li{padding:0.5rem 0;display:flex;align-items:center;gap:0.5rem}
.product-features li i{color:var(--success)}
.product-meta-list{list-style:none;padding:0}
.product-meta-list li{padding:0.6rem 0;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between}

/* ========== AUTH ========== */
.auth-section{min-height:80vh;display:flex;align-items:center;background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-100) 100%);padding:2rem 0}
.auth-card{background:#fff;border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:2.5rem;max-width:440px;margin:0 auto;width:100%;border:1px solid var(--gray-200)}
.auth-header{text-align:center;margin-bottom:2rem}
.auth-brand{font-size:1.5rem;font-weight:800;color:var(--primary)!important;display:block;margin-bottom:1rem}
.auth-brand span{color:var(--dark)}
.auth-header h2{font-size:1.5rem;font-weight:700;margin-bottom:0.25rem}
.auth-header p{color:var(--gray-500);font-size:0.92rem}
.auth-footer{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--gray-200)}
.auth-footer p{color:var(--gray-500);font-size:0.92rem}
.auth-footer a{font-weight:600}
.form-floating .form-control{border:1px solid var(--gray-300);border-radius:var(--radius);height:calc(3.5rem + 2px);padding:1rem 1rem 0.5rem;font-size:0.95rem}
.form-floating .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,92,231,0.15)}
.form-floating label{padding:1rem 1rem 0.5rem;color:var(--gray-500)}

/* ========== CART ========== */
.cart-section{padding:3rem 0}
.cart-item{display:flex;align-items:center;gap:1.25rem;padding:1.25rem;border:1px solid var(--gray-200);border-radius:var(--radius-lg);margin-bottom:1rem;transition:var(--transition)}
.cart-item:hover{box-shadow:var(--shadow-sm);border-color:var(--primary-100)}
.cart-item-image{width:80px;height:80px;border-radius:var(--radius);overflow:hidden;flex-shrink:0;background:var(--gray-100)}
.cart-item-image img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1}
.cart-item-info h6{margin-bottom:0.25rem}
.cart-item-info h6 a{color:var(--dark);font-weight:600}
.cart-summary{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:1.5rem}
.cart-summary .summary-row{display:flex;justify-content:space-between;padding:0.5rem 0}
.cart-summary .summary-total{border-top:2px solid var(--gray-300);margin-top:0.5rem;padding-top:0.75rem;font-weight:700;font-size:1.1rem}

/* ========== ACCOUNT ========== */
.account-section{padding:3rem 0}
.account-sidebar{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:1.5rem}
.account-sidebar .nav-link{padding:0.6rem 1rem;border-radius:var(--radius);color:var(--gray-600);font-weight:500}
.account-sidebar .nav-link:hover,.account-sidebar .nav-link.active{background:var(--primary-light);color:var(--primary)}
.account-content{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:1.5rem}
.account-user{text-align:center;padding-bottom:1.5rem;border-bottom:1px solid var(--gray-200);margin-bottom:1rem}
.account-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.5rem;margin:0 auto 0.75rem}
.account-nav{display:flex;flex-direction:column;gap:2px}
.account-nav .nav-link{padding:10px 16px;border-radius:var(--radius);color:var(--gray-600);font-weight:500;display:flex;align-items:center;gap:10px;font-size:0.92rem}
.account-nav .nav-link:hover{background:var(--gray-100);color:var(--primary)}
.account-nav .nav-link.active{background:var(--primary-light);color:var(--primary);font-weight:600}
.stat-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.25rem;display:flex;align-items:center;gap:1rem;transition:var(--transition)}
.stat-card:hover{box-shadow:var(--shadow-sm)}
.stat-icon{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.stat-icon.primary{background:rgba(108,92,231,.1);color:var(--primary)}
.stat-icon.success{background:rgba(0,201,129,.1);color:var(--success)}
.stat-icon.warning{background:rgba(255,184,69,.1);color:var(--warning)}
.stat-number{font-size:1.5rem;font-weight:800;color:var(--dark);display:block;line-height:1}
.stat-label{font-size:0.82rem;color:var(--gray-500);margin-top:2px;display:block}
.order-card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem;transition:var(--transition)}
.order-card:hover{box-shadow:var(--shadow-sm)}
.empty-state{text-align:center;padding:3rem}
.empty-state i{font-size:4rem;color:var(--gray-300);margin-bottom:1rem;display:block}
.empty-state h4,.empty-state h5{color:var(--dark);margin-bottom:0.5rem}

/* ========== DOWNLOAD ========== */
.download-card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem;display:flex;align-items:center;gap:1rem;transition:var(--transition)}
.download-card:hover{box-shadow:var(--shadow);border-color:var(--primary-100)}
.download-card .download-icon{width:48px;height:48px;border-radius:var(--radius);background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.2rem;flex-shrink:0}

/* ========== CHECKOUT ========== */
.payment-options{display:flex;flex-direction:column;gap:0.75rem}
.payment-option{border:2px solid var(--gray-200);border-radius:var(--radius);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:0.75rem}
.payment-option:hover{border-color:var(--primary-200)}
.payment-option.active{border-color:var(--primary);background:var(--primary-50)}
.payment-label{cursor:pointer;font-weight:500;display:flex;align-items:center;gap:0.5rem}

/* ========== SUCCESS/ERROR ========== */
.success-animation i{font-size:6rem;color:var(--success);animation:scaleIn 0.5s ease}
.error-animation i{font-size:6rem;color:var(--danger);animation:scaleIn 0.5s ease}

/* ========== CONTACT ========== */
.contact-info-card{background:linear-gradient(135deg,var(--primary) 0%,#7C3AED 100%);color:#fff;border-radius:var(--radius-xl);padding:2.5rem}
.contact-info-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}
.contact-info-icon{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.contact-form-card{background:#fff;border-radius:var(--radius-xl);padding:2.5rem;box-shadow:var(--shadow-md);border:1px solid var(--gray-200)}

/* ========== SEARCH ========== */
.search-hero{background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-100) 100%);padding:4rem 0 3rem;text-align:center}
.search-title{font-size:2.5rem;font-weight:800;margin-bottom:0.5rem}
.search-subtitle{color:var(--gray-500);margin-bottom:2rem}
.search-input-group{display:flex;gap:0;box-shadow:var(--shadow-md);border-radius:var(--radius);overflow:hidden}
.search-input-group .form-control{border:2px solid var(--gray-200);border-radius:var(--radius) 0 0 var(--radius);padding:1rem 1.25rem;font-size:1rem}
.search-input-group .form-control:focus{border-color:var(--primary)}
.search-input-group .btn{border-radius:0 var(--radius) var(--radius) 0;padding:1rem 2rem;font-weight:700}

/* ========== ERROR PAGES ========== */
.error-page{text-align:center;padding:3rem}
.error-code{font-size:8rem;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}

/* ========== FILTER ========== */
.filter-sidebar{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:1.5rem;position:sticky;top:100px}
.filter-title{font-size:1.1rem;font-weight:700;margin-bottom:1.25rem;color:var(--dark)}
.filter-group{margin-bottom:1.25rem}
.filter-label{font-size:0.85rem;font-weight:600;color:var(--gray-700);margin-bottom:0.4rem;display:block}

/* ========== BREADCRUMB ========== */
.breadcrumb-section{background:var(--gray-50);padding:1rem 0;border-bottom:1px solid var(--gray-200)}
.breadcrumb{margin:0;font-size:0.85rem}

/* ========== ADMIN ========== */
.admin-sidebar{background:linear-gradient(180deg,#1a1a2e 0%,#16213e 100%);min-height:100vh;width:260px;position:fixed;top:0;left:0;z-index:100;padding:1.5rem 0;overflow-y:auto}
.admin-sidebar .sidebar-brand{color:#fff;font-size:1.3rem;font-weight:700;padding:0 1.5rem 1.5rem;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:1rem}
.admin-sidebar .nav-link{color:rgba(255,255,255,0.6);padding:0.65rem 1.5rem;font-size:0.9rem;display:flex;align-items:center;gap:0.75rem;transition:var(--transition);border-radius:0 var(--radius) var(--radius) 0;margin-right:0.75rem}
.admin-sidebar .nav-link:hover{color:#fff;background:rgba(255,255,255,0.08)}
.admin-sidebar .nav-link.active{color:#fff;background:var(--primary);box-shadow:0 4px 16px rgba(108,92,231,0.3)}
.admin-sidebar .nav-section{font-size:0.72rem;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.3);padding:1rem 1.5rem 0.5rem;font-weight:600}
.admin-content{margin-left:260px;padding:1.5rem 2rem;background:#f5f6fa;min-height:100vh}
.admin-header{background:#fff;padding:1rem 1.5rem;border-radius:var(--radius);margin-bottom:1.5rem;box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;align-items:center}
.admin-stat-card{background:#fff;border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-sm);border-left:4px solid var(--primary)}
.admin-stat-card.success{border-left-color:var(--success)}
.admin-stat-card.warning{border-left-color:var(--warning)}
.admin-stat-card.danger{border-left-color:var(--danger)}
.admin-stat-card.info{border-left-color:var(--info)}
.admin-stat-card .stat-value{font-size:1.8rem;font-weight:700;color:var(--dark)}
.admin-stat-card .stat-label{font-size:0.85rem;color:var(--gray-500)}
.admin-stat-card .stat-icon{width:44px;height:44px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:0.25rem}

/* ========== UPLOAD ========== */
.upload-zone{border:2px dashed var(--gray-300);border-radius:var(--radius-xl);padding:2.5rem;text-align:center;cursor:pointer;transition:var(--transition);background:var(--gray-50)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--primary);background:var(--primary-light)}

/* ========== PRODUCT DETAIL EXTENDED ========== */
.product-detail-title{font-size:2rem;font-weight:800;margin-bottom:1rem;letter-spacing:-0.5px}
.product-detail-meta{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.25rem;font-size:0.9rem;color:var(--gray-500)}
.product-detail-meta .rating{color:var(--accent);font-weight:600}
.product-detail-meta i{font-size:0.85rem}
.product-detail-desc{color:var(--gray-600);line-height:1.8;margin-bottom:1.25rem}
.product-badge-inline{display:inline-block;background:var(--primary-light);color:var(--primary);padding:4px 14px;border-radius:20px;font-size:0.82rem;font-weight:600;margin-bottom:1rem}
.product-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:1.5rem;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden}
.meta-item{padding:12px 16px;border-bottom:1px solid var(--gray-200);border-right:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center}
.meta-item:nth-child(even){border-right:none}
.meta-label{font-size:0.82rem;color:var(--gray-500)}
.meta-value{font-size:0.88rem;font-weight:600;color:var(--dark)}
.content-section{margin-top:1.5rem}
.content-title{font-size:1.3rem;font-weight:700;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:2px solid var(--gray-200)}
.content-body{color:var(--gray-600);line-height:1.8}
.file-list{display:flex;flex-direction:column;gap:0.75rem}
.file-item{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--gray-200);border-radius:var(--radius);transition:var(--transition)}
.file-item:hover{border-color:var(--primary-100);box-shadow:var(--shadow-sm)}
.file-icon{width:44px;height:44px;border-radius:var(--radius);background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.1rem;flex-shrink:0}
.file-name{font-weight:600;color:var(--dark);font-size:0.92rem}
.file-meta{font-size:0.78rem;color:var(--gray-400)}
.tag-badge{background:var(--gray-100);color:var(--gray-700);padding:6px 14px;border-radius:20px;font-size:0.82rem;font-weight:500;text-decoration:none;transition:var(--transition)}
.tag-badge:hover{background:var(--primary);color:#fff}

/* ========== REVIEWS ========== */
.reviews-list{display:flex;flex-direction:column;gap:1.25rem}
.review-item{padding:1.25rem;border:1px solid var(--gray-200);border-radius:var(--radius-lg)}
.review-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.75rem}
.review-author{display:flex;align-items:center;gap:0.75rem}
.review-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:0.85rem;flex-shrink:0}
.review-text{color:var(--gray-600);line-height:1.7;margin:0}

/* ========== SCROLL ANIMATIONS ========== */
.animate-on-scroll{opacity:0;transform:translateY(40px);transition:opacity 0.7s ease,transform 0.7s ease}
.animate-on-scroll.animate-in{opacity:1;transform:translateY(0)}

/* ========== BACK TO TOP ========== */
.back-to-top{
    position:fixed;bottom:30px;right:30px;
    width:50px;height:50px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;border:none;
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;cursor:pointer;
    opacity:0;visibility:hidden;
    transition:var(--transition);
    z-index:999;
    box-shadow:0 4px 20px rgba(108,92,231,0.4);
}
.back-to-top.show{opacity:1;visibility:visible}
.back-to-top:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(108,92,231,0.5)}

/* ========== RESPONSIVE ========== */
@media(max-width:992px){
    .hero-section{padding:5rem 0 6rem;min-height:auto}
    .hero-section h1{font-size:2.8rem}
    .hero-stats{gap:2rem}
    .step-connector{display:none}
    .hero-visual{margin-top:3rem}
}
@media(max-width:768px){
    .hero-section{padding:3.5rem 0 4.5rem}
    .hero-section h1{font-size:2.2rem;letter-spacing:-1px}
    .hero-stats{flex-direction:column;gap:1.25rem}
    .section{padding:4rem 0}
    .section-title{font-size:2rem}
    .stat-box .stat-number{font-size:2.2rem}
    .admin-sidebar{width:0;overflow:hidden}
    .admin-content{margin-left:0}
    .product-card .product-actions{flex-direction:column}
    .product-card .product-actions .btn{width:100%}
}
@media(max-width:576px){
    .hero-section h1{font-size:1.8rem}
    .hero-actions .btn{width:100%}
    .product-info h1{font-size:1.4rem}
    .auth-card{padding:1.5rem;margin:1rem}
    .trust-bar .container{gap:1.5rem}
}

/* ========== PREMIUM HERO SECTION ========== */
.cs-hero{
    background:linear-gradient(180deg,#F0F4FF 0%,#E8EEFF 40%,#F8FAFF 100%);
    padding:5rem 0 0;
    position:relative;
    overflow:hidden;
    min-height:700px;
}
.cs-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cs-hero-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(108,92,231,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108,92,231,0.03) 1px, transparent 1px);
    background-size:60px 60px;
}
.cs-hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
}
.cs-hero-glow-1{width:500px;height:500px;top:-100px;right:-100px;background:rgba(108,92,231,0.08)}
.cs-hero-glow-2{width:400px;height:400px;bottom:0;left:-100px;background:rgba(14,165,233,0.06)}
.cs-hero-glow-3{width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(245,158,11,0.04)}

.cs-hero-row{min-height:600px;align-items:center;padding:2rem 0}

/* Badge */
.cs-hero-badge{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    background:#fff;
    border:1px solid rgba(108,92,231,0.15);
    padding:0.5rem 1.25rem;
    border-radius:50px;
    font-size:0.82rem;
    font-weight:500;
    color:var(--gray-600);
    margin-bottom:1.5rem;
    box-shadow:0 2px 8px rgba(108,92,231,0.08);
}
.cs-hero-badge-dot{
    width:8px;height:8px;
    background:#10B981;
    border-radius:50%;
    animation:pulse 2s infinite;
}

/* Title */
.cs-hero-title{
    font-size:3.2rem;
    font-weight:900;
    color:var(--dark);
    line-height:1.1;
    letter-spacing:-1px;
    margin-bottom:1rem;
}
.cs-hero-highlight{
    color:var(--primary);
    position:relative;
    display:inline-block;
}
.cs-hero-highlight::after{
    content:'';
    position:absolute;
    bottom:2px;left:0;right:0;
    height:8px;
    background:rgba(108,92,231,0.15);
    border-radius:4px;
    z-index:-1;
}
.cs-hero-subtitle{
    font-size:1.35rem;
    font-weight:700;
    color:var(--dark);
    margin-bottom:0.75rem;
}
.cs-hero-desc{
    font-size:1rem;
    color:var(--gray-500);
    line-height:1.8;
    max-width:500px;
    margin-bottom:2rem;
}

/* Benefits */
.cs-hero-benefits{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.75rem;
    margin-bottom:2rem;
}
.cs-hero-benefit{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-size:0.88rem;
    font-weight:500;
    color:var(--gray-700);
}
.cs-hero-benefit-icon{
    width:22px;height:22px;
    background:var(--primary);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}

/* CTA */
.cs-hero-cta{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.cs-hero-btn-primary{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    background:linear-gradient(135deg,var(--primary) 0%,#5A4BD1 100%);
    color:#fff;
    padding:1rem 2rem;
    border-radius:50px;
    font-size:0.95rem;
    font-weight:700;
    text-decoration:none;
    transition:all 0.3s ease;
    box-shadow:0 8px 24px rgba(108,92,231,0.3);
    letter-spacing:0.5px;
}
.cs-hero-btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(108,92,231,0.4);
    color:#fff;
}
.cs-hero-trust-badge{
    display:flex;
    align-items:center;
    gap:0.4rem;
    font-size:0.82rem;
    color:var(--gray-500);
    font-weight:500;
}

/* ========== SHOWCASE ========== */
.cs-hero-showcase{
    position:relative;
    min-height:500px;
    padding:2rem 0;
}

/* Category Pills */
.cs-hero-cats{
    display:flex;
    gap:0.5rem;
    justify-content:center;
    margin-bottom:1.5rem;
    flex-wrap:wrap;
}
.cs-hero-cat-pill{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    background:#fff;
    border:1px solid var(--gray-200);
    padding:0.4rem 0.9rem;
    border-radius:50px;
    font-size:0.72rem;
    font-weight:600;
    color:var(--gray-600);
    transition:all 0.3s ease;
    cursor:pointer;
}
.cs-hero-cat-pill:hover{
    border-color:var(--pill-color);
    color:var(--pill-color);
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    transform:translateY(-2px);
}
.cs-hero-cat-pill svg{color:var(--pill-color)}

/* Product Grid */
.cs-hero-product-grid{
    position:relative;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:1rem;
    max-width:520px;
    margin:0 auto;
}

/* Featured Product Card */
.cs-hero-product-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.1);
    transition:transform 0.4s ease;
    grid-row:1/3;
}
.cs-hero-product-card:hover{transform:translateY(-8px)}
.cs-hero-featured{animation:float 6s ease-in-out infinite}

.cs-hero-product-img{
    background:linear-gradient(135deg,#F0F4FF 0%,#E8EEFF 100%);
    padding:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1/1;
}
.cs-hero-product-img img{
    max-width:100%;
    max-height:200px;
    object-fit:contain;
    border-radius:12px;
    transition:transform 0.4s ease;
}
.cs-hero-product-card:hover .cs-hero-product-img img{transform:scale(1.05)}

.cs-hero-product-info{padding:1.25rem}
.cs-hero-product-badge{
    display:inline-block;
    background:linear-gradient(135deg,#FF6B35,#FF8F65);
    color:#fff;
    padding:0.2rem 0.6rem;
    border-radius:50px;
    font-size:0.6rem;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:0.5rem;
}
.cs-hero-product-info h4{
    font-size:0.95rem;
    font-weight:700;
    color:var(--dark);
    margin-bottom:0.25rem;
}
.cs-hero-product-info p{
    font-size:0.75rem;
    color:var(--gray-400);
    margin-bottom:0.5rem;
}
.cs-hero-product-price{display:flex;align-items:center;gap:0.5rem}
.cs-hero-price-now{
    font-size:1.1rem;
    font-weight:800;
    color:var(--primary);
}
.cs-hero-price-old{
    font-size:0.8rem;
    color:var(--gray-400);
    text-decoration:line-through;
}

/* Secondary Products */
.cs-hero-secondary-products{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.75rem;
}
.cs-hero-mini-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,0.06);
    transition:all 0.3s ease;
    display:flex;
    flex-direction:column;
}
.cs-hero-mini-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.1)}

.cs-hero-mini-img{
    background:linear-gradient(135deg,#F8FAFF 0%,#F0F4FF 100%);
    padding:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:4/3;
}
.cs-hero-mini-img img{
    max-width:100%;
    max-height:70px;
    object-fit:contain;
    border-radius:8px;
}

.cs-hero-mini-info{
    padding:0.75rem;
    display:flex;
    flex-direction:column;
    gap:0.15rem;
}
.cs-hero-mini-info span:first-child{
    font-size:0.6rem;
    font-weight:600;
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.cs-hero-mini-info strong{
    font-size:0.72rem;
    font-weight:600;
    color:var(--dark);
    line-height:1.3;
}
.cs-hero-mini-price{
    font-size:0.75rem;
    font-weight:700;
    color:var(--accent);
}

/* Floating Elements */
.cs-hero-float{
    position:absolute;
    background:#fff;
    border-radius:12px;
    padding:0.65rem 0.9rem;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    gap:0.6rem;
    z-index:4;
    animation:float 4s ease-in-out infinite;
}
.cs-hero-float strong{font-size:0.78rem;color:var(--dark);display:block}
.cs-hero-float small{font-size:0.65rem;color:var(--gray-400)}
.cs-hero-float-1{top:10px;left:0;animation-delay:0s}
.cs-hero-float-2{bottom:20px;left:-10px;animation-delay:1.5s}
.cs-hero-float-3{bottom:20px;right:0;animation-delay:0.75s}

.cs-hero-float-icon{
    width:36px;height:36px;
    border-radius:10px;
    background:rgba(245,158,11,0.1);
    display:flex;align-items:center;justify-content:center;
}
.cs-hero-float-icon-green{background:#10B981}
.cs-hero-float-icon-blue{background:#0EA5E9}

/* ========== BOTTOM TRUST BAR ========== */
.cs-hero-trust{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
    background:var(--dark);
    margin:3rem -15px 0;
    padding:1.25rem 2rem;
    border-radius:16px 16px 0 0;
    flex-wrap:wrap;
}
.cs-hero-trust-item{
    display:flex;
    align-items:center;
    gap:0.5rem;
    color:rgba(255,255,255,0.85);
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.5px;
    white-space:nowrap;
}
.cs-hero-trust-item svg{opacity:0.7}
.cs-hero-trust-divider{
    width:1px;
    height:24px;
    background:rgba(255,255,255,0.15);
}

/* ========== RESPONSIVE ========== */
@media(max-width:1199px){
    .cs-hero-title{font-size:2.6rem}
    .cs-hero-product-grid{max-width:450px}
}
@media(max-width:991px){
    .cs-hero{padding:4rem 0 0;min-height:auto}
    .cs-hero-title{font-size:2.4rem}
    .cs-hero-row{min-height:auto}
    .cs-hero-showcase{min-height:400px;margin-top:2rem}
    .cs-hero-cats{gap:0.5rem}
    .cs-hero-trust{gap:1.25rem;padding:1rem 1.5rem}
}
@media(max-width:767px){
    .cs-hero{padding:3rem 0 0}
    .cs-hero-title{font-size:2rem;text-align:center}
    .cs-hero-subtitle{text-align:center}
    .cs-hero-desc{text-align:center;margin:0 auto 1.5rem}
    .cs-hero-benefits{grid-template-columns:1fr 1fr;gap:0.5rem}
    .cs-hero-cta{justify-content:center}
    .cs-hero-trust-badge{display:none}
    .cs-hero-product-grid{height:auto}
    .cs-hero-product-card{grid-row:auto}
    .cs-hero-float{padding:0.5rem 0.75rem}
    .cs-hero-float strong{font-size:0.72rem}
    .cs-hero-trust{margin:2rem -15px 0;border-radius:12px 12px 0 0;gap:1rem}
    .cs-hero-trust-item{font-size:0.7rem}
    .cs-hero-trust-divider{display:none}
}
@media(max-width:575px){
    .cs-hero-title{font-size:1.7rem}
    .cs-hero-benefits{grid-template-columns:1fr}
    .cs-hero-cta{flex-direction:column;align-items:stretch}
    .cs-hero-btn-primary{justify-content:center}
    .cs-hero-product-grid{grid-template-columns:1fr}
    .cs-hero-secondary-products{grid-template-columns:1fr 1fr}
    .cs-hero-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem}
    .cs-hero-trust{flex-wrap:wrap;justify-content:center}
}