/* index.php — landing page (hero, mockup, stats, how-it-works, features, premium CTA) */

/* ── Hero ── */
.hero-v2 {
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 60px;
    position: relative;
    overflow: hidden;
}
.hero-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(129,140,248,.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 60%, rgba(255,70,85,.08) 0%, transparent 60%);
    pointer-events: none;
}
.hero-v2-inner {
    max-width: 1100px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
@media(max-width:768px){
    .hero-v2-inner { grid-template-columns:1fr; gap: var(--sp-11); }
    .hero-v2-visual { display:none; }
}
.hero-v2-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--brand-accent);
    background: rgba(129,140,248,.12);
    border: 1px solid rgba(129,140,248,.25);
    border-radius: var(--radius-xl);
    padding: 5px 12px;
    margin-bottom: var(--sp-8);
}
.hero-v2-title {
    font-family: 'Teko', sans-serif;
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    color: var(--text-white);
    margin-bottom: 18px;
}
.hero-v2-title span { color: var(--brand-accent); }
.hero-v2-sub {
    font-size: var(--fs-xl);
    color: var(--text-gray);
    line-height: 1.65;
    margin-bottom: var(--sp-10);
    max-width: 460px;
}
.hero-v2-ctas { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.btn-hero-primary {
    background: var(--brand-accent);
    color: var(--text-white);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    padding: 13px 28px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.btn-hero-primary:hover { opacity: .88; transform: translateY(-1px); }
.btn-hero-secondary {
    background: transparent;
    color: var(--text-white);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    padding: 13px 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.btn-hero-secondary:hover { border-color: var(--brand-accent); transform: translateY(-1px); }

/* ── Dashboard mockup ── */
.hero-v2-visual {
    position: relative;
}
.dash-mockup {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--bg-elevated);
    position: relative;
}
.dash-mockup::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius-lg) + 1px);
    background: linear-gradient(135deg, rgba(129,140,248,.3), transparent 60%);
    z-index: var(--z-behind);
}
.dm-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-7);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.dm-dot { width: 10px; height: 10px; border-radius: var(--radius-circle); }
.dm-dot-r { background: #ff5f57; }
.dm-dot-y { background: #febc2e; }
.dm-dot-g { background: #28c840; }
.dm-title { font-size: var(--fs-xs); color: var(--text-gray); margin-left: auto; }

.dm-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.dm-kpi {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-4);
    text-align: center;
}
.dm-kpi-val { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--text-white); }
.dm-kpi-lbl { font-size: var(--fs-3xs); color: var(--text-gray); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.dm-kpi-accent { color: var(--brand-accent) !important; }
.dm-kpi-green  { color: var(--green) !important; }

.dm-matches { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--sp-5); }
.dm-match {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border-left: 3px solid;
    background: rgba(255,255,255,.03);
    font-size: var(--fs-xs);
}
.dm-match-w { border-color: var(--green); }
.dm-match-l { border-color: var(--valorant-red, #ff4655); }
.dm-match-map { font-weight: var(--fw-bold); color: var(--text-white); flex: 1; }
.dm-match-kda { color: var(--text-gray); }
.dm-match-res { font-weight: var(--fw-bold); font-size: var(--fs-2xs); }
.dm-match-w .dm-match-res { color: var(--green); }
.dm-match-l .dm-match-res { color: var(--valorant-red, #ff4655); }

.dm-bar-wrap { margin-top: var(--sp-1); }
.dm-bar-label { font-size: var(--fs-3xs); color: var(--text-gray); margin-bottom: var(--sp-1); }
.dm-bar-track { background: var(--border); border-radius: var(--radius-xs); height: 5px; overflow: hidden; }
.dm-bar-fill  { height: 100%; border-radius: var(--radius-xs); background: var(--brand-accent); }

/* ── Stats banner ── */
.stats-banner-v2 {
    display: flex;
    justify-content: center;
    gap: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 28px 24px;
    flex-wrap: wrap;
}
.sbv2-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-5) var(--sp-11);
    border-right: 1px solid var(--border);
}
.sbv2-item:last-child { border-right: none; }
.sbv2-val { font-family: 'Teko', sans-serif; font-size: var(--fs-5xl); font-weight: var(--fw-bold); color: var(--text-white); line-height: 1; }
.sbv2-val span { color: var(--brand-accent); }
.sbv2-lbl { font-size: var(--fs-xs); color: var(--text-gray); text-transform: uppercase; letter-spacing: .08em; margin-top: var(--sp-1); }
@media(max-width:640px){
    .sbv2-item { padding: var(--sp-5) var(--sp-8); border-right: none; border-bottom: 1px solid var(--border); width: 50%; }
    .sbv2-item:nth-child(odd) { border-right: 1px solid var(--border); }
    .sbv2-item:last-child { border-bottom: none; }
}

/* ── How it works ── */
.how-section {
    max-width: 900px;
    margin: 80px auto;
    padding: 0 var(--sp-9);
    text-align: center;
}
.section-eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--brand-accent);
    margin-bottom: var(--sp-4);
}
.section-heading {
    font-family: 'Teko', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: var(--fw-bold);
    color: var(--text-white);
    margin-bottom: var(--sp-5);
}
.section-sub {
    color: var(--text-gray);
    font-size: var(--fs-lg);
    line-height: 1.6;
    margin-bottom: var(--sp-12);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--sp-9);
    text-align: left;
}
@media(max-width:640px){ .steps-grid { grid-template-columns:1fr; } }
.step-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-9);
    position: relative;
}
.step-num {
    font-family: 'Teko', sans-serif;
    font-size: var(--fs-7xl);
    font-weight: var(--fw-bold);
    color: rgba(129,140,248,.2);
    line-height: 1;
    margin-bottom: var(--sp-5);
}
.step-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(61,219,217,.1); color: #3ddbd9; margin-bottom: var(--sp-6); }
.step-title { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text-white); margin-bottom: var(--sp-2); }
.step-desc { font-size: var(--fs-sm); color: var(--text-gray); line-height: 1.55; }

