@font-face {
    font-family: 'Aptos';
    src: local('Aptos');
  }

  :root{
    --navy:#0F2E69;
    --navy-deep:#081B3F;
    --navy-soft:#24417F;
    --white:#F0F0F2;
    --paper:#FFFFFF;
    --accent:#3D6BFF;
    --accent-2:#7FA6FF;
    --muted:#5B6478;
    --line: rgba(15,46,105,0.12);
    --line-strong: rgba(15,46,105,0.22);
    --shadow: 0 20px 60px rgba(8,27,63,0.12);
    --radius: 14px;
    --maxw: 1180px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    font-family:'Aptos','Aptos Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', Arial, sans-serif;
    background:var(--white);
    color:var(--navy);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  section{position:relative;}

  .brand-logo{
    height: 32px;      /* atur tinggi sesuai proporsi logo kamu */
    width: auto;
    display: block;
  }

  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:14px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px;
    background:var(--accent);
    display:inline-block;
  }

  h1,h2,h3,h4{
    font-weight:700;
    letter-spacing:-0.01em;
    color:var(--navy);
  }

  .lead{
    color:var(--muted);
    font-size:17px;
    max-width:640px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 26px;
    border-radius:999px;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    border:1.5px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--accent);
    color:#fff;
    box-shadow:0 10px 24px rgba(61,107,255,0.32);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(61,107,255,0.4); }
  .btn-outline{
    border-color:var(--navy);
    color:var(--navy);
    background:transparent;
  }
  .btn-outline:hover{ background:var(--navy); color:#fff; transform:translateY(-2px); }
  .btn-ghost-light{
    border-color:rgba(240,240,242,0.55);
    color:var(--white);
    background:rgba(240,240,242,0.06);
  }
  .btn-ghost-light:hover{ background:rgba(240,240,242,0.95); color:var(--navy); }
  .btn-sm{padding:9px 18px; font-size:13.5px;}

  /* ===== NAV ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(240,240,242,0.82);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom:1px solid var(--line);
  }
  .navbar{
    max-width:var(--maxw);
    margin:0 auto;
    padding:16px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight:800; font-size:19px; letter-spacing:-0.01em; color:var(--navy);
  }
  .brand .mark{
    width:30px; height:30px; border-radius:8px;
    background:linear-gradient(135deg,var(--navy),var(--accent));
    position:relative;
    flex:none;
  }
  .brand .mark::after{
    content:"";
    position:absolute; inset:8px;
    border-radius:3px;
    background:var(--white);
    opacity:.9;
  }
  .navlinks{
    display:flex; align-items:center; gap:34px;
  }
  .navlinks a{
    font-size:14.5px; font-weight:600; color:var(--navy);
    position:relative; padding:4px 0;
  }
  .navlinks a::after{
    content:""; position:absolute; left:0; bottom:-2px;
    width:0; height:2px; background:var(--accent);
    transition:width .2s ease;
  }
  .navlinks a:hover::after{width:100%;}
  .nav-cta{display:flex; align-items:center; gap:14px;}
  .navlinks-mobile-toggle{display:none;}

  @media(max-width:860px){
    .navlinks{
      position:fixed; top:64px; left:0; right:0;
      background:var(--paper);
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      padding:8px 32px 20px;
      border-bottom:1px solid var(--line);
      transform:translateY(-130%);
      transition:transform .25s ease;
    }
    .navlinks.open{transform:translateY(0);}
    .navlinks a{padding:12px 0; width:100%; border-bottom:1px solid var(--line);}
    .navlinks-mobile-toggle{
      display:flex; flex-direction:column; gap:5px; cursor:pointer;
      background:none; border:none; padding:6px;
    }
    .navlinks-mobile-toggle span{width:22px; height:2px; background:var(--navy); display:block;}
    .nav-cta .btn-outline{display:none;}
  }

  /* ===== HERO ===== */
  #home{
    background:radial-gradient(120% 100% at 15% 0%, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-deep) 100%);
    color:var(--white);
    padding:180px 0 100px;
    overflow:hidden;
  }
  #home .wrap{
    position:relative; z-index:2;
    display:grid;
    gap:38px;
  }
  #home canvas{
    position:absolute; inset:0;
    width:100%; height:100%;
    z-index:1;
    opacity:.55;
  }
  .hero-inner{position:relative; z-index:2; max-width:760px;}
  .hero-inner h1{
    font-size:clamp(38px,5.4vw,60px);
    line-height:1.08;
    color:#fff;
    margin-bottom:22px;
  }
  .hero-inner h1 em{
    font-style:normal;
    background:linear-gradient(90deg,var(--accent-2),#fff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero-inner p.lead{
    color:rgba(240,240,242,0.78);
    font-size:18px;
    max-width:560px;
    margin-bottom:34px;
  }
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .hero-stats{
    margin-top:64px;
    display:grid;
    grid-template-columns:repeat(4,auto);
    gap:44px;
    position:relative; z-index:2;
  }
  .hero-stats .stat b{
    display:block; font-size:26px; color:#fff; font-weight:800;
  }
  .hero-stats .stat span{
    font-size:12.5px; color:rgba(240,240,242,0.62); text-transform:uppercase; letter-spacing:.08em;
  }
  @media(max-width:760px){
    .hero-stats{grid-template-columns:repeat(2,auto);}
  }

  .trust-strip{
    background:var(--navy-deep);
    border-top:1px solid rgba(240,240,242,0.08);
    padding:50px 0;
  }
  .trust-strip .wrap{
    display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center;
  }
  .trust-strip .label{
    font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(240,240,242,0.5); white-space:nowrap;
  }
  .industry-pill{
    font-size:13.5px; font-weight:600; color:rgba(240,240,242,0.85);
    border:1px solid rgba(240,240,242,0.18);
    padding:7px 16px; border-radius:999px;
  }

  /* ===== SECTION HEADER ===== */
  .section{padding:104px 20px; margin: 10px}
  .section-alt{background:var(--paper);}
  .sec-head{
    max-width:660px;
    margin-bottom:56px;
  }
  .sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .sec-head h2{font-size:clamp(28px,3.6vw,40px); margin-bottom:14px;}

  /* ===== OUR WORK CARDS ===== */
  @media (max-width: 768px) {
    .work-grid {
        grid-template-columns: 1fr; /* Berubah jadi 1 kolom berderet ke bawah di HP */
        gap: 24px;
    }
}
  .work-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
    margin-bottom:48px;
  }
  .work-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px 28px;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Agar tinggi card sama rata atas-bawah */
  }
  .work-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
    border-color:var(--line-strong);
  }
  .work-icon{
    width:48px; height:48px; border-radius:12px;
    background:linear-gradient(135deg,var(--navy),var(--accent));
    margin-bottom:22px;
    display:flex; align-items:center; justify-content:center;
  }
  .work-icon svg{width:24px; height:24px; stroke:#fff;}
  .work-card h3{font-size:19px; margin-bottom:10px;}
  .work-card p{color:var(--muted); font-size:14.5px;}
  .work-cta-row{display:flex; justify-content:flex-end;}

  /* ===== WHY TRUST US ===== */
  .trust-section{
    background:var(--navy);
    color:var(--white);
    padding:70px 0 70px 0;
    border-radius:28px;
    margin:0 16px;
    /* max-width:calc(var(--maxw) - 0px); */
    margin-left:auto; margin-right:auto;
  }
  /* Teks putih terang, garis aksen biru */
.trust-section .eyebrow {
  color: #FFFFFF; 
}

.trust-section .eyebrow::before {
  background: var(--accent-2); 
}

  .trust-section .wrap{padding:0 40px;}
  .trust-section .sec-head h2{color:#fff;}
  .trust-section .sec-head p{color:rgba(240,240,242,0.7);}
  .trust-cols{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    margin-top:20px;
  }
  .trust-stat b{font-size:34px; font-weight:800; display:block; margin-bottom:6px;
    background:linear-gradient(90deg,#fff,var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .trust-stat span{color:rgba(240,240,242,0.68); font-size:14.5px;}
  .cert-row{
    margin-top:44px; display:flex; gap:14px; flex-wrap:wrap;
  }
  .cert-badge{
    display:flex; align-items:center; gap:10px;
    border:1px solid rgba(240,240,242,0.2);
    border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:600;
    height: 80px !important; /* Contoh ukuran baru, lebih besar dari sebelumnya */
    width: auto !important;   /* Menjaga proporsi agar tidak gepeng */
    display: flex;
    align-items: center; /* Meratakan semua elemen secara vertikal */
    justify-content: center; /* (Opsional) Meratakan ke tengah horizontal */
    gap: 10px;
  }
  .cert-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--accent-2);}
  .cert-badge img {
    height: 60px !important; /* Contoh ukuran baru, lebih besar dari sebelumnya */
    width: auto !important;   /* Menjaga proporsi agar tidak gepeng */
    
    /* Memastikan perataan teks yang sempurna */
    display: inline-block !important; /* Mengubah dari block global agar sejajar dengan teks */
    vertical-align: middle;          /* Meratakan tengah secara vertikal */
    
    /* Perapian */
    margin: 0;
    object-fit: contain; /* Memastikan logo tidak terpotong */
}
  /* ===== CERTIFICATION ICONS ===== */
  .cert-icon {
    width: 24px;  /* Sesuaikan lebar ini agar pas dengan selera kamu */
    height: auto; /* Menjaga proporsi gambar */
    display: block;
    object-fit: contain; /* Memastikan logo tidak terpotong */
  }

  .trust-section .why-grid{margin-top:36px;}
  .trust-section .why-num{color:var(--accent-2); border-color:var(--accent-2);}
  .trust-section .why-card h3{color:#fff;}
  .trust-section .why-card p{color:rgba(240,240,242,0.68);}
  .trust-section .cert-row{margin-top:20px;}

  /* ===== CTA BANNER ===== */
  .cta-banner{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:24px;
    padding:72px 64px;
    margin:0 32px;
    max-width:min(1200px, calc(100% - 32px));
    margin-left:auto; margin-right:auto;
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .cta-copy{flex:1 1 680px; max-width:760px;}
  .cta-banner h2{font-size:clamp(24px, 2.2vw, 32px); max-width:720px; margin:0; line-height:1.35;}
  .cta-accent{margin:12px 0 0; font-size:18px; font-style:italic; font-weight:600; color:var(--accent);}

  /* ===== ABOUT ===== */
  .about-hero{
    display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;
  }
  .about-hero p{color:var(--muted); margin-top:18px; font-size:15.5px;}
.about-visual{
    aspect-ratio:1/1;
    border-radius:24px;
    background:linear-gradient(155deg,var(--navy) 0%, var(--navy-deep) 100%);
    position:relative;
    overflow:hidden;
  }
  
  /* Update dari svg menjadi img dan tambahkan object-fit */
  .about-visual img {
    position:absolute; 
    inset:0; 
    width:100%; 
    height:100%;
    object-fit:cover; /* Memastikan gambar memenuhi area tanpa merusak rasio (gepeng) */
  }
  .vm-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:64px;
  }
  f.vm-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:34px 30px;
  }
  .vm-card .tag{
    display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--accent); margin-bottom:12px;
  }
  .vm-card h3{font-size:20px; margin-bottom:12px;}
  .vm-card p{color:var(--muted); font-size:15px;}

  .why-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px;
  }
  .why-card{padding:8px 4px;}
  .why-num{
    font-size:13px; font-weight:800; color:var(--accent);
    border:1.5px solid var(--accent); border-radius:50%;
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
  }
  .why-card h3{font-size:17.5px; margin-bottom:10px;}
  .why-card p{color:var(--muted); font-size:14.5px;}

  /* ===== PORTFOLIO ===== */
  .portfolio-stat{
    display:flex; align-items:flex-end; gap:10px; margin-bottom:20px; flex-wrap:wrap;
  }
  .portfolio-stat .big{
    font-size:clamp(56px,8vw,96px);
    font-weight:800; line-height:0.9;
    background:linear-gradient(120deg,var(--navy),var(--accent));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    flex-shrink:0;
    display:flex;
    align-items:flex-end;
  }
  .portfolio-stat .label{
    color:var(--muted);
    font-size:16px;
    max-width:220px;
    line-height:1.2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-bottom:2px;
  }

  .case{
    display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center;
    padding:56px 0; border-top:1px solid var(--line);
  }
  .case:last-child{border-bottom:1px solid var(--line);}
