/* =============================================
   LANDING PAGE — Coaching Platform Pro
   Premium Design System
   ============================================= */

:root {
    --lp-primary: #4F46E5;
    --lp-primary-dark: #3730A3;
    --lp-primary-light: #818CF8;
    --lp-accent: #06B6D4;
    --lp-accent2: #8B5CF6;
    --lp-success: #059669;
    --lp-warning: #F59E0B;
    --lp-dark: #0F172A;
    --lp-dark2: #1E293B;
    --lp-text: #334155;
    --lp-muted: #64748B;
    --lp-light: #F8FAFC;
    --lp-border: #E2E8F0;
    --lp-white: #FFFFFF;
    --lp-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #06B6D4 100%);
    --lp-gradient2: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --lp-shadow: 0 20px 60px rgba(79,70,229,0.15);
    --lp-shadow-lg: 0 32px 80px rgba(15,23,42,0.2);
    --lp-radius: 16px;
    --lp-radius-lg: 24px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--lp-text);
    background: var(--lp-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ===== HEADER / NAV ===== */
.lp-header {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    padding: 12px 0;
    transition: all 0.3s ease;
    background: transparent;
}
.lp-header.scrolled {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 20px rgba(0,0,0,0.08);
    padding: 8px 0;
}
.lp-nav {
    max-width: 1280px; margin:0 auto; padding:0 24px;
    display: flex; align-items:center; justify-content:space-between;
}
.lp-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.lp-logo img { height:40px; width:auto; }
.lp-logo-text { font-size:1.15rem; font-weight:800; color:var(--lp-white); letter-spacing:-0.5px; }
.lp-header.scrolled .lp-logo-text { color:var(--lp-dark); }

.lp-nav-links { display:flex; gap:28px; align-items:center; }
.lp-nav-links a {
    font-size:0.88rem; font-weight:500; color:rgba(255,255,255,0.85);
    text-decoration:none; transition:all 0.2s; position:relative;
}
.lp-nav-links a:hover { color:#fff; }
.lp-header.scrolled .lp-nav-links a { color:var(--lp-text); }
.lp-header.scrolled .lp-nav-links a:hover { color:var(--lp-primary); }

.lp-nav-cta {
    padding:8px 22px; border-radius:50px; font-size:0.85rem; font-weight:600;
    background: var(--lp-gradient); color:#FFFFFF !important;
    text-decoration:none; transition:all 0.3s;
    border:1px solid rgba(255,255,255,0.2);
}
.lp-nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(79,70,229,0.4); color:#fff !important; }
.lp-header.scrolled .lp-nav-cta { background:var(--lp-gradient); color:#fff !important; border-color:transparent; }

.lp-mobile-toggle { display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; }

/* ===== HERO ===== */
.lp-hero {
    min-height: 100vh;
    background: var(--lp-gradient2);
    position: relative;
    display:flex; align-items:center;
    padding: 100px 0 60px;
    overflow: hidden;
}
.lp-hero::before {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(79,70,229,0.25) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(6,182,212,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(139,92,246,0.2) 0%, transparent 50%);
    pointer-events:none;
}
/* Blockchain canvas overlay */
#blockchainCanvas {
    position:absolute; top:0; left:0; width:100%; height:100%;
    pointer-events:none; z-index:1; opacity:0.6;
}
.lp-hero-inner {
    max-width:1280px; margin:0 auto; padding:0 24px; width:100%;
    display:grid; grid-template-columns:1fr 420px; gap:60px; align-items:center;
    position:relative; z-index:2;
}
.lp-hero-content { color:#fff; }
.lp-hero-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 16px; border-radius:50px;
    background:rgba(79,70,229,0.3); border:1px solid rgba(129,140,248,0.3);
    font-size:0.78rem; font-weight:600; color:var(--lp-primary-light);
    margin-bottom:20px; backdrop-filter:blur(10px);
}
.lp-hero-title {
    font-size:3.2rem; font-weight:900; line-height:1.15; letter-spacing:-1.5px;
    margin-bottom:20px;
}
.lp-hero-title span {
    background: linear-gradient(135deg, #818CF8, #06B6D4);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.lp-hero-desc {
    font-size:1.1rem; line-height:1.7; color:rgba(255,255,255,0.7);
    margin-bottom:28px; max-width:520px;
}
.lp-hero-stats {
    display:flex; gap:32px; margin-top:32px;
}
.lp-hero-stat { text-align:center; }
.lp-hero-stat-num { font-size:2rem; font-weight:800; color:#fff; }
.lp-hero-stat-label { font-size:0.72rem; color:rgba(255,255,255,0.5); margin-top:2px; }

/* Login Card */
.lp-login-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--lp-radius-lg);
    padding: 32px;
    box-shadow: 0 32px 64px rgba(0,0,0,0.3);
}
.lp-login-header { text-align:center; margin-bottom:24px; }
.lp-login-header h2 { color:#fff; font-size:1.3rem; font-weight:700; margin-bottom:4px; }
.lp-login-header p { color:rgba(255,255,255,0.5); font-size:0.82rem; }
.lp-login-card .lp-form-group { margin-bottom:14px; }
.lp-login-card label { display:block; color:rgba(255,255,255,0.7); font-size:0.82rem; font-weight:500; margin-bottom:6px; }
.lp-login-card input[type="email"],
.lp-login-card input[type="password"] {
    width:100%; padding:12px 16px; border-radius:12px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.06); color:#fff;
    font-size:0.9rem; font-family:inherit; transition:all 0.3s;
    outline:none;
}
.lp-login-card input::placeholder { color:rgba(255,255,255,0.3); }
.lp-login-card input:focus {
    border-color:var(--lp-primary-light);
    background:rgba(255,255,255,0.1);
    box-shadow: 0 0 0 3px rgba(129,140,248,0.2);
}
.lp-login-btn {
    width:100%; padding:14px; border:none; border-radius:12px;
    background:var(--lp-gradient); color:#fff;
    font-size:0.95rem; font-weight:700; cursor:pointer;
    transition:all 0.3s; margin-top:8px; font-family:inherit;
}
.lp-login-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(79,70,229,0.4); }
.lp-login-footer { text-align:center; margin-top:16px; font-size:0.82rem; color:rgba(255,255,255,0.5); }
.lp-login-footer a { color:var(--lp-primary-light); text-decoration:none; font-weight:600; }
.lp-login-footer a:hover { color:#fff; }
.lp-login-err { color:#F87171; font-size:0.75rem; margin-top:4px; }

/* ===== STATS BAR ===== */
.lp-stats {
    background: var(--lp-white);
    padding: 0;
    position: relative;
    z-index: 3;
    margin-top: -40px;
}
.lp-stats-inner {
    max-width:1100px; margin:0 auto; padding:0 24px;
}
.lp-stats-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    background:var(--lp-white); border-radius:var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-lg);
    overflow:hidden;
}
.lp-stats-item {
    padding:28px 20px; text-align:center;
    border-right:1px solid var(--lp-border);
    transition: background 0.3s;
}
.lp-stats-item:last-child { border-right:none; }
.lp-stats-item:hover { background:var(--lp-light); }
.lp-stats-icon { font-size:1.6rem; margin-bottom:8px; }
.lp-stats-num { font-size:1.8rem; font-weight:800; color:var(--lp-dark); }
.lp-stats-label { font-size:0.78rem; color:var(--lp-muted); margin-top:2px; }

/* ===== SECTION BASE ===== */
.lp-section {
    padding: 80px 0;
}
.lp-container {
    max-width:1200px; margin:0 auto; padding:0 24px;
}
.lp-section-header {
    text-align:center; margin-bottom:50px;
}
.lp-section-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 16px; border-radius:50px;
    background:rgba(79,70,229,0.08); color:var(--lp-primary);
    font-size:0.78rem; font-weight:600; margin-bottom:14px;
}
.lp-section-title {
    font-size:2.2rem; font-weight:800; color:var(--lp-dark);
    letter-spacing:-1px; margin-bottom:12px; line-height:1.2;
}
.lp-section-desc {
    font-size:1rem; color:var(--lp-muted); max-width:600px; margin:0 auto; line-height:1.7;
}