/* ── Features v2 ── */
.features-v2 {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 var(--sp-9);
}
.features-v2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-7);
}
.fv2-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-9);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.fv2-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fv2-icon {
    font-size: var(--fs-3xl);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-6);
}
.fv2-icon-purple { background: rgba(129,140,248,.12); color: var(--brand-accent); }
.fv2-icon-red    { background: rgba(255,70,85,.1);   color: #ff4655; }
.fv2-icon-green  { background: rgba(52,211,153,.1);  color: var(--green); }
.fv2-icon-amber  { background: rgba(245,158,11,.1);  color: #f59e0b; }
.fv2-icon-blue   { background: rgba(56,189,248,.1);  color: #38bdf8; }
.fv2-icon-pink   { background: rgba(232,121,249,.1); color: #e879f9; }
.fv2-title { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text-white); margin-bottom: 7px; }
.fv2-desc  { font-size: var(--fs-sm); color: var(--text-gray); line-height: 1.55; }
.fv2-tag {
    display: inline-block;
    margin-top: var(--sp-4);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    background: rgba(129,140,248,.12);
    color: var(--brand-accent);
}
.fv2-tag-free { background: rgba(52,211,153,.12); color: var(--green); }

/* ── Premium CTA ── */
.premium-cta-section {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 72px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.premium-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(129,140,248,.08) 0%, transparent 70%);
    pointer-events: none;
}
.premium-cta-eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--amber, #f59e0b);
    margin-bottom: var(--sp-5);
}
.premium-cta-title {
    font-family: 'Teko', sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: var(--fw-bold);
    color: var(--text-white);
    margin-bottom: var(--sp-6);
}
.premium-cta-title span { color: var(--brand-accent); }
.premium-cta-sub {
    color: var(--text-gray);
    font-size: var(--fs-lg);
    max-width: 480px;
    margin: 0 auto var(--sp-10);
    line-height: 1.6;
}
.premium-perks {
    display: flex;
    justify-content: center;
    gap: var(--sp-8);
    flex-wrap: wrap;
    margin-bottom: var(--sp-10);
}
.perk-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-gray);
}
.perk-item::before { content: '✓'; color: var(--green); font-weight: var(--fw-bold); }