.case-visual {
    aspect-ratio: 4/3; /* Tetap 4:3, layout konsisten */
    border-radius: 20px; 
    overflow: hidden;
    background: #f0f2f5; /* ⚠️ PENTING: samakan dengan warna background gambar */
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-visual img {
    width: 100%; 
    height: 100%;
    object-fit: contain; /* Full gambar, nggak ada yang kepotong */
    display: block;
}

.case-visual video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Samakan dengan img, biar nggak kepotong */
    display: block;
    background: #f0f2f5; /* Fallback warna nyatu */
}

  .case-num{
    font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--accent); margin-bottom:10px;
  }
  .case h3{font-size:24px; margin-bottom:18px;}
  .case-block{margin-bottom:16px;}
  .case-block .k{
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
    color:var(--navy); opacity:.55; margin-bottom:4px;
  }
  .case-block p{color:var(--muted); font-size:14.5px;}
  .case:nth-child(even) .case-visual{order:2;}

    /* ===== CONTACT ===== */
  #contact{
    background:var(--navy-deep);
    color:var(--white);
  }
  .contact-grid{
    display:grid; 
    grid-template-columns:.85fr 1.15fr; 
    gap:64px;
    align-items: start; /* Agar kartu tidak meregang aneh jika konten kiri lebih pendek */
  }
  .contact-info h2{color:#fff; font-size:clamp(26px,3.6vw,36px); margin-bottom:18px; max-width:420px;}
  .contact-info p.lead{color:rgba(240,240,242,0.65); margin-bottom:38px;}
  .contact-row{
    display:flex; gap:16px; align-items:flex-start; margin-bottom:24px;
  }
  .contact-row .ic{
    width:38px; height:38px; border-radius:10px;
    background:rgba(240,240,242,0.08); border:1px solid rgba(240,240,242,0.16);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .contact-row .ic svg{width:18px; height:18px; stroke:var(--accent-2);}
  .contact-row .tt{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:rgba(240,240,242,0.5); margin-bottom:3px;}
  .contact-row .vv{font-size:15px; font-weight:600; color:#fff;}

  /* --- NEW: Contact CTA Card (Pengganti Form) --- */
  .contact-cta-card{
    background:var(--paper);
    border-radius:20px;
    padding:44px;
    color:var(--navy);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  }
  
  /* Dekorasi gradient halus di pojok kanan atas kartu */
  .card-decor {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(61,107,255,0.08) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  .cta-header { display: flex; flex-direction: column; gap: 12px; }
  .cta-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--navy), var(--accent));
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
  }
  .cta-icon svg { width: 24px; height: 24px; stroke: #fff; }
  .cta-header h3 { font-size: 22px; margin: 0; }
  .cta-header p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

  .direct-links { display: flex; flex-direction: column; gap: 14px; }
  .direct-link-item {
    display: flex; align-items: center; gap: 16px;
    padding: 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--navy);
    background: var(--white);
    transition: all 0.2s ease;
  }
  .direct-link-item:hover {
    border-color: var(--accent);
    background: rgba(61, 107, 255, 0.03);
    transform: translateX(4px);
  }
  .dl-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--paper); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .dl-icon.wa { background: #E8F5E9; border-color: #C8E6C9; }
  .dl-icon.wa svg { stroke: #25D366; }
  .dl-icon svg { width: 20px; height: 20px; stroke: var(--navy); }
  
  .direct-link-item .dl-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
  .direct-link-item .dl-value { display: block; font-size: 15px; font-weight: 600; color: var(--navy); }
  .dl-arrow { width: 18px; height: 18px; stroke: var(--muted); margin-left: auto; opacity: 0; transform: translateX(-8px); transition: all 0.2s ease; }
  .direct-link-item:hover .dl-arrow { opacity: 1; transform: translateX(0); stroke: var(--accent); }

  .office-hours {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .office-hours h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
  .oh-row { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 8px; }
  .oh-row:last-child { margin-bottom: 0; }
  .oh-time { font-weight: 600; color: var(--navy); }
  .oh-time.closed { color: var(--muted); font-weight: 500; }

  /* Responsive adjustments */
  @media(max-width:900px){
    .contact-grid{grid-template-columns:1fr; gap: 48px;}
    .contact-cta-card { padding: 32px 24px; }
  }

  /* ===== FOOTER ===== */
  footer{
    background:var(--navy-deep);
    color:rgba(240,240,242,0.75);
    border-top:1px solid rgba(240,240,242,0.08);
    padding:64px 0 28px;
  }
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:44px; border-bottom:1px solid rgba(240,240,242,0.08);
  }
  .footer-brand .brand{color:#fff;}
  .footer-brand p{margin:16px 0 22px; font-size:14px; max-width:280px; color:rgba(240,240,242,0.6);}
  .footer-col h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:rgba(240,240,242,0.5); margin-bottom:18px;}
  .footer-col li{margin-bottom:12px;}
  .footer-col a{font-size:14.5px; color:rgba(240,240,242,0.82); transition:color .15s ease;}
  .footer-col a:hover{color:var(--accent-2);}
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:16px;
  }
  .footer-bottom .legal{display:flex; gap:22px; font-size:13px; color:rgba(240,240,242,0.5);}
  .footer-bottom .legal a:hover{color:#fff;}
  .socials{display:flex; gap:10px;}
  .socials a{
    width:34px; height:34px; border-radius:50%; border:1px solid rgba(240,240,242,0.2);
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
    color:rgba(240,240,242,0.75);
  }
  .socials a:hover{background:var(--accent); border-color:var(--accent); color:#fff;}
  .copy{font-size:13px; color:rgba(240,240,242,0.45);}

  @media(max-width:900px){
    .work-grid, .trust-cols, .why-grid, .form-row{grid-template-columns:1fr;}
    .about-hero, .vm-grid, .contact-grid, .case{grid-template-columns:1fr;}
    .case:nth-child(even) .case-visual{order:0;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .cta-banner{flex-direction:column; align-items:flex-start; padding:44px 32px;}
    .trust-section, .cta-banner{margin:0 10px; border-radius:20px;}
    .navlinks:not(.open){display:none;}
    .navlinks.open{display:flex; transform:none;}
    .navlinks-mobile-toggle{display:flex;}
  }
  @media(min-width:861px){ .navlinks{display:flex;} }
  @media(max-width:600px){
    .wrap{padding:0 10px;}
    #home{padding-top:150px;}
    .footer-grid{grid-template-columns:1fr;}
    .hero-stats{grid-template-columns:repeat(2,1fr); gap:24px;}
  }

  /* HERO */

  
  /* --- UPDATE: Hover Card Dashboard Modern --- */
.dashboard-card {
    background: #ffffff;
    border-radius: 12px;
    /* Durasi transisi harus cepat (0.2s - 0.3s) agar terasa responsif */
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

.dashboard-card:hover {
    transform: translateY(-4px); /* Mengangkat elemen sedikit ke atas */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); /* Bayangan lebih halus dan menyebar */
}

/* --- UPDATE: Animasi Santai & Super Smooth --- */
.animate-me {
    opacity: 0;
    transform: translateY(80px); /* Mulai dari jarak yang lebih jauh di bawah */
    
    /* Durasi diubah jadi 1.2s dengan efek pengereman (deceleration) di akhir */
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.animate-me.element-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Jeda diperlama agar elemen munculnya gantian, nggak terburu-buru */
.animate-me:nth-child(1) { transition-delay: 0.1s; }
.animate-me:nth-child(2) { transition-delay: 0.3s; }
.animate-me:nth-child(3) { transition-delay: 0.5s; }
.animate-me:nth-child(4) { transition-delay: 0.7s; }

/* --- UPDATE: Animasi Khusus CTA Banner --- */
/* Kondisi Awal Teks */
.cta-banner.animate-cta h2 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Kondisi Awal Tombol */
.cta-banner.animate-cta .btn {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    /* Ada delay 0.4s agar teks muncul duluan */
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s, 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s; 
}

/* Saat Banner Masuk ke Layar (Class ditambahkan oleh JS) */
.cta-banner.animate-cta.element-visible h2 {
    opacity: 1;
    transform: translateY(0);
}

.cta-banner.animate-cta.element-visible .btn {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Jalankan animasi denyut setelah tombol selesai muncul (delay 1.5s) */
    animation: cta-pulse 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
}

/* Efek Denyut (Pulse) Lembut pada Tombol */
@keyframes cta-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(127, 166, 255, 0.6); /* Warna shadow biru lembut */
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(127, 166, 255, 0); /* Menyebar dan menghilang */
        transform: scale(1.03); /* Membesar sangat sedikit */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(127, 166, 255, 0);
        transform: scale(1);
    }
}

/* --- UPDATE: Animasi Gelombang untuk Industry Pills --- */
/* Kondisi Awal: Sembunyi dan turun sedikit */
.animate-pills .label,
.animate-pills .industry-pill {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Kondisi Saat Masuk Layar */
.animate-pills.element-visible .label,
.animate-pills.element-visible .industry-pill {
    opacity: 1;
    transform: translateY(0);
}

/* Jeda Bergantian (Stagger) dari elemen 1 sampai 8 */
.animate-pills.element-visible span:nth-child(1) { transition-delay: 0.1s; }
.animate-pills.element-visible span:nth-child(2) { transition-delay: 0.2s; }
.animate-pills.element-visible span:nth-child(3) { transition-delay: 0.3s; }
.animate-pills.element-visible span:nth-child(4) { transition-delay: 0.4s; }
.animate-pills.element-visible span:nth-child(5) { transition-delay: 0.5s; }
.animate-pills.element-visible span:nth-child(6) { transition-delay: 0.6s; }
.animate-pills.element-visible span:nth-child(7) { transition-delay: 0.7s; }
.animate-pills.element-visible span:nth-child(8) { transition-delay: 0.8s; }

/* --- UPDATE: Efek Gradient Warna Bergerak pada Seluruh H1 --- */
.moving-gradient-text {
    /* 1. Buat kombinasi warna gradient (bisa kamu sesuaikan dengan palette AKSY) */
    /* Menggunakan 3 perpaduan warna: Biru Terang, Ungu Soft, dan Biru Utama */
    background: linear-gradient(
        to right, 
        #7FA6FF 20%, 
        #b186ff 40%, 
        #a1bfff 60%, 
        #7FA6FF 80%
    );
    
    /* 2. Besarkan ukuran background agar bisa digeser/digerakkan */
    background-size: 200% auto;
    
    /* 3. Trik memotong background agar masuk ke dalam bentuk teks saja */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    
    /* 4. Jalankan animasi pergeseran background secara linear tanpa putus */
    animation: shine-gradient 5s linear infinite;
}

/* --- UPDATE: Efek Gradient Techy Modern (Font Aptos, Dominan Putih + Kilauan Biru) --- */
.moving-gradient-text {
    /* Menggunakan font Aptos sesuai request */
    font-family: 'Aptos', system-ui, -apple-system, sans-serif; 
    
    /* Susunan warna: Dominan putih (#F0F0F2) dengan sekilas garis biru (#0F2E69) di tengah */
    background: linear-gradient(
        to right, 
        #F0F0F2 35%, 
        #0F2E69 50%, 
        #F0F0F2 65%
    );
    background-size: 200% auto;
    
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    
    /* Durasi diubah ke 6 detik agar kilauan birunya lewat secara halus dan elegan */
    animation: shine-techy 6s linear infinite;
}

/* --- UPDATE: Efek Gradient Techy (Putih + Kilauan Biru Muda) --- */
.moving-gradient-text {
    font-family: 'Aptos', system-ui, -apple-system, sans-serif; 
    
    /* Ganti #0F2E69 menjadi #7FA6FF (Biru Muda Terang) */
    background: linear-gradient(
        to right, 
        #F0F0F2 35%, 
        #7FA6FF 50%, 
        #F0F0F2 65%
    );
    background-size: 200% auto;
    
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    
    animation: shine-techy 6s linear infinite;
}

.moving-gradient-text em {
    font-style: italic;
    color: inherit; 
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes shine-techy {
    to {
        background-position: 200% center;
    }
}