.breadcrumb {
            padding: 7rem 2rem 1rem;
            max-width: 1200px; margin: 0 auto;
            font-size: 0.85rem; color: var(--text-muted);
        }
        .breadcrumb a { color: var(--primary); transition: opacity 0.3s; }
        .breadcrumb a:hover { opacity: 0.7; }
        .breadcrumb span { margin: 0 0.5rem; }

        /* HERO */
        .hero {
            position: relative;
            padding: 2rem 2rem 4rem;
            overflow: hidden;
            background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 50%, #f0fdf4 100%);
        }
        .hero-inner {
            max-width: 1200px; margin: 0 auto;
            display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
            align-items: center;
        }
        .hero-text h1 {
            font-size: 3rem; font-weight: 900; line-height: 1.1;
            margin-bottom: 1.2rem;
            background: linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-text p {
            font-size: 1.15rem; color: var(--text-secondary);
            line-height: 1.7; margin-bottom: 2rem; max-width: 500px;
        }
        .hero-stats {
            display: flex; gap: 2rem; flex-wrap: wrap;
        }
        .hero-stat {
            text-align: center;
        }
        .hero-stat-num {
            font-size: 2.2rem; font-weight: 800; color: var(--primary);
            line-height: 1;
        }
        .hero-stat-label {
            font-size: 0.8rem; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.3rem;
        }
        .hero-img {
            position: relative; border-radius: 20px; overflow: hidden;
            box-shadow: var(--shadow-lg);
        }
        .hero-img img {
            width: 100%; height: 400px; object-fit: cover; display: block;
        }
        .hero-badge {
            position: absolute; top: 1rem; right: 1rem;
            background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
            padding: 0.5rem 1rem; border-radius: 50px;
            font-size: 0.8rem; font-weight: 600; color: var(--primary);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        /* FLOATING SHAPES */
        .float-shape {
            position: absolute; border-radius: 50%; opacity: 0.1;
            animation: float 8s ease-in-out infinite;
        }
        .float-shape:nth-child(1) { width: 200px; height: 200px; background: var(--primary); top: 10%; left: -5%; animation-delay: 0s; }
        .float-shape:nth-child(2) { width: 150px; height: 150px; background: var(--accent); top: 60%; right: -3%; animation-delay: 2s; }
        .float-shape:nth-child(3) { width: 100px; height: 100px; background: #7c3aed; bottom: 10%; left: 30%; animation-delay: 4s; }
        @keyframes float {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-20px) scale(1.05); }
        }

        /* CATEGORIES SECTION */
        .categories-section {
            padding: 5rem 2rem;
            max-width: 1200px; margin: 0 auto;
        }
        .section-header {
            text-align: center; margin-bottom: 3.5rem;
        }
        .section-tag {
            display: inline-block;
            padding: 0.4rem 1rem; border-radius: 50px;
            background: var(--primary-light); color: var(--primary);
            font-size: 0.8rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 1px;
            margin-bottom: 1rem;
        }
        .section-header h2 {
            font-size: 2.2rem; font-weight: 800; margin-bottom: 0.8rem;
        }
        .section-header p {
            font-size: 1.05rem; color: var(--text-muted); max-width: 600px; margin: 0 auto;
        }

        /* CATEGORY GRID */
        .cat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 2rem;
        }
        .cat-card {
            background: var(--bg);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid var(--border);
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
            position: relative;
        }
        .cat-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
            border-color: transparent;
        }
        .cat-img-wrap {
            position: relative; height: 220px; overflow: hidden;
        }
        .cat-img-wrap img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
        }
        .cat-card:hover .cat-img-wrap img {
            transform: scale(1.08);
        }
        .cat-img-overlay {
            position: absolute; inset: 0;
            pointer-events: none;
        }
        .cat-icon {
            position: absolute; top: 1rem; left: 1rem;
            width: 48px; height: 48px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .cat-body {
            padding: 1.5rem;
        }
        .cat-title {
            font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem;
        }
        .cat-desc {
            font-size: 0.9rem; color: var(--text-muted);
            line-height: 1.6; margin-bottom: 1.2rem;
        }
        .cat-link {
            display: inline-flex; align-items: center; gap: 0.5rem;
            font-size: 0.9rem; font-weight: 600;
            transition: gap 0.3s;
        }
        .cat-link:hover { gap: 0.8rem; }
        .cat-link svg { transition: transform 0.3s; }
        .cat-link:hover svg { transform: translateX(3px); }

        /* CTA SECTION */
        .cta-section {
            padding: 5rem 2rem;
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            text-align: center; position: relative; overflow: hidden;
        }
        .cta-section::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(circle at 30% 50%, rgba(37,99,235,0.15), transparent 60%),
                        radial-gradient(circle at 70% 50%, rgba(8,145,178,0.1), transparent 60%);
        }
        .cta-inner {
            position: relative; z-index: 1;
            max-width: 700px; margin: 0 auto;
        }
        .cta-inner h2 {
            font-size: 2.5rem; font-weight: 800; color: #fff; margin-bottom: 1rem;
        }
        .cta-inner p {
            font-size: 1.1rem; color: rgba(255,255,255,0.7); margin-bottom: 2rem;
        }
        .cta-btns {
            display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
        }
        .cta-btn {
            padding: 0.9rem 2rem; border-radius: 12px;
            font-weight: 700; font-size: 1rem;
            transition: all 0.3s; cursor: pointer; border: none;
        }
        .cta-btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: #fff;
        }
        .cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37,99,235,0.4); }
        .cta-btn-outline {
            background: transparent; color: #fff;
            border: 2px solid rgba(255,255,255,0.3);
        }
        .cta-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.05); }