:root{
  --brand-teal: #0FA3B1;   /* aksen merek */
  --ink:        #0B1F2E;   /* teks gelap */
  --navy-700:   #0F2B46;   /* dasar gradasi */
  --navy-800:   #0C2238;   /* gradasi lebih gelap */
  --accent-a:   #ff6b6b;   /* CTA existing */
  --accent-b:   #ee5a24;
  --muted:      #718096;
  --surface:    #ffffff;
  --bg-soft:    #f8fafc;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6; color:#333; overflow-x:hidden; background:#fff;
}

/* Header */
.header{
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(140%) blur(10px);
  padding: 1rem 0;
  position: fixed; width: 100%; top: 0; z-index: 1000;
  transition: background .25s ease, box-shadow .25s ease;
}
.header.scrolled{
  background: linear-gradient(135deg, #c1eef4 0%, #bcdffb 100%);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* Nav */
.nav-container{ max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:0 2rem; }
.logo{ display:flex; align-items:center; font-size:1.5rem; font-weight:bold; color:#0B1F2E; }
.logo img{ width:150px; height:100% ; margin-right:10px; }

.nav-menu{ display:flex; list-style:none; gap:2rem; }
.nav-menu a{ color:#0B1F2E; text-decoration:none; font-weight:600; position:relative; transition:color .2s ease; }
.nav-menu a:hover{ color:var(--brand-teal); }

.cta-button{
  background: linear-gradient(45deg, var(--accent-a), var(--accent-b));
  color:#fff; padding:12px 24px; border-radius:25px; text-decoration:none; font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 4px 15px rgba(255,107,107,.3);
}
.cta-button:hover{ transform: translateY(-2px); box-shadow:0 8px 25px rgba(255,107,107,.45); }

/* Tombol hamburger */
.nav-toggle{ display:none; background:transparent; border:0; color:#0B1F2E; font-size:1.75rem; line-height:1; cursor:pointer; padding:.25rem .5rem; border-radius:.5rem; }

/* Drawer mobile */
.mobile-panel{
  position:fixed; top:64px; left:0; right:0; background:rgba(13,33,58,.98); backdrop-filter:blur(12px);
  transform:translateY(-16px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.mobile-panel.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-menu{ list-style:none; display:flex; flex-direction:column; padding:14px 20px; }
.mobile-menu a{ color:#fff; text-decoration:none; padding:12px 10px; border-radius:10px; font-weight:600; }
.mobile-menu a:hover{ background:rgba(255,255,255,.08); }
.mobile-cta{ padding:10px 20px 18px; }
.cta-button--block{ display:block; text-align:center; }

/* Hero */
.hero{
  background: linear-gradient(135deg, var(--brand-teal) 0%, #2e7dd2 100%);
  min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.1)" points="0,0 1000,300 1000,1000 0,700"/></svg>');
  z-index:1;
}
.hero-container{
  max-width:1200px; margin:0 auto; padding:0 2rem; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; position:relative; z-index:2;
}
.hero-content h1{ font-size:3.5rem; color:#fff; margin-bottom:1.5rem; line-height:1.2; animation:slideInLeft 1s ease-out; }
.hero-content p{ font-size:1.2rem; color:rgba(255,255,255,0.9); margin-bottom:2rem; animation:slideInLeft 1s ease-out .2s both; }
.hero-buttons{ display:flex; gap:1rem; animation:slideInLeft 1s ease-out .4s both; }
.btn-primary, .btn-secondary{
  padding:15px 30px; border-radius:30px; text-decoration:none; font-weight:600; transition: all .3s ease; box-shadow:0 5px 20px rgba(0,0,0,.15); background:rgba(255,255,255,.2); color:#fff; border:2px solid rgba(255,255,255,.3); backdrop-filter:blur(10px);
}

#btn-about, #btn-about-2{
  font-size: 1em !important;
}
.btn-primary{ background: linear-gradient(45deg, var(--accent-a), var(--accent-b)); border:none; }
.btn-primary:hover, .btn-secondary:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.hero-buttons.centered-align{ justify-content:center; }

.hero-visual{ position:relative; animation:slideInRight 1s ease-out; }
.floating-cards{ position:relative; height:500px; margin-top:100px; }
.floating-card{
  position:absolute; background:rgba(255,255,255,.95); border-radius:20px; padding:2rem; box-shadow:0 20px 40px rgba(0,0,0,.1); backdrop-filter:blur(10px); animation:float 6s ease-in-out infinite;
}
.floating-card:nth-child(1){ top:0; left:0; animation-delay:0s; }
.floating-card:nth-child(2){ top:150px; right:0; animation-delay:2s; }
.floating-card:nth-child(3){ bottom:0; left:50px; animation-delay:4s; }
.card-icon{ width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:1rem; font-size:1.5rem; background: linear-gradient(45deg, var(--brand-teal), #22c1d6); }

/* Features */
.features{ padding:100px 0; background:var(--bg-soft); }
.features-container{ max-width:1200px; margin:0 auto; padding:0 2rem; text-align:center; }
.section-title{ font-size:2.5rem; color:#1f2937; margin-bottom:1rem; }
.section-subtitle{ font-size:1.2rem; color:var(--muted); margin-bottom:4rem; max-width:720px; margin-left:auto; margin-right:auto; }
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:3rem; margin-top:4rem; }
.feature-card{
  background:#fff; padding:3rem 2rem; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.08); transition: all .3s ease; border:1px solid rgba(255,255,255,.1);
}
.feature-card:hover{ transform:translateY(-10px); box-shadow:0 25px 50px rgba(0,0,0,.15); }
.feature-icon{ width:80px; height:80px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem; margin:0 auto 2rem; background: linear-gradient(45deg, var(--brand-teal), #22c1d6); }
.feature-card h3{ font-size:1.5rem; color:#2d3748; margin-bottom:1rem; }
.feature-card p{ color:var(--muted); line-height:1.8; }

/* About (brief) */
.about-brief{ background:#fff; padding:80px 0; }
.about-brief__container{ max-width:900px; margin:0 auto; padding:0 2rem; text-align:center; }

/* Partners / Mitra */
.partners{ background:#fff; padding:90px 0; }
.partners-container{ max-width:1200px; margin:0 auto; padding:0 2rem; text-align:center; }
.logo-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:28px; align-items:center; justify-items:center; margin-top:24px;
}
.logo-item{
  background:#fff; border:1px solid #e8eef6; border-radius:16px; padding:18px; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.logo-item img{ max-width:140px; max-height:64px; object-fit:contain; filter: saturate(110%); }

/* Stats */
.stats{ background: linear-gradient(135deg, var(--navy-700) 0%, var(--brand-teal) 100%); padding:80px 0; color:#fff; }
.stats-container{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:3rem; text-align:center; }
.stat-item h3{ font-size:3rem; margin-bottom:.5rem; font-weight:700; }
.stat-item p{ font-size:1.1rem; opacity:.9; }

/* CTA */
.cta-section{ background: linear-gradient(135deg, var(--brand-teal) 0%, #2e7dd2 100%); padding:100px 0; text-align:center; color:#fff; }
.cta-container{ max-width:800px; margin:0 auto; padding:0 2rem; }
.cta-section h2{ font-size:2.5rem; margin-bottom:1rem; }
.cta-section p{ font-size:1.2rem; margin-bottom:2rem; opacity:.9; }

/* Footer */
.footer{ background:#1a202c; color:#fff; padding:60px 0 30px; }
.footer-container{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.footer-content{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:3rem; margin-bottom:2rem; }
.footer-section h3{ margin-bottom:1rem; color:var(--brand-teal); }
.footer-section ul{ list-style:none; }
.footer-section ul li{ margin-bottom:.5rem; }
.footer-section ul li a{ color:#a0aec0; text-decoration:none; transition:color .3s ease; }
.footer-section ul li a:hover{ color:var(--brand-teal); }
.footer-bottom{ border-top:1px solid #2d3748; padding-top:2rem; text-align:center; color:#a0aec0; }

/* Modal (Tentang Lengkap + Tim) */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;      /* paling atas */
  background: rgba(0,0,0,.5); /* backdrop */
  overflow: hidden;   /* halaman belakang & modal tidak ikut scroll */
}

.modal[open],
.modal.show {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); z-index: -1;}
.modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  max-width: 900px;
  max-height: 90vh;   /* batasi tinggi modal */
  overflow-y: auto;   /* jangan scroll seluruh modal */
  box-shadow: 0 30px 80px rgba(0,0,0,.2);
}
.modal__title{ font-size:1.75rem; margin-bottom:.5rem; color:#0B1F2E; }
.modal__lead{ color:#334155; margin-bottom:1rem; }
.modal__content {
  max-height: 60vh;   /* area konten yg bisa discroll */
  overflow-y: auto;
  margin-bottom: 1rem;
  padding-right: .5rem; /* biar ga ketutupan scrollbar */
}
.modal__content p{ color:#334155; margin-bottom:1rem; }
.modal__divider{ border:none; height:1px; background:#e5e7eb; margin:18px 0; }
.modal__subtitle{ font-size:1.25rem; margin-bottom:12px; color:#0B1F2E; }
.modal__close{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  border:none; background:#eff6ff; color:#0B1F2E; font-size:22px; cursor:pointer;
  
}
.modal__close:hover{ background:#dbeafe; }

/* Team */
.team-grid {
  display: grid;
  grid-template-columns: 1fr; /* hanya 1 kolom penuh */
  gap: 18px;
}

.team-card{
  display:flex; gap:14px; padding:12px; border:1px solid #e8eef6; border-radius:16px; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.team-card img{ width:72px; height:72px; border-radius:14px; object-fit:cover; }

/* Animations */
@keyframes slideInLeft{ from{opacity:0; transform:translateX(-50px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideInRight{ from{opacity:0; transform:translateX(50px);} to{opacity:1; transform:translateX(0);} }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-20px);} }

/* Responsive */
@media (max-width:1024px){
  .hero-container{ grid-template-columns:1fr; text-align:center; gap:2rem; }
  .hero-content{ margin-top:100px; }
  .floating-cards{ margin-top:0; margin-bottom:50px; height:380px; }
  .floating-card:nth-child(1){ top:0; left:0; }
  .floating-card:nth-child(2){ top:0; right:0; }
  .floating-card:nth-child(3){ bottom:0; left:0; }
  .floating-card h4{ text-align:left; }
}
@media (max-width:900px){
  .nav-menu{ display:none; }
  .cta-button{ display:none; }
  .nav-toggle{ display:inline-block; margin-left:auto; }
  .hero-content{ margin-top:100px; }
}
@media (max-width:768px){
  .features-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .floating-cards{ height:300px; }
  .floating-card{ padding:1rem; }
}
@media (max-width:420px){
  .nav-container{ padding:0 1rem; }
  .logo img{ width:128px; height:34px; }
  .hero-content{ margin-top:100px; }
}