:root {
    --vp-primary: #8A2BE2;
    --vp-primary-dark: #7B24CC;
    --vp-secondary: #4169E1;
    --vp-gradient: linear-gradient(135deg, #8A2BE2 0%, #4169E1 100%);
    --vp-gradient-soft: linear-gradient(135deg, rgba(138,43,226,.12) 0%, rgba(65,105,225,.12) 100%);
    --vp-text: #1f2937;
    --vp-muted: #6b7280;
    --vp-border: #e5e7eb;
    --vp-bg: #f9fafb;
    --vp-card: #ffffff;
    --vp-radius: 1rem;
    --vp-shadow: 0 10px 40px rgba(138, 43, 226, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--vp-text);
    background: var(--vp-bg);
    line-height: 1.6;
}
a { color: var(--vp-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.container { width: min(1200px, 92%); margin: 0 auto; }
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }

.gradient-text {
    background: var(--vp-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gradient-bg { background: var(--vp-gradient); }

/* Header */
.vp-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(138,43,226,.08);
}
.vp-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 0;
}
.vp-logo {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 700; font-size: 1.35rem; color: var(--vp-text);
    text-decoration: none;
}
.vp-logo:hover { text-decoration: none; }
.vp-logo-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--vp-gradient);
    display: grid; place-items: center; color: #fff; font-size: 1.1rem;
}
.vp-logo-img {
    height: 34px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}
