/* ═══════════════════════════════════════════
   SeoWeb.top - Homepage Styles
   ═══════════════════════════════════════════ */

/* ─── HERO ─── */
.hero {
    position: relative; min-height: 95vh; display: flex; align-items: center;
    background: var(--gradient-dark); color: #fff; overflow: hidden;
    padding-top: 80px;
}
.hero-content { max-width: 800px; position: relative; z-index: 2; }
.hero-content h1 { 
    color: #fff; margin-bottom: var(--space-6); font-size: var(--text-6xl); 
    line-height: 1.1; font-weight: 800;
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}
.hero-desc { 
    font-size: var(--text-xl); color: var(--gray-300); margin-bottom: var(--space-10); 
    max-width: 600px; line-height: 1.7;
}

.hero-stats { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-8); margin-top: var(--space-4); }
.hero-stats .stat strong { font-family: var(--font-heading); font-size: var(--text-4xl); color: #fff; display: block; letter-spacing: -1px; }
.hero-stats .stat span { font-size: var(--text-sm); color: var(--gray-400); text-transform: uppercase; letter-spacing: 1px; }

/* Hero background shapes with animated glow */
.hero-bg-shapes { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.shape {
    position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.2;
    animation: float 10s ease-in-out infinite;
}
.shape-1 { width: 600px; height: 600px; background: var(--primary-600); top: -200px; right: -100px; }
.shape-2 { width: 450px; height: 450px; background: var(--secondary-700); bottom: -100px; left: 5%; animation-delay: 2s; }
.shape-3 { width: 300px; height: 300px; background: var(--accent-500); top: 30%; right: 15%; animation-delay: 4s; }


/* ─── Process with Honeycomb Effect (Dark Theme) ─── */
#process.section-dark {
    position: relative;
    overflow: hidden;
    background: var(--gradient-dark);
}

/* ─── Hiệu ứng "Mặt cắt ngang phẳng" (Flat Cross-section) ─── */
#process.section-dark::before {
    content: ''; position: absolute; inset: 0; opacity: 0.1;
    /* Họa tiết tổ ong nằm ngang (Flat-topped) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28'%3E%3Cpath d='M12 0L36 0L48 14L36 28L12 28L0 14Z' fill='none' stroke='%23ffffff' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 48px 28px; z-index: 0;
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 80%);
    mask-image: radial-gradient(circle at center, black 0%, transparent 80%);
}

/* Lớp ánh sáng đa sắc luồn lách trên mặt phẳng */
#process.section-dark::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background-image: 
        /* Tia sáng Cyan */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28'%3E%3Cpath d='M12 0L36 0L48 14L36 28L12 28L0 14Z' fill='none' stroke='%2322d3ee' stroke-width='1'/%3E%3C/svg%3E"),
        /* Tia sáng Emerald */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28'%3E%3Cpath d='M12 0L36 0L48 14L36 28L12 28L0 14Z' fill='none' stroke='%2310b981' stroke-width='1'/%3E%3C/svg%3E"),
        /* Tia sáng Trắng */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28'%3E%3Cpath d='M12 0L36 0L48 14L36 28L12 28L0 14Z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 48px 28px;
    -webkit-mask-image: 
        linear-gradient(135deg, white 0%, transparent 20%),
        linear-gradient(225deg, white 0%, transparent 20%),
        linear-gradient(90deg, white 0%, transparent 20%);
    mask-image: 
        linear-gradient(135deg, white 0%, transparent 20%),
        linear-gradient(225deg, white 0%, transparent 20%),
        linear-gradient(90deg, white 0%, transparent 20%);
    -webkit-mask-size: 25% 15%;
    mask-size: 25% 15%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: 
        meteorCyan 10s infinite linear,
        meteorGreen 14s infinite linear 3s,
        meteorWhite 18s infinite linear 6s;
    pointer-events: none;
}

@keyframes meteorCyan {
    0% { mask-position: -20% 10%; opacity:0; }
    10% { opacity: 1; }
    25% { mask-position: 25% 30%; }
    50% { mask-position: 50% 10%; }
    75% { mask-position: 75% 30%; }
    100% { mask-position: 120% 10%; opacity:0; }
}

@keyframes meteorGreen {
    0% { mask-position: 120% 80%; opacity:0; }
    10% { opacity: 1; }
    33% { mask-position: 80% 60%; }
    66% { mask-position: 40% 80%; }
    100% { mask-position: -20% 60%; opacity:0; }
}

@keyframes meteorWhite {
    0% { mask-position: 50% -20%; opacity:0; }
    10% { opacity: 1; }
    50% { mask-position: 50% 50%; }
    100% { mask-position: 50% 120%; opacity:0; }
}



#process .container { position: relative; z-index: 1; }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.process-grid::after {
    content: ''; position: absolute; top: 30%; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    z-index: -1;
}

.process-step {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-2xl);
    text-align: center;
    transition: all var(--transition-slow);
    position: relative;
}

.process-step:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 20px rgba(16, 185, 129, 0.1);
    border-color: var(--primary-400);
}

.process-step h4 { color: #fff; margin-bottom: var(--space-4); font-size: var(--text-xl); }
.process-step p { color: var(--gray-400); line-height: 1.7; font-size: var(--text-sm); }

.process-number {
    width: 60px; height: 60px; background: var(--gradient-primary);
    color: #fff; border-radius: var(--radius-xl); display: flex; align-items: center;
    justify-content: center; font-weight: 800; font-size: 24px;
    margin: 0 auto var(--space-8);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
    border: 2px solid rgba(255,255,255,0.2);
}


@media (max-width: 1024px) {
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid::after { display: none; }
}

@media (max-width: 768px) {
    .hero { min-height: auto; padding: var(--space-16) 0 var(--space-12); }
    .hero-content h1 { font-size: var(--text-4xl); }
    .hero-desc { font-size: var(--text-base); }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .hero-stats { flex-wrap: wrap; gap: var(--space-6) !important; }
}