body { background-color: #f8fafc; color: #334155; line-height: 1.7; }
        
        .page-header {
            background: white;
            padding: 60px 0;
            border-bottom: 1px solid #e2e8f0;
            margin-bottom: 50px;
        }

        .content-card {
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }

        h4 {
            color: #1e293b;
            font-weight: 700;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        h4 i { color: #2563eb; font-size: 1.2rem; }

        /* Roadmap Timeline Styling */
        .roadmap-list {
            list-style: none;
            padding-left: 20px;
            border-left: 2px solid #e2e8f0;
        }

        .roadmap-item {
            position: relative;
            padding-bottom: 25px;
            padding-left: 25px;
        }

        .roadmap-item::before {
            content: '';
            position: absolute;
            left: -27px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #2563eb;
            border: 2px solid white;
        }

        .roadmap-year {
            font-weight: 800;
            color: #1e293b;
            display: block;
            font-size: 0.9rem;
        }

        /* Profile Section */
        .profile-img {
            width: 100%;
            border-radius: 15px;
            filter: grayscale(20%);
            transition: all 0.3s;
            margin-bottom: 20px;
        }
        .profile-img:hover { filter: grayscale(0%); transform: scale(1.02); }

        .supporter-img {
            width: 24%;
            border-radius: 15px;
            filter: grayscale(20%);
            transition: all 0.3s;
        }
        .supporter-img:hover { filter: grayscale(0%); transform: scale(1.02); }

        .contact-info {
            background: #f1f5f9;
            padding: 20px;
            border-radius: 12px;
            font-size: 0.9rem;
        }

        .version-badge {
            display: inline-block;
            background: #1e293b;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            margin-bottom: 10px;
        }

        .btn-hubungi{

            display:inline-flex;

            width:100%;

            justify-content:center;

            align-items:center;

            gap:8px;

            padding:12px 22px;

            background:#2d6cdf;

            color:#fff;

            text-decoration:none;

            border-radius:999px;

            font-size:14px;

            font-weight:600;

            transition:.2s ease;

            box-shadow:
                0 4px 12px rgba(45,108,223,.18);
        }

        .btn-hubungi:hover{

            background:#1f5bd0;

            color:#fff;

            text-decoration:none;

            transform:translateY(-2px);

            box-shadow:
                0 8px 18px rgba(45,108,223,.24);
        }