/* ===== FEATURES ===== */
.lp-features-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.lp-feature-card {
    padding:32px 24px; border-radius:var(--lp-radius);
    background:var(--lp-white); border:1px solid var(--lp-border);
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    position:relative; overflow:hidden;
}
.lp-feature-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--lp-gradient); transform:scaleX(0); transform-origin:left;
    transition:transform 0.4s;
}
.lp-feature-card:hover {
    transform:translateY(-6px);
    box-shadow: var(--lp-shadow);
    border-color:transparent;
}
.lp-feature-card:hover::before { transform:scaleX(1); }
.lp-feature-icon {
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; margin-bottom:16px;
}
.lp-feature-title { font-size:1.05rem; font-weight:700; color:var(--lp-dark); margin-bottom:8px; }
.lp-feature-desc { font-size:0.85rem; color:var(--lp-muted); line-height:1.6; }

/* ===== FRAMEWORKS SHOWCASE ===== */
.lp-frameworks {
    background: var(--lp-gradient2);
    padding: 80px 0;
    position:relative; overflow:hidden;
}
.lp-frameworks::before {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background: radial-gradient(ellipse at 30% 50%, rgba(79,70,229,0.2) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 50%, rgba(6,182,212,0.15) 0%, transparent 50%);
    pointer-events:none;
}
.lp-frameworks .lp-section-title { color:#fff; }
.lp-frameworks .lp-section-desc { color:rgba(255,255,255,0.6); }
.lp-fw-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
    position:relative; z-index:2;
}
.lp-fw-card {
    padding:24px 20px; border-radius:var(--lp-radius);
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
    backdrop-filter:blur(10px); text-align:center;
    transition:all 0.3s;
}
.lp-fw-card:hover {
    background:rgba(255,255,255,0.12);
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(0,0,0,0.2);
}
.lp-fw-icon { font-size:2.2rem; margin-bottom:10px; }
.lp-fw-name { font-size:0.9rem; font-weight:700; color:#fff; margin-bottom:4px; }
.lp-fw-desc { font-size:0.75rem; color:rgba(255,255,255,0.5); line-height:1.5; }

/* ===== HOW IT WORKS ===== */
.lp-steps-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
    position:relative;
}
.lp-step { text-align:center; position:relative; }
.lp-step-num {
    width:64px; height:64px; border-radius:50%;
    background:var(--lp-gradient); color:#fff;
    font-size:1.5rem; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px; position:relative; z-index:2;
    box-shadow:0 8px 25px rgba(79,70,229,0.3);
}
.lp-step-title { font-size:1.1rem; font-weight:700; color:var(--lp-dark); margin-bottom:8px; }
.lp-step-desc { font-size:0.88rem; color:var(--lp-muted); line-height:1.6; }

