/* ====== STYLE DASAR HALAMAN ====== */
        :root{
            --primary:#1e88e5;
            --secondary:#0d47a1;
            --bg:#0b1020;
            --card:#141c33;
            --accent:#26c6da;
            --text:#f5f7ff;
        }

        *{box-sizing:border-box;margin:0;padding:0;}
        html{
            scroll-behavior:smooth;
        }
        body{
            font-family: Arial, Helvetica, sans-serif;
            background: radial-gradient(circle at top, #1a237e 0, #000 55%);
            color:var(--text);
            line-height:1.6;
        }

        a{color:var(--accent);text-decoration:none;}
        a:hover{text-decoration:underline;}

        /* ====== HEADER & NAV ====== */
        header{
            position:sticky;
            top:0;
            z-index:100;
            background:linear-gradient(90deg, rgba(13,71,161,0.96), rgba(30,136,229,0.96));
            box-shadow:0 4px 18px rgba(0,0,0,0.5);
            backdrop-filter: blur(12px);
        }
        .nav-container{
            max-width:1100px;
            margin:auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:0.6rem 1rem;
        }
        .logo{
            font-weight:bold;
            letter-spacing:1px;
        }
        .logo span{
            color:#ffeb3b;
        }
        nav ul{
            list-style:none;
            display:flex;
            gap:1rem;
            font-size:0.9rem;
        }
        nav li{
            position:relative;
        }
        nav li::after{
            content:"";
            position:absolute;
            left:0;
            bottom:-4px;
            width:0;
            height:2px;
            background:#ffeb3b;
            transition:width 0.3s;
        }
        nav li:hover::after{
            width:100%;
        }

        /* ====== HERO SECTION ====== */
        .hero{
            max-width:1100px;
            margin:0 auto;
            padding:3.5rem 1rem 2rem;
            display:grid;
            grid-template-columns: minmax(0,2fr) minmax(0,1.6fr);
            gap:2rem;
            align-items:center;
        }
        .hero-text{
            animation:fadeUp 1s ease-out;
        }
        .hero-title{
            font-size:2.4rem;
            margin-bottom:0.8rem;
        }
        .hero-sub{
            font-size:1.05rem;
            margin-bottom:1.2rem;
        }
        .hero-badge{
            display:inline-block;
            padding:0.2rem 0.7rem;
            border-radius:999px;
            border:1px solid rgba(255,255,255,0.5);
            font-size:0.75rem;
            text-transform:uppercase;
            letter-spacing:1px;
            margin-bottom:0.6rem;
        }
        .hero-highlight{
            font-weight:bold;
            color:#ffeb3b;
        }
        .hero-buttons{
            margin-top:1rem;
            display:flex;
            gap:0.7rem;
            flex-wrap:wrap;
        }
        .btn{
            border:none;
            padding:0.55rem 1.2rem;
            border-radius:999px;
            cursor:pointer;
            font-size:0.9rem;
            font-weight:bold;
            letter-spacing:0.5px;
            transition:transform 0.25s, box-shadow 0.25s, background 0.25s;
        }
        .btn-primary{
            background:linear-gradient(135deg,#42a5f5,#26c6da);
            color:#000;
            box-shadow:0 8px 20px rgba(38,198,218,0.4);
        }
        .btn-outline{
            background:transparent;
            color:var(--text);
            border:1px solid rgba(255,255,255,0.6);
        }
        .btn:hover{
            transform:translateY(-2px);
            box-shadow:0 10px 25px rgba(0,0,0,0.4);
        }

        .hero-image{
            display:flex;
            justify-content:center;
        }
        .neuro-card{
            position:relative;
            width:100%;
            max-width:380px;
            aspect-ratio:4/3;
            border-radius:24px;
            background:radial-gradient(circle at 10% 0, #26c6da 0, #141c33 40%, #000 100%);
            overflow:hidden;
            box-shadow:0 18px 40px rgba(0,0,0,0.75);
            animation:float 4s ease-in-out infinite;
        }
        .neuro-grid{
            position:absolute;
            inset:0;
            background-image:
                radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18) 0, transparent 55%),
                linear-gradient(120deg, rgba(33,150,243,0.65), transparent 60%);
            mix-blend-mode: screen;
        }
        .neuro-circle{
            position:absolute;
            border-radius:50%;
            border:1px solid rgba(255,255,255,0.4);
            box-shadow:0 0 25px rgba(38,198,218,0.7);
            animation:pulse 3s infinite;
        }
        .neuro-circle.c1{width:90px;height:90px;left:14%;top:20%;}
        .neuro-circle.c2{width:60px;height:60px;right:20%;bottom:18%;animation-delay:1s;}
        .neuro-circle.c3{width:40px;height:40px;left:55%;top:55%;animation-delay:1.8s;}

        .neuro-text{
            position:absolute;
            left:18px;
            bottom:18px;
            right:18px;
            font-size:0.85rem;
            background:rgba(0,0,0,0.55);
            border-radius:16px;
            padding:0.6rem 0.8rem;
            border:1px solid rgba(255,255,255,0.25);
            backdrop-filter:blur(6px);
        }
        .neuro-text span{
            color:#ffeb3b;
            font-weight:bold;
        }

        /* ====== KONTEN SECTIONS ====== */
        main{
            max-width:1100px;
            margin:0 auto;
            padding:1.5rem 1rem 3rem;
        }
        section{
            margin-bottom:2.5rem;
        }
        section h2{
            font-size:1.5rem;
            margin-bottom:0.8rem;
            border-left:4px solid var(--accent);
            padding-left:0.6rem;
        }
        .card{
            background:var(--card);
            border-radius:14px;
            padding:1rem 1.2rem;
            box-shadow:0 12px 30px rgba(0,0,0,0.7);
            margin-bottom:1rem;
            transition:transform 0.25s, box-shadow 0.25s;
        }
        .card:hover{
            transform:translateY(-4px);
            box-shadow:0 18px 40px rgba(0,0,0,0.9);
        }
        .two-columns{
            display:grid;
            grid-template-columns:1.2fr 1fr;
            gap:1.2rem;
        }

        p{margin-bottom:0.6rem;font-size:0.96rem;}

        ul, ol{
            margin-left:1.3rem;
            margin-bottom:0.6rem;
        }
        li{margin-bottom:0.25rem;}

        .highlight{
            background:rgba(255,235,59,0.12);
            padding:0.15rem 0.2rem;
            border-radius:4px;
        }

        table{
            width:100%;
            border-collapse:collapse;
            margin-top:0.6rem;
            font-size:0.92rem;
        }
        th, td{
            border:1px solid rgba(255,255,255,0.25);
            padding:0.45rem 0.5rem;
            text-align:left;
        }
        th{
            background:linear-gradient(120deg,var(--primary),var(--secondary));
        }
        tr:nth-child(even){
            background:rgba(255,255,255,0.04);
        }

        .img-wrap{
            text-align:center;
            margin-top:0.4rem;
        }
        .img-wrap img{
            max-width:100%;
            border-radius:10px;
            box-shadow:0 10px 26px rgba(0,0,0,0.8);
        }
        .img-wrap small{
            display:block;
            margin-top:0.3rem;
            font-size:0.72rem;
            opacity:0.8;
        }

        .footer{
            border-top:1px solid rgba(255,255,255,0.25);
            padding-top:0.8rem;
            margin-top:2rem;
            font-size:0.8rem;
            text-align:center;
            color:rgba(255,255,255,0.7);
        }

        /* ====== RESPONSIVE ====== */
        @media(max-width:820px){
            .hero{
                grid-template-columns:1fr;
                text-align:center;
            }
            .hero-text{
                order:2;
            }
            .hero-buttons{
                justify-content:center;
            }
            .two-columns{
                grid-template-columns:1fr;
            }
        }

        /* ====== ANIMASI ====== */
        @keyframes fadeUp{
            from{opacity:0;transform:translateY(20px);}
            to{opacity:1;transform:translateY(0);}
        }
        @keyframes float{
            0%,100%{transform:translateY(0);}
            50%{transform:translateY(-8px);}
        }
        @keyframes pulse{
            0%,100%{box-shadow:0 0 10px rgba(38,198,218,0.7);}
            50%{box-shadow:0 0 28px rgba(255,235,59,0.9);}
        }