* {
            box-sizing: border-box
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', system-ui, sans-serif;
            color: var(--ink);
            background:
                radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 55%),
                radial-gradient(circle at bottom right, rgba(34, 197, 94, .15), transparent 55%),
                var(--soft);
        }

                /* HERO */
                .hero {
                    padding: 140px 20px 160px;
                    text-align: center;
                }
        
                .hero h1 {
                    font-size: 64px;
                    max-width: 1000px;
                    margin: 0 auto 24px;
                    line-height: 1.1;
                }
        
                .hero h1 span {
                    background: linear-gradient(90deg, var(--blue), var(--green));
                    -webkit-background-clip: text;
                    color: transparent;
                }
        
                .hero p {
                    font-size: 22px;
                    max-width: 900px;
                    margin: auto;
                    color: var(--muted);
                }
        
                /* SECTION */
                .section {
                    padding: 120px 20px;
                    max-width: 1200px;
                    margin: auto;
                }
        
                .section h2 {
                    font-size: 44px;
                    margin-bottom: 20px;
                    text-align: center;
                }
        
                .section p.sub {
                    text-align: center;
                    max-width: 820px;
                    margin: auto;
                    color: var(--muted);
                    font-size: 19px;
                }
        
                /* PRODUCT GRID */
                .grid {
                    margin-top: 80px;
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                    gap: 44px;
                }
        
                .card {
                    background: var(--card);
                    padding: 46px 38px;
                    border-radius: var(--radius);
                    box-shadow: 0 40px 80px rgba(0, 0, 0, .08);
                    transition: .4s ease;
                }
        
                .card:hover {
                    transform: translateY(-14px);
                    box-shadow: 0 55px 120px rgba(0, 0, 0, .15);
                }
        
                .card h3 {
                    font-size: 28px;
                    margin-bottom: 10px;
                }
        
                .card p {
                    color: var(--muted);
                    line-height: 1.7;
                }
        
                /* TAGS */
                .tag {
                    display: inline-block;
                    margin-bottom: 18px;
                    padding: 6px 16px;
                    border-radius: 999px;
                    font-size: 13px;
                    font-weight: 600;
                }
        
                .fashion {
                    background: #fff3d6;
                    color: #9a6700
                }
        
                .home {
                    background: #e6f9ef;
                    color: #15803d
                }
        
                .games {
                    background: #efe9ff;
                    color: #6d28d9
                }
        
                .mobility {
                    background: #e0f2fe;
                    color: #0369a1
                }
        
                /* FEATURE */
                .feature {
                    margin-top: 140px;
                    background: linear-gradient(135deg, #020617, #0f172a);
                    color: white;
                    border-radius: 5px;
                    padding: 100px 50px;
                    text-align: center;
                }
        
                .theme-toggle {
                    border: none;
                    background: rgba(0, 0, 0, .05);
                    padding: 8px 14px;
                    border-radius: 999px;
                    cursor: pointer;
                    font-size: 16px;
                }
        
        
                .feature h2 {
                    color: #38bdf8;
                }
        
                .feature p {
                    max-width: 900px;
                    margin: auto;
                    font-size: 20px;
                    color: #cbd5f5;
                }

        /* Additional Tags */
        .robotics {
            background: #e0f2fe;
            color: #0369a1;
        }
    
        .network {
            background: #ecfeff;
            color: #0e7490;
        }
    
        .simulation {
            background: #f1f5f9;
            color: #334155;
        }
    
        .electronics {
            background: #fef3c7;
            color: #92400e;
        }
    
        .card-link {
            display: block;
            text-decoration: none;
            color: inherit;
            /* inherit text color */
        }
    
        .card-link .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
    
        .card-link .card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
    
        .mobile {
            background: #e0f7fa;
            color: #006064;
        }
    
        .software {
            background: #f3e8ff;
            /* Soft purple tone for premium feel */
            color: #7c3aed;
            /* Deep purple text */
        }

@media(max-width:700px) {
    .hero h1 {
        font-size: 40px
    }

    .section h2 {
        font-size: 32px
    }
}

                :root {
                    --ink: #0f172a;
                    --muted: #64748b;
                    --soft: #f8fafc;
                    --card: #ffffff;
                    --blue: #2563eb;
                    --green: #22c55e;
                    --gold: #f5c77a;
                    --radius: 32px;
                }
        
                :root.mehfilotus {
                    --brand: #7a1f3d;
                    --accent: #f7b72c;
                    --bg: #fdf8f2;
                }
        
                :root.delome {
                    --brand: #22c55e;
                    --accent: #f5c77a;
                    --bg: #fefefe;
                }
        
                :root.odome {
                    --brand: #0ea5e9;
                    --accent: #38bdf8;
                    --bg: #020617;
                }