/* ===== TRAINING SECTION ===== */
.lp-training {
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 50%, #F0FDFA 100%);
    padding: 80px 0;
    position: relative;
}
.lp-training-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
}
.lp-training-visual {
    display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.lp-training-card {
    padding:28px 20px; border-radius:var(--lp-radius);
    background:var(--lp-white); border:1px solid var(--lp-border);
    transition:all 0.4s; text-align:center;
    box-shadow:0 4px 15px rgba(0,0,0,0.04);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.lp-training-card:hover {
    transform:translateY(-4px); box-shadow:var(--lp-shadow);
    border-color:var(--lp-primary-light);
}
.lp-training-card-icon { font-size:2.2rem; margin-bottom:10px; }
.lp-training-card-title { font-size:0.92rem; font-weight:700; color:var(--lp-dark); margin-bottom:6px; }
.lp-training-card-desc { font-size:0.78rem; color:var(--lp-muted); line-height:1.5; }
.lp-training-content h2 {
    font-size:2rem; font-weight:800; color:var(--lp-dark); margin-bottom:16px;
    letter-spacing:-1px; line-height:1.2;
}
.lp-training-content h2 span {
    background:var(--lp-gradient); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
}
.lp-training-content p {
    font-size:0.95rem; color:var(--lp-muted); line-height:1.7; margin-bottom:20px;
}
.lp-training-features { list-style:none; padding:0; margin:0 0 24px; }
.lp-training-features li {
    padding:8px 0; font-size:0.88rem; color:var(--lp-text);
    display:flex; align-items:center; gap:10px;
}
.lp-training-features li::before {
    content:'✅'; font-size:0.85rem; flex-shrink:0;
}
.lp-training-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 28px; border-radius:50px;
    background:var(--lp-gradient); color:#fff;
    text-decoration:none; font-size:0.9rem; font-weight:600;
    transition:all 0.3s;
}
.lp-training-btn:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(79,70,229,0.3); }

/* ===== TESTIMONIALS ===== */
.lp-testimonials { background:var(--lp-light); }
.lp-testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.lp-testi-card {
    padding:28px 24px; border-radius:var(--lp-radius);
    background:var(--lp-white); box-shadow:0 4px 20px rgba(0,0,0,0.06);
    transition:all 0.3s;
}
.lp-testi-card:hover { transform:translateY(-4px); box-shadow:var(--lp-shadow); }
.lp-testi-quote { font-size:0.88rem; color:var(--lp-text); line-height:1.7; margin-bottom:16px; font-style:italic; }
.lp-testi-author { display:flex; align-items:center; gap:10px; }
.lp-testi-avatar {
    width:40px; height:40px; border-radius:50%;
    background:var(--lp-gradient); display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:0.85rem; flex-shrink:0;
}
.lp-testi-name { font-size:0.85rem; font-weight:600; color:var(--lp-dark); }
.lp-testi-role { font-size:0.72rem; color:var(--lp-muted); }

