/* ===== HK Build — Stylesheet for hkbuild.in ===== */

/* Hide theme decorative elements (from original template) */
.mil-ball,
.mil-reveal-box,
.mil-frame,
.mil-menu-frame,
.mil-progress-track,
.mil-wrapper > a.mil-logo,
.mil-footer {
    display: none !important;
}

:root {
    --bg-deep: #0a0e27;
    --bg-mid: #0f1437;
    --bg-card: #131a3d;
    --grad-primary: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #06b6d4 100%);
    --grad-button: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    --purple: #a855f7;
    --pink: #ec4899;
    --cyan: #06b6d4;
    --blue: #3b82f6;
    --orange: #f97316;
    --green: #10b981;
}
body { font-family: 'Outfit', sans-serif; background: var(--bg-deep); margin: 0; color: #fff; }
.mil-wrapper { background: var(--bg-deep); }
body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(168, 85, 247, .15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(6, 182, 212, .12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(236, 72, 153, .1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ===== Text Logo ===== */
.hk-logo-text {
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -.5px;
}
.hk-footer-logo .hk-logo-text { font-size: 1.2rem; }

/* ===== Top Nav ===== */
.hk-topnav{position:fixed;top:0;left:0;right:0;z-index:10000;background:rgba(10,14,39,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:0 40px;height:68px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(168,85,247,.15)}
.hk-topnav .hk-logo { text-decoration: none; }
.hk-topnav .hk-nav-right{display:flex;align-items:center;gap:16px}
.hk-topnav .hk-nav-cta{background:var(--grad-button);color:#fff;padding:10px 24px;border-radius:50px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px;text-decoration:none;transition:all .25s;box-shadow:0 4px 20px rgba(168,85,247,.3)}
.hk-topnav .hk-nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(168,85,247,.5)}
.hk-youtube-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,0,0,.1);color:#ff0000;border-radius:50px;text-decoration:none;transition:all .3s;margin-right:12px}
.hk-youtube-btn:hover{background:rgba(255,0,0,.2);color:#ff0000;transform:scale(1.1)}
.hk-youtube-btn i{font-size:18px}

/* Hamburger */
.hk-hamburger{width:32px;height:24px;position:relative;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;z-index:10001}
.hk-hamburger span{display:block;width:100%;height:2px;background:#fff;border-radius:2px;transition:all .3s ease;transform-origin:center}
.hk-hamburger.active span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.hk-hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hk-hamburger.active span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

/* Mobile Menu Overlay */
.hk-mobile-menu{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:all .4s ease}
.hk-mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto}
.hk-mobile-menu nav{display:flex;flex-direction:column;align-items:center;gap:8px}
.hk-mobile-menu nav a{color:rgba(255,255,255,.7);text-decoration:none;font-size:1.5rem;font-weight:500;padding:12px 24px;transition:all .3s ease;position:relative;opacity:0;transform:translateY(20px)}
.hk-mobile-menu nav a:hover{color:var(--purple);transform:translateX(8px)}
.hk-mobile-menu.open nav a{opacity:1;transform:translateY(0)}
.hk-mobile-menu.open nav a:nth-child(1){transition-delay:.1s}
.hk-mobile-menu.open nav a:nth-child(2){transition-delay:.15s}
.hk-mobile-menu.open nav a:nth-child(3){transition-delay:.2s}
.hk-mobile-menu.open nav a:nth-child(4){transition-delay:.25s}
.hk-mobile-menu.open nav a:nth-child(5){transition-delay:.3s}
.hk-mobile-menu.open nav a:nth-child(6){transition-delay:.35s}
.hk-mobile-menu.open nav a:nth-child(7){transition-delay:.4s}
.hk-mobile-menu nav a.hk-menu-cta{background:var(--grad-button);color:#fff;border-radius:50px;font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:1px;margin-top:20px;padding:16px 40px;box-shadow:0 4px 20px rgba(168,85,247,.4)}
.hk-mobile-menu nav a.hk-menu-cta:hover{transform:translateX(0) scale(1.02)}

@media(max-width:768px){
    .hk-topnav{padding:0 20px;height:60px}
    .hk-topnav .hk-logo-text{font-size:1.2rem}
    .hk-topnav .hk-nav-cta{display:none}
}

/* ===== Social Section ===== */
.hk-social-section{background:#050505;border-top:1px solid rgba(255,255,255,.06);padding:24px}
.hk-social-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:16px}
.hk-social-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:50%;text-decoration:none;transition:all .3s;color:rgba(255,255,255,.6)}
.hk-social-link:hover{transform:translateY(-3px);color:#fff}
.hk-social-link i{font-size:20px}
.hk-social-youtube:hover{background:rgba(255,0,0,.1);border-color:rgba(255,0,0,.3);color:#ff0000}
.hk-social-linkedin:hover{background:rgba(0,119,181,.1);border-color:rgba(0,119,181,.3);color:#0077b5}
.hk-social-facebook:hover{background:rgba(24,119,242,.1);border-color:rgba(24,119,242,.3);color:#1877f2}
.hk-social-instagram:hover{background:rgba(225,48,108,.1);border-color:rgba(225,48,108,.3);color:#e1306c}
@media(max-width:768px){.hk-social-section{padding:20px}.hk-social-inner{gap:12px}.hk-social-link{width:38px;height:38px}.hk-social-link i{font-size:18px}}

/* ===== Footer ===== */
.hk-footer{background:#000;border-top:1px solid rgba(255,255,255,.06);padding:40px}
.hk-footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.hk-footer-logo{text-decoration:none}
.hk-footer-links{display:flex;gap:24px;flex-wrap:wrap}
.hk-footer-links a{color:rgba(255,255,255,.4);text-decoration:none;font-size:13px;transition:color .2s}
.hk-footer-links a:hover{color:var(--purple)}
.hk-footer-copy{color:rgba(255,255,255,.3);font-size:12px;width:100%;text-align:center;margin-top:10px}
.hk-footer .hk-btn-primary{background:var(--grad-button);color:#fff;padding:12px 28px;border-radius:50px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.6px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .25s;box-shadow:0 4px 20px rgba(168,85,247,.3)}
.hk-footer .hk-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(168,85,247,.5)}
@media(max-width:768px){.hk-footer-inner{flex-direction:column;text-align:center}}

/* Force all form labels to be white */
label {
    color: #fff !important;
}

/* Ensure input/textarea text and placeholders are readable on dark backgrounds */
input,
textarea,
select {
    color: #f9fafb !important;
}
input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, .55) !important;
    opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: rgba(255, 255, 255, .55) !important;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: rgba(255, 255, 255, .55) !important;
}
input:focus,
textarea:focus {
    border-color: rgba(168, 85, 247, .6) !important;
}

/* ===== Hero Section ===== */
.bc-hero {
    min-height: 100vh;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 120px 40px 80px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.bc-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 70%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(168, 85, 247, .25) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(40px);
}
.bc-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 60%;
    height: 120%;
    background: radial-gradient(ellipse, rgba(6, 182, 212, .2) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(40px);
}

.bc-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
}

.bc-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 16px;
}

.bc-hero h1 span {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.bc-tagline {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 32px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.bc-pricing-badge {
    display: inline-block;
    background: rgba(168, 85, 247, .15);
    color: #c084fc;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(168, 85, 247, .35);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    backdrop-filter: blur(10px);
}

.bc-cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.bc-btn-primary {
    background: var(--grad-button);
    color: #fff;
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all .3s;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(168, 85, 247, .35);
    position: relative;
    overflow: hidden;
}

.bc-btn-primary::after {
    content: '→';
    font-size: 18px;
    transition: transform .3s;
}

.bc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(168, 85, 247, .55);
}
.bc-btn-primary:hover::after { transform: translateX(4px); }

.bc-btn-secondary {
    background: rgba(255, 255, 255, .05);
    color: #fff;
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all .25s;
    border: 1px solid rgba(255, 255, 255, .15);
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.bc-btn-secondary::after { content: '→'; font-size: 18px; transition: transform .3s; }

.bc-btn-secondary:hover {
    border-color: rgba(168, 85, 247, .5);
    background: rgba(168, 85, 247, .1);
    transform: translateY(-2px);
}
.bc-btn-secondary:hover::after { transform: translateX(4px); }

/* ===== Sections ===== */
.bc-section {
    padding: 100px 40px;
    position: relative;
    z-index: 1;
}

.bc-section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.bc-section-title {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
}

.bc-section-title span {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.bc-section-subtitle {
    color: rgba(255, 255, 255, .6);
    font-size: 1.1rem;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    line-height: 1.6;
}

/* ===== Cards Grid ===== */
.bc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}

.bc-card {
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    overflow: hidden;
    transition: all .4s cubic-bezier(.2,.8,.2,1);
    text-align: left;
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(10px);
}

.bc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent, var(--grad-primary));
    opacity: .8;
}

.bc-card:hover {
    border-color: rgba(168, 85, 247, .35);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(168, 85, 247, .15);
}

.bc-card-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--card-bg-1, rgba(168,85,247,.18)) 0%, var(--card-bg-2, rgba(6,182,212,.08)) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.bc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bc-card-image.placeholder {
    font-size: 64px;
}

.bc-card-content {
    padding: 32px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bc-card-icon {
    font-size: 40px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--card-accent-soft, rgba(168,85,247,.15));
    color: var(--card-accent-color, #c084fc);
}

/* Per-card color variants */
.bc-card.v-cyan { --card-accent: var(--cyan); --card-accent-color: #22d3ee; --card-accent-soft: rgba(6,182,212,.15); --card-bg-1: rgba(6,182,212,.18); --card-bg-2: rgba(59,130,246,.08); }
.bc-card.v-blue { --card-accent: var(--blue); --card-accent-color: #60a5fa; --card-accent-soft: rgba(59,130,246,.15); --card-bg-1: rgba(59,130,246,.18); --card-bg-2: rgba(168,85,247,.08); }
.bc-card.v-purple { --card-accent: var(--purple); --card-accent-color: #c084fc; --card-accent-soft: rgba(168,85,247,.15); --card-bg-1: rgba(168,85,247,.18); --card-bg-2: rgba(236,72,153,.08); }
.bc-card.v-orange { --card-accent: var(--orange); --card-accent-color: #fb923c; --card-accent-soft: rgba(249,115,22,.15); --card-bg-1: rgba(249,115,22,.18); --card-bg-2: rgba(236,72,153,.08); }
.bc-card.v-pink { --card-accent: var(--pink); --card-accent-color: #f472b6; --card-accent-soft: rgba(236,72,153,.15); --card-bg-1: rgba(236,72,153,.18); --card-bg-2: rgba(168,85,247,.08); }

.bc-card h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.bc-card p {
    color: rgba(255, 255, 255, .65);
    font-size: .92rem;
    line-height: 1.6;
}

/* ===== Features List ===== */
.bc-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 18px 64px;
}

.bc-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .8);
    font-size: .95rem;
    line-height: 1.5;
}

.bc-features-list li::before {
    content: '✓';
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
}

/* ===== Who Grid ===== */
.bc-who-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.bc-who-item {
    background: rgba(168, 85, 247, .06);
    border: 1px solid rgba(168, 85, 247, .2);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: all .3s;
    backdrop-filter: blur(10px);
}

.bc-who-item:hover {
    background: rgba(168, 85, 247, .12);
    border-color: rgba(168, 85, 247, .45);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(168, 85, 247, .2);
}

.bc-who-item p {
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    margin: 0;
}

/* ===== Pricing Section ===== */
.bc-pricing-section {
    background: rgba(15, 20, 55, .4);
    position: relative;
    overflow: hidden;
}
.bc-pricing-section::before{
    content:'';position:absolute;inset:0;
    background: radial-gradient(ellipse at center, rgba(168,85,247,.15) 0%, transparent 60%);
    pointer-events:none;
}

.bc-price-card {
    background: linear-gradient(180deg, rgba(168,85,247,.1) 0%, rgba(15,20,55,.6) 100%);
    border: 1px solid rgba(168, 85, 247, .35);
    border-radius: 28px;
    padding: 48px 40px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    transition: all .35s;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(168, 85, 247, .15);
}

.bc-price-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--grad-primary);
}

.bc-price-card:hover {
    border-color: rgba(168, 85, 247, .55);
    transform: translateY(-4px);
    box-shadow: 0 30px 80px rgba(168, 85, 247, .3);
}

.bc-price-label {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.bc-price-amount {
    color: #fff;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.bc-price-period {
    color: rgba(255, 255, 255, .5);
    font-size: 1rem;
    margin-bottom: 32px;
}

.bc-price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.bc-price-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .75);
    font-size: .95rem;
}

.bc-price-features li::before {
    content: '✓';
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ===== CTA Section ===== */
.bc-cta-section {
    background: linear-gradient(135deg, rgba(168,85,247,.12) 0%, rgba(6,182,212,.08) 100%);
    padding: 100px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.bc-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 70%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(236, 72, 153, .25) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(50px);
}

.bc-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
}

.bc-cta-inner h2 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.bc-cta-inner h2 span {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bc-cta-inner p {
    color: rgba(255, 255, 255, .65);
    font-size: 1.05rem;
    margin-bottom: 40px;
    line-height: 1.6;
}

.bc-footer-note {
    color: rgba(255, 255, 255, .4);
    font-size: .9rem;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .bc-hero { padding: 80px 20px 40px; }
    .bc-section { padding: 70px 20px; }
    .bc-cta-section { padding: 60px 20px; }
    .bc-cards-grid { grid-template-columns: 1fr; }
    .bc-cta-group { flex-direction: column; align-items: center; }
    .bc-btn-primary, .bc-btn-secondary { width: 100%; justify-content: center; }
}

@media (max-width: 768px) {
    .bc-hero h1 { font-size: 2rem; }
    .bc-tagline { font-size: 1.1rem; }
    .bc-section-title { font-size: 1.8rem; }
    .bc-price-card { padding: 36px 28px; }
    .bc-price-amount { font-size: 2.8rem; }
    .bc-who-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .bc-who-grid { grid-template-columns: 1fr; }
    .bc-features-list { grid-template-columns: 1fr; }
}

/* ===== Gallery Carousel ===== */
.bc-gallery-section { background: rgba(15, 20, 55, .3); position: relative; z-index: 1; }
.bc-gallery-container { position: relative; max-width: 1100px; margin: 0 auto; }
.bc-gallery-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.bc-gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all .4s;
    border: 1px solid rgba(168, 85, 247, .2);
}
.bc-gallery-item:hover {
    border-color: rgba(168, 85, 247, .55);
    transform: scale(1.03);
    box-shadow: 0 15px 50px rgba(168, 85, 247, .25);
}
.bc-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.bc-gallery-item:hover img { transform: scale(1.05); }
.bc-gallery-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 100%);
    display: flex; align-items: flex-end; padding: 20px;
    opacity: 0; transition: opacity .35s;
}
.bc-gallery-item:hover .bc-gallery-overlay { opacity: 1; }
.bc-gallery-title { color: #fff; font-weight: 600; font-size: .95rem; }
.bc-gallery-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(168, 85, 247, .15) 0%, rgba(6, 182, 212, .08) 100%);
    display: flex; align-items: center; justify-content: center; font-size: 56px;
}
@media (max-width: 768px) { .bc-gallery-carousel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bc-gallery-carousel { grid-template-columns: 1fr; } }

/* ===== Events Carousel ===== */
.bc-events-section { background: rgba(15, 20, 55, .3); position: relative; z-index: 1; }
.bc-events-carousel-wrap {
    position: relative; margin-top: 40px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.bc-events-track {
    display: flex; gap: 24px;
    animation: bc-events-scroll 60s linear infinite;
    will-change: transform;
}
.bc-events-carousel-wrap:hover .bc-events-track { animation-play-state: paused; }
@keyframes bc-events-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.bc-event-card {
    flex: 0 0 360px; border-radius: 22px; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(168, 85, 247, .18);
    transition: transform .35s, border-color .35s, box-shadow .35s;
    position: relative; display: flex; flex-direction: column;
}
.bc-event-card:hover {
    transform: translateY(-6px);
    border-color: rgba(168, 85, 247, .5);
    box-shadow: 0 20px 50px rgba(168, 85, 247, .25);
}
.bc-event-card img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .5s ease; }
.bc-event-card:hover img { transform: scale(1.06); }
.bc-event-info { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.bc-event-tag {
    display: inline-block; background: var(--grad-button); color: #fff;
    padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; width: fit-content; margin-bottom: 4px;
}
.bc-event-info h4 { color: #fff; font-size: 1.05rem; font-weight: 600; margin: 0; line-height: 1.35; }
.bc-event-info p { color: rgba(255, 255, 255, .6); font-size: .88rem; margin: 0; line-height: 1.5; }
.bc-events-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(10, 14, 39, .85); border: 1px solid rgba(168, 85, 247, .4);
    color: #fff; font-size: 28px; line-height: 1; cursor: pointer; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px); transition: all .25s;
}
.bc-events-nav:hover {
    background: var(--grad-button); border-color: transparent;
    transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 24px rgba(168, 85, 247, .5);
}
.bc-events-nav.prev { left: 12px; }
.bc-events-nav.next { right: 12px; }
@media (max-width: 600px) {
    .bc-event-card { flex: 0 0 280px; }
    .bc-event-card img { height: 180px; }
    .bc-events-nav { width: 40px; height: 40px; font-size: 22px; }
}

/* ===== Paid Services Marketplace ===== */
.bc-marketplace-section { position: relative; z-index: 1; }
.bc-market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 1024px) { .bc-market-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .bc-market-grid { grid-template-columns: 1fr; } }
.bc-market-card {
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 32px 28px;
    position: relative; overflow: hidden; transition: all .4s cubic-bezier(.2,.8,.2,1);
    display: flex; flex-direction: column; backdrop-filter: blur(10px);
}
.bc-market-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--card-accent, var(--grad-button)); opacity: .9;
}
.bc-market-card:hover {
    border-color: rgba(168, 85, 247, .4); transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(168, 85, 247, .2);
}
.bc-market-icon {
    width: 60px; height: 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; background: var(--card-soft, rgba(168, 85, 247, .15)); margin-bottom: 18px;
}
.bc-market-tag {
    display: inline-block; background: var(--grad-button); color: #fff;
    padding: 4px 12px; border-radius: 50px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px; width: fit-content;
}
.bc-market-card h3 { color: #fff; font-size: 1.2rem; font-weight: 600; margin: 0 0 10px; }
.bc-market-card > p { color: rgba(255,255,255,.65); font-size: .95rem; line-height: 1.6; margin: 0 0 16px; }
.bc-market-features { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bc-market-features li { color: rgba(255,255,255,.75); font-size: .9rem; padding-left: 22px; position: relative; line-height: 1.5; }
.bc-market-features li::before { content: '✓'; position: absolute; left: 0; color: var(--card-color, #c084fc); font-weight: 700; }
.bc-market-price {
    margin-top: auto; padding: 12px 16px; background: rgba(168, 85, 247, .12);
    border: 1px solid rgba(168, 85, 247, .25); border-radius: 12px;
    color: #fff; font-size: .95rem; font-weight: 600; text-align: center;
}
.bc-market-card.v-purple { --card-accent:#a855f7; --card-color:#c084fc; --card-soft:rgba(168,85,247,.18); }
.bc-market-card.v-pink   { --card-accent:#ec4899; --card-color:#f472b6; --card-soft:rgba(236,72,153,.18); }
.bc-market-card.v-cyan   { --card-accent:#06b6d4; --card-color:#22d3ee; --card-soft:rgba(6,182,212,.18); }
.bc-market-card.v-orange { --card-accent:#f97316; --card-color:#fb923c; --card-soft:rgba(249,115,22,.18); }
.bc-market-card.v-green  { --card-accent:#10b981; --card-color:#34d399; --card-soft:rgba(16,185,129,.18); }
.bc-market-card.v-blue   { --card-accent:#3b82f6; --card-color:#60a5fa; --card-soft:rgba(59,130,246,.18); }

/* ===== Gig Marketplace ===== */
.bc-gigs-section { position: relative; z-index: 1; }
.bc-gigs-showcase { margin-top: 20px; }
.bc-gigs-flow { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 40px; }
@media (max-width: 900px) { .bc-gigs-flow { gap: 20px; } }
@media (max-width: 600px) { .bc-gigs-flow { flex-direction: column; gap: 16px; } }
.bc-flow-step {
    flex: 0 1 280px;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(168, 85, 247, .25); border-radius: 18px; padding: 32px 24px;
    text-align: center; position: relative; transition: all .35s;
}
.bc-flow-step:hover {
    border-color: rgba(168, 85, 247, .5); transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(168, 85, 247, .2);
}
.bc-flow-number {
    width: 56px; height: 56px; border-radius: 50%; background: var(--grad-primary);
    color: #fff; font-size: 24px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; box-shadow: 0 6px 20px rgba(168, 85, 247, .4);
}
.bc-flow-step h4 { color: #fff; font-size: 1.15rem; font-weight: 700; margin: 0 0 12px; }
.bc-flow-step p { color: rgba(255,255,255,.7); font-size: .95rem; line-height: 1.6; margin: 0; }
.bc-flow-arrow { color: rgba(168, 85, 247, .6); font-size: 28px; font-weight: 700; display: flex; align-items: center; }
@media (max-width: 600px) { .bc-flow-arrow { display: none; } }
.bc-gigs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
@media (max-width: 1024px) { .bc-gigs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .bc-gigs-grid { grid-template-columns: 1fr; } }
.bc-gig-category {
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(168, 85, 247, .18); border-radius: 16px; padding: 28px 24px;
    text-align: center; transition: all .35s; position: relative; overflow: hidden;
}
.bc-gig-category::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--grad-primary); opacity: 0; transition: opacity .35s;
}
.bc-gig-category:hover {
    border-color: rgba(168, 85, 247, .4); transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(168, 85, 247, .2);
}
.bc-gig-category:hover::before { opacity: 1; }
.bc-gig-cat-icon { font-size: 42px; margin-bottom: 16px; display: inline-block; }
.bc-gig-category h4 { color: #fff; font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; }
.bc-gig-category p { color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.6; margin: 0 0 16px; }
.bc-gig-rate {
    display: inline-block; background: rgba(168, 85, 247, .15); color: #c084fc;
    padding: 6px 14px; border-radius: 50px; font-size: .85rem; font-weight: 600;
    border: 1px solid rgba(168, 85, 247, .3);
}

/* ===== HK Build Additions ===== */
.sb-benefits {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px 28px; max-width: 760px; margin: 0 auto 36px;
}
.sb-benefits span {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,.82); font-size: .98rem; font-weight: 500;
}
.sb-benefits span::before {
    content: '✓'; background: var(--grad-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; font-weight: 700; font-size: 1.1rem;
}
.sb-trust { margin-top: 8px; color: rgba(255,255,255,.55); font-size: .95rem; }
.sb-trust strong { color: #c084fc; }

.sb-bullets {
    list-style: none; padding: 0; margin: 28px auto 0; max-width: 640px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
}
.sb-bullets li {
    display: flex; align-items: flex-start; gap: 12px;
    color: rgba(255,255,255,.78); font-size: 1.02rem; line-height: 1.5;
}
.sb-bullets li::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--grad-primary); margin-top: 9px; flex-shrink: 0;
}
@media (max-width: 600px) { .sb-bullets { grid-template-columns: 1fr; } }

.sb-learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.sb-learn-card {
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 30px 28px;
    transition: all .35s; backdrop-filter: blur(10px); position: relative; overflow: hidden;
}
.sb-learn-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-primary); opacity: .8;
}
.sb-learn-card:hover {
    border-color: rgba(168,85,247,.35); transform: translateY(-5px);
    box-shadow: 0 18px 50px rgba(168,85,247,.15);
}
.sb-learn-card h3 {
    color: #fff; font-size: 1.2rem; font-weight: 700; margin: 0 0 16px;
    display: flex; align-items: center; gap: 10px;
}
.sb-learn-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sb-learn-card li { color: rgba(255,255,255,.72); font-size: .95rem; padding-left: 20px; position: relative; }
.sb-learn-card li::before { content: '•'; position: absolute; left: 0; color: #c084fc; font-weight: 700; }

.sb-steps { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; }
.sb-step {
    width: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(168,85,247,.25); border-radius: 16px; padding: 22px 26px;
    display: flex; align-items: center; gap: 18px; transition: all .3s;
}
.sb-step:hover {
    border-color: rgba(168,85,247,.5); transform: translateX(4px);
    box-shadow: 0 12px 36px rgba(168,85,247,.18);
}
.sb-step-num {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
    background: var(--grad-primary); color: #fff; font-weight: 700; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(168,85,247,.4);
}
.sb-step-text { color: #fff; font-size: 1.05rem; font-weight: 600; }
.sb-step-text small { display: block; color: rgba(255,255,255,.55); font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.sb-step-arrow { color: rgba(168,85,247,.6); font-size: 24px; margin: 8px 0; }

.sb-table-wrap { max-width: 720px; margin: 0 auto; overflow-x: auto; }
.sb-price-table {
    width: 100%; border-collapse: collapse; background: rgba(15,20,55,.5);
    border-radius: 16px; overflow: hidden; border: 1px solid rgba(168,85,247,.25);
}
.sb-price-table th, .sb-price-table td {
    padding: 16px 24px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.07);
}
.sb-price-table th {
    background: rgba(168,85,247,.15); color: #fff; font-weight: 700;
    font-size: .95rem; text-transform: uppercase; letter-spacing: .5px;
}
.sb-price-table td { color: rgba(255,255,255,.8); font-size: 1.02rem; }
.sb-price-table td:last-child { color: #c084fc; font-weight: 700; }
.sb-price-table tr:last-child td { border-bottom: none; }
.sb-price-table tbody tr:hover td { background: rgba(168,85,247,.06); }

.sb-example-box {
    max-width: 520px; margin: 36px auto 0; text-align: center;
    background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(236,72,153,.08));
    border: 1px solid rgba(168,85,247,.3); border-radius: 18px; padding: 28px 32px;
}
.sb-example-box .sb-ex-label { color: rgba(255,255,255,.6); font-size: .85rem; text-transform: uppercase; letter-spacing: 1.5px; }
.sb-example-box .sb-ex-total {
    font-size: 2rem; font-weight: 700; line-height: 1.35;
    background: var(--grad-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 6px; padding: 2px 4px 6px; word-break: keep-all; overflow-wrap: normal;
}
@media (max-width: 480px) { .sb-example-box .sb-ex-total { font-size: 1.5rem; } }

.sb-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) { .sb-roadmap { grid-template-columns: 1fr; } }
.sb-year {
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(168,85,247,.2); border-radius: 18px; padding: 28px 26px;
    text-align: center; transition: all .3s;
}
.sb-year:hover { border-color: rgba(168,85,247,.45); transform: translateY(-4px); }
.sb-year h3 { color: #fff; font-size: 1.3rem; font-weight: 700; margin: 0 0 16px; }
.sb-year h3 span {
    background: var(--grad-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sb-year ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sb-year li { color: rgba(255,255,255,.75); font-size: .98rem; }

.sb-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .sb-outcomes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sb-outcomes { grid-template-columns: 1fr; } }