.vp-menu { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.vp-menu a { color: #374151; font-weight: 500; font-size: .95rem; text-decoration: none; }
.vp-menu a:hover, .vp-menu a.active { color: var(--vp-primary); }
.vp-nav-actions { display: flex; gap: .75rem; align-items: center; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .75rem 1.4rem; border-radius: 999px; font-weight: 600;
    border: none; cursor: pointer; transition: transform .2s, box-shadow .2s;
    text-decoration: none; font-size: .95rem;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary { background: var(--vp-gradient); color: #fff; box-shadow: 0 8px 24px rgba(138,43,226,.25); }
.btn-outline { background: #fff; color: var(--vp-primary); border: 1px solid rgba(138,43,226,.25); }
.btn-white { background: #fff; color: var(--vp-primary); }

.menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--vp-primary); cursor: pointer; }

/* Mobile drawer menu */
.vp-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(85%, 360px);
    background: linear-gradient(165deg, #1d0a33 0%, #0d0518 100%);
    color: #fff; z-index: 300;
    transform: translateX(105%);
    transition: transform .3s ease;
    padding: 1.25rem 1.5rem;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.vp-drawer.open { transform: none; }
.vp-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(10, 4, 20, .55);
    z-index: 290; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.vp-drawer-backdrop.show { opacity: 1; pointer-events: auto; }
.vp-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.vp-drawer-logo {
    display: inline-flex; padding: .45rem 1rem; border-radius: .9rem;
    background: rgba(138, 43, 226, .25);
    font-family: Georgia, 'Times New Roman', serif; font-style: italic;
    font-weight: 700; font-size: 1.1rem; color: #d8b4fe;
}
.vp-drawer-close { background: none; border: none; color: #c084fc; font-size: 1.7rem; cursor: pointer; line-height: 1; }
.vp-drawer-menu { list-style: none; margin: 0; padding: 0; }
.vp-drawer-menu li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.vp-drawer-menu a {
    display: block; padding: 1rem 0;
    color: #f3f4f6; font-size: 1.05rem; font-weight: 500; text-decoration: none;
}
.vp-drawer-menu a:hover { color: #c084fc; text-decoration: none; }
.vp-drawer-cta { margin: 1.5rem 0 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.vp-drawer-cta .btn { width: 100%; }
.vp-drawer-follow { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 1.25rem; margin-top: auto; }
.vp-drawer-follow > span { color: #9ca3af; font-size: .92rem; }
.vp-social { display: flex; gap: .75rem; margin-top: .75rem; }
.vp-social a {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: grid; place-items: center; color: #fff; font-size: 1.1rem; text-decoration: none;
}
.vp-social a:hover { background: rgba(138, 43, 226, .45); text-decoration: none; }

/* Hero */
.hero {
    position: relative; overflow: hidden;
    padding: 6rem 0 5rem;
    background: radial-gradient(circle at top right, rgba(65,105,225,.12), transparent 35%),
                radial-gradient(circle at bottom left, rgba(138,43,226,.15), transparent 40%);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.1; margin: 0 0 1rem; }
.hero p { font-size: 1.15rem; color: var(--vp-muted); max-width: 560px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; }
.badge-card {
    background: #fff; border: 1px solid var(--vp-border); border-radius: 1rem;
    padding: 1rem 1.25rem; min-width: 120px; box-shadow: var(--vp-shadow);
}
.badge-card strong { display: block; font-size: 1.5rem; color: var(--vp-primary); }
.preview-card {
    background: #fff; border-radius: 1.5rem; padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(17,24,39,.12); border: 1px solid rgba(138,43,226,.08);
}
.file-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem; border-radius: 1rem; background: var(--vp-gradient-soft); margin-bottom: .75rem;
}
.file-row:last-child { margin-bottom: 0; }

/* Floating shapes */
.shape { position: absolute; pointer-events: none; opacity: .25; z-index: 0; }
.shape-1 { top: 8%; left: 4%; animation: float 8s ease-in-out infinite; }
.shape-2 { bottom: 10%; right: 6%; animation: floatSlow 10s ease-in-out infinite; }
.shape-3 { top: 35%; left: 20%; animation: floatReverse 12s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translate(0,0)} 33%{transform:translate(10px,-20px)} 66%{transform:translate(-8px,10px)} }
@keyframes floatSlow { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(15px,-30px) rotate(5deg)} }
@keyframes floatReverse { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-15px,15px)} 66%{transform:translate(10px,-10px)} }

/* Cards & grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.card {
    background: var(--vp-card); border-radius: var(--vp-radius);
    border: 1px solid var(--vp-border); padding: 1.75rem; box-shadow: var(--vp-shadow);
    transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(138,43,226,.12); }
.card-icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: var(--vp-gradient-soft); color: var(--vp-primary); font-size: 1.4rem; margin-bottom: 1rem;
}
.section-title { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.section-title h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .75rem; }
.section-title p { color: var(--vp-muted); font-size: 1.05rem; }

/* Page hero */
.page-hero {
    padding: 4.5rem 0 3rem; text-align: center;
    background: var(--vp-gradient-soft);
    border-bottom: 1px solid rgba(138,43,226,.08);
}
.page-hero .eyebrow {
    display: inline-block; padding: .35rem .9rem; border-radius: 999px;
    background: #fff; color: var(--vp-primary); font-weight: 600; font-size: .85rem; margin-bottom: 1rem;
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .75rem; }
.page-hero p { color: var(--vp-muted); max-width: 720px; margin: 0 auto; }

/* Legal / content */
.content-wrap { max-width: 900px; margin: 0 auto; }
.legal-nav {
    display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem;
    position: sticky; top: 76px; z-index: 10; background: var(--vp-bg); padding: .5rem 0;
}
.legal-nav a {
    padding: .45rem .9rem; border-radius: 999px; background: #fff;
    border: 1px solid var(--vp-border); color: #374151; font-size: .85rem;
}
.legal-nav a:hover { border-color: var(--vp-primary); color: var(--vp-primary); text-decoration: none; }
.legal-block { margin-bottom: 2rem; }
.legal-block h2 { font-size: 1.5rem; margin-top: 2rem; }
.legal-block h3 { font-size: 1.15rem; margin-top: 1.25rem; color: #374151; }
.legal-block ul { padding-left: 1.25rem; }
.legal-block li { margin-bottom: .5rem; }
.legal-pre {
    background: #111827; color: #e5e7eb; padding: 1.25rem; border-radius: 1rem;
    overflow-x: auto; white-space: pre-wrap; font-size: .85rem; line-height: 1.55;
}

/* FAQ */
.faq-item { border: 1px solid var(--vp-border); border-radius: 1rem; background: #fff; margin-bottom: 1rem; overflow: hidden; }
.faq-q {
    width: 100%; text-align: left; background: #fff; border: none; padding: 1.1rem 1.25rem;
    font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem;
}
.faq-a { display: none; padding: 0 1.25rem 1.1rem; color: var(--vp-muted); }
.faq-item.open .faq-a { display: block; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.faq-tab {
    padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--vp-border);
    background: #fff; cursor: pointer; font-weight: 600; color: #374151;
}
.faq-tab.active { background: var(--vp-gradient); color: #fff; border-color: transparent; }
.faq-section { display: none; }
.faq-section.active { display: block; }

/* Contact form */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9rem; }
.form-control {
    width: 100%; padding: .85rem 1rem; border: 1px solid var(--vp-border);
    border-radius: .85rem; font: inherit; background: #fff;
}
.form-control:focus { outline: none; border-color: var(--vp-primary); box-shadow: 0 0 0 3px rgba(138,43,226,.12); }
textarea.form-control { min-height: 140px; resize: vertical; }

/* Events countdown */
.countdown { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; }
.count-box {
    min-width: 90px; background: #fff; border-radius: 1rem; padding: 1rem;
    text-align: center; border: 1px solid var(--vp-border); box-shadow: var(--vp-shadow);
}
.count-box strong { display: block; font-size: 2rem; color: var(--vp-primary); }
.countdown-item {
    min-width: 80px; background: #fff; border-radius: 1rem; padding: 1rem;
    text-align: center; border: 1px solid var(--vp-border); box-shadow: var(--vp-shadow);
}
.countdown-item span { display: block; font-size: 2rem; font-weight: 700; color: var(--vp-primary); line-height: 1; }
.countdown-item small { color: var(--vp-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.reward-card { border-left: 4px solid var(--vp-primary); }
.reward-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; }
.reward-meta div { display: flex; flex-direction: column; }
.reward-meta strong { font-size: 1.1rem; color: var(--vp-text); }
.reward-meta span { font-size: .8rem; color: var(--vp-muted); }

/* Features tabs */
.feature-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.feature-tab {
    padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--vp-border); background: #fff; cursor: pointer; font-weight: 600;
}
.feature-tab.active { background: var(--vp-gradient); color: #fff; border-color: transparent; }
.feature-panel { display: none; }
.feature-panel.active { display: block; }

/* Stats */
.stat-number { font-size: 2.2rem; font-weight: 700; color: var(--vp-primary); }

/* Footer */
.vp-footer {
    background: #111827; color: #d1d5db; padding: 4rem 0 2rem; margin-top: 4rem;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.footer-grid h4 { color: #fff; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .55rem; }
.footer-grid a { color: #d1d5db; text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08); margin-top: 2rem; padding-top: 1.5rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem;
}
.status-pill {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem;
    border-radius: 999px; background: rgba(34,197,94,.15); color: #86efac; font-size: .85rem;
}

/* Cookie banner */
#cookie-consent {
    position: fixed; right: 1rem; bottom: 1rem; left: 1rem; max-width: 520px; margin-left: auto;
    background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
    border: 1px solid rgba(138,43,226,.15); border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(17,24,39,.15); padding: 1.25rem; z-index: 200;
}
#cookie-consent.hidden { display: none; }
.cookie-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }

/* Compare table */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.compare-card.highlight { border: 2px solid var(--vp-primary); position: relative; }
.compare-card.highlight::before {
    content: 'BETTER CHOICE'; position: absolute; top: -12px; left: 1rem;
    background: var(--vp-gradient); color: #fff; font-size: .75rem; font-weight: 700;
    padding: .25rem .65rem; border-radius: 999px;
}

/* CTA band */
.cta-band {
    background: var(--vp-gradient); color: #fff; border-radius: 1.5rem;
    padding: 3rem 2rem; text-align: center; margin: 2rem 0;
}
.cta-band h2 { margin-top: 0; }

/* Avatars + payment pills */
.avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vp-gradient); color: #fff; font-weight: 700; font-size: .9rem;
}
.payment-options { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.pay-pill {
    display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem;
    border-radius: 999px; background: #fff; border: 1px solid var(--vp-border);
    box-shadow: var(--vp-shadow); font-weight: 600;
}
.pay-pill i { color: var(--vp-primary); font-size: 1.2rem; }

/* App Download Section & Mockup */
.app-section { background: #fff; padding: 5rem 0; }
.app-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
.app-features { display: flex; flex-direction: column; gap: 1.5rem; margin: 2rem 0; }
.app-feature { display: flex; gap: 1rem; align-items: start; }
.app-feature-icon {
    width: 44px; height: 44px; border-radius: 12px; background: var(--vp-gradient-soft);
    color: var(--vp-primary); display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 44px;
}
.app-feature-text h4 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 600; }
.app-feature-text p { margin: 0; color: var(--vp-muted); font-size: .92rem; }
.store-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; align-items: center; }
.store-btn {
    display: inline-flex; align-items: center; gap: .75rem; background: #111827; color: #fff;
    padding: .6rem 1.25rem; border-radius: .75rem; font-weight: 600; text-decoration: none;
    transition: transform .2s, background-color .2s; border: 1px solid rgba(255,255,255,.1);
}
.store-btn:hover { background: #1f2937; color: #fff; transform: translateY(-2px); text-decoration: none; }
.store-btn i { font-size: 1.6rem; }
.store-btn-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-btn-text small { font-size: .7rem; font-weight: 400; color: #9ca3af; }
.store-btn-text span { font-size: .95rem; font-weight: 600; }
.app-rating { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-size: .9rem; color: var(--vp-muted); }
.app-rating i { color: #fbbf24; }
.app-mockup {
    position: relative; background: #111827; border-radius: 2.5rem; padding: .75rem;
    box-shadow: 0 30px 60px rgba(17,24,39,.15); border: 4px solid #1f2937; max-width: 310px; margin: 0 auto;
}
.app-mockup-screen {
    background: var(--vp-bg); border-radius: 2rem; padding: 1.25rem; overflow: hidden;
    height: 440px; display: flex; flex-direction: column; position: relative;
}
.app-mockup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: .8rem; font-weight: 600; color: var(--vp-muted); }
.app-mockup-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; color: var(--vp-text); }
.app-mockup-files { display: flex; flex-direction: column; gap: .75rem; overflow-y: auto; flex-grow: 1; }
.app-mockup-file {
    background: #fff; border-radius: .75rem; padding: .75rem; border: 1px solid var(--vp-border);
    display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.02);
}
.app-mockup-file-info { display: flex; flex-direction: column; gap: .15rem; }
.app-mockup-file-name { font-weight: 600; font-size: .8rem; color: var(--vp-text); }
.app-mockup-file-size { font-size: .7rem; color: var(--vp-muted); }
.app-mockup-file-status { font-size: .7rem; font-weight: 600; color: #16a34a; background: #dcfce7; padding: .2rem .5rem; border-radius: 999px; }

/* Responsive */
@media (max-width: 992px) {
    .hero-grid, .grid-4, .footer-grid, .compare-grid, .app-grid { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .vp-menu {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; background: #fff; padding: 1rem 4%;
        border-bottom: 1px solid var(--vp-border); box-shadow: var(--vp-shadow);
    }
    .vp-menu.open { display: flex; }
    .hero-grid, .grid-2, .grid-3, .grid-4, .footer-grid, .compare-grid, .app-grid { grid-template-columns: 1fr; }
    .hero { padding-top: 4rem; }
    /* Mobile: header me buttons nahi — sab kuch drawer (three line) me */
    .vp-nav-actions { display: none; }
    /* Mobile: hero demo earnings card (Tutorial.mp4 etc.) hide */
    .hero .preview-card { display: none; }
    .app-grid { gap: 2.5rem; }
}