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

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif;
  line-height:1.1;
}

.container{
  max-width:1200px;
  margin:auto;
  padding:0 24px;
}

.section{
  padding:120px 0;
  position:relative;
}

h1{
  font-size:clamp(2.2rem,5vw,3rem);
  font-weight:500;
}

h2{
  font-size:clamp(1.7rem,4vw,2.3rem);
  font-weight:400;
}

.subtitle{
  font-size:.55rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--blue-soft);
  font-weight:300;
  margin-bottom:18px;
  display:block;
}

.text-blue{
  color:var(--blue-soft);
}

p{
  color:var(--muted);
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:60px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:36px;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:42px;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 10px 90px;
  border-radius: 15px;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  border: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.btn{
  background: linear-gradient(to bottom,#4fd2ff,var(--blu));
  color: #ffffff;
  box-shadow:
    0 5px 0 #005fb3,
    0 14px 30px rgba(0, 0, 255, 0.25);
}

.btn::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 50%;
  height: 400%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );
  transform: rotate(25deg);
  transition: transform 0.6s ease;
}

.btn:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 0 #005fb3,
    0 24px 45px rgba(0, 160, 255, 0.55);
}

.btn:hover::before {
  transform: translateX(260%) rotate(25deg);
}

.btn:active {
  transform: translateY(2px);
  box-shadow:
    0 4px 0 #005fb3,
    0 10px 20px rgba(0, 120, 255, 0.35);
}


/* ===== SYSTEM DIAGRAM (STATIC) ===== */

.diagram-wrapper{
  margin-top:80px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:60px;
  align-items:center;
}

.diagram-col{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.diagram-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 30px;
}

.diagram-box h4{
  margin-bottom:8px;
}

.diagram-core{
  width:260px;
  height:260px;
  margin:auto;
  border-radius:50%;
  background:linear-gradient(145deg,var(--surface-soft),var(--surface));
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.diagram-core p{
  font-size:.8rem;
  margin-top:8px;
}

/* ===== LIST ===== */

.why-list{
  list-style:none;
  display:grid;
  gap:28px;
  margin-top:40px;
}

.why-list li strong{
  color:#fff;
}

@media(max-width:900px){
  .diagram-wrapper{
    grid-template-columns:1fr;
    gap:80px;
  }
}

/* ================================
   MOBILE OPTIMIZATION (<= 480px)
   ================================ */
@media (max-width: 480px){

  /* GLOBAL */
  .section{
    padding: 80px 0;
  }

  h1{
    font-size: 1.8rem;
    line-height: 1.25;
  }

  h2{
    font-size: 1.5rem;
    line-height: 1.3;
  }

  p{
    font-size: 0.95rem;
  }

  .subtitle{
    font-size: 0.5rem;
    letter-spacing: 2px;
  }

  /* BUTTON */
  .btn{
    width: 100%;
    text-align: center;
    padding: 7px 16px;
  }

  /* GRID */
  .grid-2,
  .grid-3{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* CARD */
  .card{
    padding: 28px;
  }

  /* HERO */
  .section:first-of-type{
    padding-top: 100px;
  }

  /* SYSTEM DIAGRAM */
  .diagram-wrapper{
    grid-template-columns: 1fr;
    gap: 60px;
    margin-top: 60px;
  }

  .diagram-col{
    gap: 24px;
  }

  .diagram-box{
    padding: 22px 24px;
    text-align: left;
  }

  .diagram-core{
    width: 200px;
    height: 200px;
    margin: 20px auto;
  }

  .diagram-core strong{
    font-size: 0.95rem;
  }

  .diagram-core p{
    font-size: 0.75rem;
  }

  /* WHY LIST */
  .why-list{
    gap: 20px;
  }

  .why-list li{
    font-size: 0.95rem;
  }

  /* CTA SECTION */
  #contact h2{
    font-size: 1.6rem;
  }

  #contact p{
    font-size: 0.95rem;
  }
}

.hero-section {
            position: relative;
            width: 100vw;
            height: 100vh;
            background: #020617;
            overflow: hidden;
        }

        .refraction-container {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            filter: blur(35px); 
            z-index: 1;
        }


        /* Placeholder konten agar ada di atas background */
        .content {
            z-index: 10;
            position: relative;
            color: white;
            /* Hapus border ini nanti */
            border: 1px dashed rgba(255,255,255,0.3); 
            padding: 20px;
        }

        /* Animasi Pergerakan */
        @keyframes moveOrb {
            0% {
                transform: translate(0, 0) scale(1);
            }
            33% {
                transform: translate(30px, -50px) scale(1.1);
            }
            66% {
                transform: translate(-20px, 20px) scale(0.9);
            }
            100% {
                transform: translate(0, 0) scale(1);
            }
        }

        /* Hanya contoh penempatan konten (bisa dihapus) */
        .content-placeholder {
            z-index: 10;
            position: relative;
            color: white;
            font-family: sans-serif;
            text-align: center;
        }