<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title><?php echo e(config('app.name', 'Laravel')); ?></title>

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

        <style>
            *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

            :root {
                --cyan: #00f5ff;
                --blue: #0066ff;
                --dark: #020510;
                --dark2: #050c1a;
                --dark3: #071225;
                --glow: rgba(0, 245, 255, 0.15);
                --text: #e8f4ff;
                --muted: #5a7a9a;
            }

            html { scroll-behavior: smooth; }

            body {
                font-family: 'Syne', sans-serif;
                background: var(--dark);
                color: var(--text);
                min-height: 100vh;
                overflow-x: hidden;
            }

            /* ── BACKGROUND ── */
            .bg-grid {
                position: fixed;
                inset: 0;
                background-image:
                    linear-gradient(rgba(0,102,255,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,102,255,0.06) 1px, transparent 1px);
                background-size: 60px 60px;
                pointer-events: none;
                z-index: 0;
            }

            .bg-glow-1 {
                position: fixed;
                top: -20%;
                right: -10%;
                width: 700px;
                height: 700px;
                background: radial-gradient(circle, rgba(0,102,255,0.18) 0%, transparent 70%);
                pointer-events: none;
                z-index: 0;
                animation: pulseGlow 6s ease-in-out infinite;
            }

            .bg-glow-2 {
                position: fixed;
                bottom: -30%;
                left: -15%;
                width: 800px;
                height: 800px;
                background: radial-gradient(circle, rgba(0,245,255,0.10) 0%, transparent 65%);
                pointer-events: none;
                z-index: 0;
                animation: pulseGlow 8s ease-in-out infinite reverse;
            }

            @keyframes pulseGlow {
                0%, 100% { opacity: 0.8; transform: scale(1); }
                50% { opacity: 1; transform: scale(1.08); }
            }

            /* ── NAV ── */
            nav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 100;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px 60px;
                background: linear-gradient(180deg, rgba(2,5,16,0.95) 0%, transparent 100%);
                backdrop-filter: blur(8px);
                border-bottom: 1px solid rgba(0,245,255,0.06);
            }

            .nav-logo {
                display: flex;
                align-items: center;
                gap: 12px;
                text-decoration: none;
            }

            .logo-icon {
                width: 36px;
                height: 36px;
                background: linear-gradient(135deg, var(--blue), var(--cyan));
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: 'Space Mono', monospace;
                font-weight: 700;
                font-size: 14px;
                color: #000;
                box-shadow: 0 0 20px rgba(0,245,255,0.3);
            }

            .logo-text {
                font-size: 18px;
                font-weight: 700;
                color: var(--text);
                letter-spacing: 0.04em;
            }

            .nav-links {
                display: flex;
                align-items: center;
                gap: 40px;
                list-style: none;
            }

            .nav-links a {
                text-decoration: none;
                color: var(--muted);
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                transition: color 0.2s;
            }

            .nav-links a:hover { color: var(--cyan); }

            .nav-actions {
                display: flex;
                gap: 12px;
                align-items: center;
            }

            .btn-outline {
                padding: 9px 22px;
                border: 1px solid rgba(0,245,255,0.35);
                border-radius: 6px;
                background: transparent;
                color: var(--text);
                font-family: 'Syne', sans-serif;
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                text-decoration: none;
                transition: all 0.2s;
                letter-spacing: 0.04em;
            }

            .btn-outline:hover {
                border-color: var(--cyan);
                color: var(--cyan);
                box-shadow: 0 0 16px rgba(0,245,255,0.2);
            }

            .btn-primary {
                padding: 9px 22px;
                border: none;
                border-radius: 6px;
                background: linear-gradient(135deg, var(--blue), var(--cyan));
                color: #000;
                font-family: 'Syne', sans-serif;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                text-decoration: none;
                transition: all 0.25s;
                letter-spacing: 0.04em;
                box-shadow: 0 0 24px rgba(0,245,255,0.3);
            }

            .btn-primary:hover {
                transform: translateY(-1px);
                box-shadow: 0 0 36px rgba(0,245,255,0.5);
            }

            /* ── HERO ── */
            .hero {
                position: relative;
                z-index: 1;
                min-height: 100vh;
                display: flex;
                align-items: center;
                padding: 120px 60px 80px;
            }

            .hero-content {
                max-width: 620px;
            }

            .hero-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 16px;
                background: rgba(0,245,255,0.08);
                border: 1px solid rgba(0,245,255,0.2);
                border-radius: 100px;
                font-size: 12px;
                font-family: 'Space Mono', monospace;
                color: var(--cyan);
                letter-spacing: 0.08em;
                text-transform: uppercase;
                margin-bottom: 32px;
                animation: fadeSlideUp 0.6s ease both;
            }

            .badge-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--cyan);
                box-shadow: 0 0 8px var(--cyan);
                animation: blink 2s ease infinite;
            }

            @keyframes blink {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.3; }
            }

            .hero-title {
                font-size: clamp(52px, 7vw, 88px);
                font-weight: 800;
                line-height: 1.0;
                letter-spacing: -0.03em;
                margin-bottom: 28px;
                animation: fadeSlideUp 0.7s 0.1s ease both;
            }

            .hero-title .accent {
                background: linear-gradient(135deg, var(--blue), var(--cyan));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .hero-desc {
                font-size: 17px;
                line-height: 1.7;
                color: var(--muted);
                margin-bottom: 48px;
                max-width: 480px;
                animation: fadeSlideUp 0.7s 0.2s ease both;
            }

            .hero-cta {
                display: flex;
                gap: 16px;
                flex-wrap: wrap;
                animation: fadeSlideUp 0.7s 0.3s ease both;
            }

            .btn-hero-primary {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 15px 36px;
                background: linear-gradient(135deg, var(--blue), var(--cyan));
                border: none;
                border-radius: 8px;
                color: #000;
                font-family: 'Syne', sans-serif;
                font-size: 15px;
                font-weight: 700;
                cursor: pointer;
                text-decoration: none;
                letter-spacing: 0.02em;
                box-shadow: 0 0 40px rgba(0,245,255,0.3), 0 8px 32px rgba(0,102,255,0.3);
                transition: all 0.3s;
            }

            .btn-hero-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 0 60px rgba(0,245,255,0.5), 0 16px 48px rgba(0,102,255,0.4);
            }

            .btn-hero-secondary {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 15px 36px;
                background: transparent;
                border: 1px solid rgba(0,245,255,0.3);
                border-radius: 8px;
                color: var(--text);
                font-family: 'Syne', sans-serif;
                font-size: 15px;
                font-weight: 600;
                cursor: pointer;
                text-decoration: none;
                letter-spacing: 0.02em;
                transition: all 0.3s;
            }

            .btn-hero-secondary:hover {
                border-color: var(--cyan);
                color: var(--cyan);
                background: rgba(0,245,255,0.05);
            }

            /* ── HERO VISUAL ── */
            .hero-visual {
                position: absolute;
                right: 0;
                top: 0;
                width: 55%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                pointer-events: none;
                overflow: hidden;
            }

            .orb-container {
                position: relative;
                width: 520px;
                height: 520px;
            }

            .orb {
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 35% 35%,
                    rgba(0,102,255,0.4) 0%,
                    rgba(0,245,255,0.15) 40%,
                    transparent 70%
                );
                animation: orbFloat 6s ease-in-out infinite;
                box-shadow:
                    0 0 80px rgba(0,245,255,0.2),
                    inset 0 0 80px rgba(0,102,255,0.15);
            }

            .orb-ring {
                position: absolute;
                border-radius: 50%;
                border: 1px solid rgba(0,245,255,0.15);
                animation: orbRingRotate linear infinite;
            }

            .ring-1 { inset: -30px; animation-duration: 20s; }
            .ring-2 { inset: -60px; animation-duration: 35s; animation-direction: reverse; border-color: rgba(0,102,255,0.12); }
            .ring-3 { inset: -100px; animation-duration: 55s; border-color: rgba(0,245,255,0.06); }

            .ring-dot {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--cyan);
                box-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan);
                margin-left: -4px;
            }

            .ring-2 .ring-dot {
                background: var(--blue);
                box-shadow: 0 0 12px var(--blue), 0 0 24px var(--blue);
            }

            @keyframes orbFloat {
                0%, 100% { transform: translateY(0) scale(1); }
                50% { transform: translateY(-20px) scale(1.02); }
            }

            @keyframes orbRingRotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }

            .orb-center {
                position: absolute;
                inset: 60px;
                border-radius: 50%;
                background: linear-gradient(135deg, rgba(0,102,255,0.5), rgba(0,245,255,0.3));
                filter: blur(2px);
                animation: orbFloat 4s 1s ease-in-out infinite;
            }

            /* ── STATS ── */
            .stats-section {
                position: relative;
                z-index: 1;
                padding: 0 60px 100px;
            }

            .stats-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 1px;
                background: rgba(0,245,255,0.08);
                border: 1px solid rgba(0,245,255,0.08);
                border-radius: 16px;
                overflow: hidden;
            }

            .stat-card {
                background: var(--dark2);
                padding: 40px 36px;
                transition: background 0.3s;
            }

            .stat-card:hover {
                background: var(--dark3);
            }

            .stat-icon {
                width: 44px;
                height: 44px;
                border-radius: 10px;
                background: rgba(0,245,255,0.08);
                border: 1px solid rgba(0,245,255,0.15);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 24px;
                font-size: 20px;
            }

            .stat-label {
                font-size: 11px;
                font-family: 'Space Mono', monospace;
                text-transform: uppercase;
                letter-spacing: 0.12em;
                color: var(--muted);
                margin-bottom: 10px;
            }

            .stat-value {
                font-size: 30px;
                font-weight: 800;
                background: linear-gradient(135deg, var(--text), var(--cyan));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                letter-spacing: -0.02em;
            }

            /* ── FEATURES ── */
            .features-section {
                position: relative;
                z-index: 1;
                padding: 80px 60px;
            }

            .section-label {
                font-size: 11px;
                font-family: 'Space Mono', monospace;
                text-transform: uppercase;
                letter-spacing: 0.15em;
                color: var(--cyan);
                margin-bottom: 20px;
            }

            .section-title {
                font-size: clamp(36px, 4vw, 54px);
                font-weight: 800;
                line-height: 1.1;
                letter-spacing: -0.03em;
                margin-bottom: 60px;
                max-width: 500px;
            }

            .features-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }

            .feature-card {
                background: var(--dark2);
                border: 1px solid rgba(0,245,255,0.08);
                border-radius: 16px;
                padding: 36px;
                transition: all 0.3s;
                position: relative;
                overflow: hidden;
            }

            .feature-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 1px;
                background: linear-gradient(90deg, transparent, var(--cyan), transparent);
                opacity: 0;
                transition: opacity 0.3s;
            }

            .feature-card:hover {
                border-color: rgba(0,245,255,0.2);
                transform: translateY(-4px);
                box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(0,245,255,0.08);
            }

            .feature-card:hover::before { opacity: 1; }

            .feature-num {
                font-family: 'Space Mono', monospace;
                font-size: 11px;
                color: rgba(0,245,255,0.4);
                letter-spacing: 0.1em;
                margin-bottom: 24px;
            }

            .feature-icon {
                font-size: 28px;
                margin-bottom: 20px;
            }

            .feature-title {
                font-size: 20px;
                font-weight: 700;
                margin-bottom: 14px;
                letter-spacing: -0.01em;
            }

            .feature-desc {
                font-size: 14px;
                line-height: 1.7;
                color: var(--muted);
            }

            /* ── CTA BAND ── */
            .cta-section {
                position: relative;
                z-index: 1;
                padding: 80px 60px 120px;
            }

            .cta-card {
                background: linear-gradient(135deg, var(--dark3), var(--dark2));
                border: 1px solid rgba(0,245,255,0.12);
                border-radius: 24px;
                padding: 80px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 40px;
                position: relative;
                overflow: hidden;
            }

            .cta-card::after {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at 70% 50%, rgba(0,245,255,0.06) 0%, transparent 60%);
                pointer-events: none;
            }

            .cta-title {
                font-size: clamp(32px, 3.5vw, 48px);
                font-weight: 800;
                letter-spacing: -0.03em;
                line-height: 1.1;
                max-width: 500px;
            }

            /* ── FOOTER ── */
            footer {
                position: relative;
                z-index: 1;
                border-top: 1px solid rgba(0,245,255,0.08);
                padding: 36px 60px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .footer-copy {
                font-size: 13px;
                color: var(--muted);
                font-family: 'Space Mono', monospace;
            }

            .footer-links {
                display: flex;
                gap: 32px;
                list-style: none;
            }

            .footer-links a {
                font-size: 13px;
                color: var(--muted);
                text-decoration: none;
                transition: color 0.2s;
                font-family: 'Space Mono', monospace;
            }

            .footer-links a:hover { color: var(--cyan); }

            /* ── ANIMATIONS ── */
            @keyframes fadeSlideUp {
                from { opacity: 0; transform: translateY(24px); }
                to { opacity: 1; transform: translateY(0); }
            }

            .reveal {
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.7s ease, transform 0.7s ease;
            }

            .reveal.visible {
                opacity: 1;
                transform: translateY(0);
            }

            /* ── RESPONSIVE ── */
            @media (max-width: 1024px) {
                nav { padding: 18px 30px; }
                .nav-links { display: none; }
                .hero { padding: 100px 30px 60px; }
                .hero-visual { display: none; }
                .hero-content { max-width: 100%; }
                .stats-section { padding: 0 30px 80px; }
                .stats-grid { grid-template-columns: repeat(2, 1fr); }
                .features-section { padding: 60px 30px; }
                .features-grid { grid-template-columns: 1fr; }
                .cta-section { padding: 60px 30px 100px; }
                .cta-card { padding: 48px 40px; flex-direction: column; text-align: center; }
                footer { padding: 30px; flex-direction: column; gap: 20px; text-align: center; }
            }
        </style>
    </head>
    <body>

        <!-- Background -->
        <div class="bg-grid"></div>
        <div class="bg-glow-1"></div>
        <div class="bg-glow-2"></div>

        <!-- Nav -->
        <nav>
            <a href="/" class="nav-logo">
                <div class="logo-icon"><?php echo e(substr(config('app.name', 'L'), 0, 1)); ?></div>
                <span class="logo-text"><?php echo e(config('app.name', 'Laravel')); ?></span>
            </a>

            <ul class="nav-links">
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Características</a></li>
                <li><a href="#">Documentación</a></li>
                <li><a href="#">Soporte</a></li>
            </ul>

            <div class="nav-actions">
                <?php if(Route::has('login')): ?>
                    <?php if(auth()->guard()->check()): ?>
                        <a href="<?php echo e(url('/dashboard')); ?>" class="btn-outline">Dashboard</a>
                    <?php else: ?>
                        <a href="<?php echo e(route('login')); ?>" class="btn-outline">Iniciar sesión</a>
                        <?php if(Route::has('register')): ?>
                            <a href="<?php echo e(route('register')); ?>" class="btn-primary">Registrarse</a>
                        <?php endif; ?>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
        </nav>

        <!-- Hero -->
        <section class="hero">
            <div class="hero-content">
                <div class="hero-badge">
                    <span class="badge-dot"></span>
                    Powered by Laravel
                </div>

                <h1 class="hero-title">
                    Tu plataforma<br>
                    <span class="accent">del futuro.</span>
                </h1>

                <p class="hero-desc">
                    Construida con Laravel, diseñada para escalar. Una experiencia moderna, segura y de alto rendimiento desde el primer día.
                </p>

                <div class="hero-cta">
                    <?php if(Route::has('register')): ?>
                        <a href="<?php echo e(route('register')); ?>" class="btn-hero-primary">
                            Comenzar ahora
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </a>
                    <?php endif; ?>
                    <a href="https://laravel.com/docs" target="_blank" class="btn-hero-secondary">
                        Documentación
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                            <path d="M2 2h10M7 2v10M2 12L12 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Orb -->
            <div class="hero-visual">
                <div class="orb-container">
                    <div class="orb-ring ring-1"><span class="ring-dot"></span></div>
                    <div class="orb-ring ring-2"><span class="ring-dot"></span></div>
                    <div class="orb-ring ring-3"></div>
                    <div class="orb"></div>
                    <div class="orb-center"></div>
                </div>
            </div>
        </section>

        <!-- Stats -->
        <section class="stats-section reveal">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">⚡</div>
                    <div class="stat-label">Rendimiento</div>
                    <div class="stat-value">99.9%</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">🔐</div>
                    <div class="stat-label">Seguridad</div>
                    <div class="stat-value">A+</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">🌐</div>
                    <div class="stat-label">Uptime</div>
                    <div class="stat-value">24/7</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">🚀</div>
                    <div class="stat-label">Versión Laravel</div>
                    <div class="stat-value">v<?php echo e(app()->version()); ?></div>
                </div>
            </div>
        </section>

        <!-- Features -->
        <section class="features-section">
            <div class="section-label">Capacidades</div>
            <h2 class="section-title reveal">Todo lo que necesitas para construir.</h2>

            <div class="features-grid">
                <div class="feature-card reveal">
                    <div class="feature-num">01</div>
                    <div class="feature-icon">🗃️</div>
                    <h3 class="feature-title">Eloquent ORM</h3>
                    <p class="feature-desc">ORM expresivo e intuitivo para interactuar con tu base de datos de forma elegante y productiva.</p>
                </div>
                <div class="feature-card reveal" style="transition-delay:0.1s">
                    <div class="feature-num">02</div>
                    <div class="feature-icon">🔒</div>
                    <h3 class="feature-title">Autenticación</h3>
                    <p class="feature-desc">Sistema de autenticación robusto y flexible con soporte para roles, permisos y autenticación social.</p>
                </div>
                <div class="feature-card reveal" style="transition-delay:0.2s">
                    <div class="feature-num">03</div>
                    <div class="feature-icon">📡</div>
                    <h3 class="feature-title">API REST</h3>
                    <p class="feature-desc">Construye APIs rápidas y bien estructuradas con las herramientas integradas de Laravel.</p>
                </div>
                <div class="feature-card reveal" style="transition-delay:0.3s">
                    <div class="feature-num">04</div>
                    <div class="feature-icon">⚙️</div>
                    <h3 class="feature-title">Colas & Jobs</h3>
                    <p class="feature-desc">Procesa tareas en segundo plano de manera eficiente con el sistema de colas de Laravel.</p>
                </div>
                <div class="feature-card reveal" style="transition-delay:0.4s">
                    <div class="feature-num">05</div>
                    <div class="feature-icon">📦</div>
                    <h3 class="feature-title">Cache & Storage</h3>
                    <p class="feature-desc">Abstracción unificada para caché y almacenamiento de archivos en múltiples drivers.</p>
                </div>
                <div class="feature-card reveal" style="transition-delay:0.5s">
                    <div class="feature-num">06</div>
                    <div class="feature-icon">🧪</div>
                    <h3 class="feature-title">Testing</h3>
                    <p class="feature-desc">Herramientas de testing expresivas para garantizar que tu aplicación funcione perfectamente.</p>
                </div>
            </div>
        </section>

        <!-- CTA -->
        <section class="cta-section reveal">
            <div class="cta-card">
                <h2 class="cta-title">Listo para empezar a construir algo increíble?</h2>
                <div style="flex-shrink:0; display:flex; gap:16px; flex-wrap:wrap;">
                    <?php if(Route::has('register')): ?>
                        <a href="<?php echo e(route('register')); ?>" class="btn-hero-primary">
                            Crear cuenta
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </a>
                    <?php endif; ?>
                    <?php if(Route::has('login')): ?>
                        <a href="<?php echo e(route('login')); ?>" class="btn-hero-secondary">Iniciar sesión</a>
                    <?php endif; ?>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <footer>
            <span class="footer-copy">&copy; <?php echo e(date('Y')); ?> <?php echo e(config('app.name', 'Laravel')); ?>. All rights reserved.</span>
            <ul class="footer-links">
                <li><a href="https://laravel.com/docs" target="_blank">Docs</a></li>
                <li><a href="https://laracasts.com" target="_blank">Laracasts</a></li>
                <li><a href="https://laravel.com/privacy" target="_blank">Privacidad</a></li>
            </ul>
        </footer>

        <script>
            // Scroll reveal
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
        </script>
    </body>
</html><?php /**PATH C:\Users\hp\sistema_pago\resources\views/welcome.blade.php ENDPATH**/ ?>