/* ===== CTA ===== */
.lp-cta {
    padding:80px 0; text-align:center;
    background: var(--lp-gradient);
    position:relative; overflow:hidden;
}
.lp-cta::before {
    content:''; position:absolute; inset:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23fff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events:none;
}
.lp-cta-title { font-size:2.5rem; font-weight:900; color:#fff; margin-bottom:14px; letter-spacing:-1px; }
.lp-cta-desc { font-size:1.1rem; color:rgba(255,255,255,0.8); margin-bottom:30px; max-width:600px; margin-left:auto; margin-right:auto; }
.lp-cta-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:16px 40px; border-radius:50px;
    background:#fff; color:var(--lp-primary);
    font-size:1.05rem; font-weight:700; text-decoration:none;
    transition:all 0.3s; position:relative; z-index:2;
}
.lp-cta-btn:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(0,0,0,0.2); }

/* ===== FOOTER ===== */
.lp-footer {
    background: var(--lp-dark);
    color: rgba(255,255,255,0.6);
    padding:60px 0 0;
}
.lp-footer-grid {
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.lp-footer-brand p { font-size:0.85rem; line-height:1.7; margin-top:14px; }
.lp-footer-col h4 { color:#fff; font-size:0.9rem; font-weight:700; margin-bottom:14px; }
.lp-footer-col a { display:block; font-size:0.82rem; color:rgba(255,255,255,0.5); text-decoration:none; padding:4px 0; transition:color 0.2s; }
.lp-footer-col a:hover { color:var(--lp-primary-light); }
.lp-footer-bottom {
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 0; font-size:0.78rem;
}
.lp-footer-social { display:flex; gap:12px; }
.lp-footer-social a {
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.6); text-decoration:none; font-size:0.9rem;
    transition:all 0.3s;
}
.lp-footer-social a:hover { background:var(--lp-primary); color:#fff; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
    .lp-hero-inner { grid-template-columns:1fr; gap:40px; text-align:center; }
    .lp-hero-title { font-size:2.4rem; }
    .lp-hero-desc { margin:0 auto 28px; }
    .lp-hero-stats { justify-content:center; }
    .lp-login-card { max-width:420px; margin:0 auto; }
    .lp-features-grid { grid-template-columns:repeat(2,1fr); }
    .lp-fw-grid { grid-template-columns:repeat(2,1fr); }
    .lp-footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
    .lp-nav-links { display:none; }
    .lp-mobile-toggle { display:block; }
    .lp-hero { padding:80px 0 50px; min-height:auto; }
    .lp-hero-title { font-size:2rem; }
    .lp-hero-desc { font-size:0.95rem; }
    .lp-hero-stats { gap:20px; flex-wrap:wrap; }
    .lp-hero-stat-num { font-size:1.5rem; }
    .lp-stats-grid { grid-template-columns:repeat(2,1fr); }
    .lp-stats-item:nth-child(2) { border-right:none; }
    .lp-section { padding:50px 0; }
    .lp-section-title { font-size:1.6rem; }
    .lp-features-grid { grid-template-columns:1fr; }
    .lp-steps-grid { grid-template-columns:1fr; gap:24px; }
    .lp-testi-grid { grid-template-columns:1fr; }
    .lp-fw-grid { grid-template-columns:1fr 1fr; }
    .lp-training-grid { grid-template-columns:1fr; }
    .lp-training-visual { grid-template-columns:1fr 1fr; }
    .lp-cta-title { font-size:1.8rem; }
    .lp-footer-grid { grid-template-columns:1fr; gap:24px; }
    .lp-footer-bottom { flex-direction:column; gap:12px; text-align:center; }
}

@media (max-width:480px) {
    .lp-hero-title { font-size:1.6rem; }
    .lp-login-card { padding:24px 20px; }
    .lp-fw-grid { grid-template-columns:1fr; }
    .lp-stats-grid { grid-template-columns:1fr 1fr; }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(30px); }
    to { opacity:1; transform:translateY(0); }
}
.lp-animate {
    opacity:0; animation: fadeInUp 0.7s ease forwards;
}
.lp-hero .lp-animate {
    opacity:1; animation: none;
}
.lp-animate-d1 { animation-delay:0.1s; }
.lp-animate-d2 { animation-delay:0.2s; }
.lp-animate-d3 { animation-delay:0.3s; }
.lp-animate-d4 { animation-delay:0.4s; }
.lp-animate-d5 { animation-delay:0.5s; }
.lp-animate-d6 { animation-delay:0.6s; }

/* Floating animation */
@keyframes float {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-8px); }
}
.lp-float { animation: float 4s ease-in-out infinite; }

/* Pulse glow */
@keyframes pulseGlow {
    0%,100% { box-shadow:0 0 20px rgba(79,70,229,0.2); }
    50% { box-shadow:0 0 40px rgba(79,70,229,0.4); }
}