:root {
   /* Palette dari logo (perkiraan dominan) */
   --blue: #246CCC;
   --teal: #0CB4B4;
   --green: #84B40C;
   --orange: #FC9C0C;
   --red: #E4540C;
   --purple: #9C54B4;

   --ink: #0b1225;
   --muted: #5b6b86;
   --bg: #f6fbff;
   --card: #ffffff;

   --shadow: 0 16px 40px rgba(2, 6, 23, .14);
   --shadow2: 0 10px 22px rgba(2, 6, 23, .10);
   --radius: 22px;
   --radius2: 28px;

   --max: 1120px;
   --gap: 18px;

   --font: "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
 }

 * {
   box-sizing: border-box
 }

 html,
 body {
   margin: 0;
   padding: 0;
   font-family: var(--font);
   color: var(--ink);
   background: var(--bg)
 }

 a {
   color: inherit;
   text-decoration: none
 }

 img {
   max-width: 100%;
   display: block
 }

 .container {
   max-width: var(--max);
   margin: 0 auto;
   padding: 0 16px
 }

 .muted {
   color: var(--muted)
 }

 /* ====== Playful helpers ====== */
 .sprinkles {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .8;
   background:
     radial-gradient(circle at 12% 22%, rgba(252, 156, 12, .50) 0 6px, transparent 7px),
     radial-gradient(circle at 18% 60%, rgba(36, 108, 204, .42) 0 5px, transparent 6px),
     radial-gradient(circle at 34% 28%, rgba(12, 180, 180, .46) 0 6px, transparent 7px),
     radial-gradient(circle at 44% 70%, rgba(156, 84, 180, .36) 0 6px, transparent 7px),
     radial-gradient(circle at 58% 18%, rgba(132, 180, 12, .40) 0 6px, transparent 7px),
     radial-gradient(circle at 70% 62%, rgba(228, 84, 12, .34) 0 5px, transparent 6px),
     radial-gradient(circle at 82% 30%, rgba(36, 108, 204, .28) 0 5px, transparent 6px),
     radial-gradient(circle at 90% 70%, rgba(12, 180, 180, .30) 0 6px, transparent 7px);
   filter: blur(.2px);
 }

 .wave {
   width: 100%;
   height: 64px;
   display: block;
   background: transparent;
 }

 /* ====== NAV ====== */
 .topbar {
   position: sticky;
   top: 0;
   z-index: 99;
   background: rgba(255, 255, 255, .86);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(15, 23, 42, .06);
 }

 .nav {
   display: flex;
   align-items: center;
   gap: 12px;
   height: 76px;
 }

 .menu {
   margin-left: auto;
   display: flex;
   gap: 16px;
   align-items: center;
 }

 .brand {
   display: flex;
   align-items: center;
   gap: 12px
 }

 .brand img {
   width: 190px;
   height: auto;
   filter: drop-shadow(0 10px 18px rgba(2, 6, 23, .12));
 }



 .menu a {
   font-size: 14px;
   font-weight: 900;
   opacity: .84;
   padding: 8px 10px;
   border-radius: 999px;
 }

 .menu a:hover {
   opacity: 1;
   background: rgba(36, 108, 204, .08);
   border: 1px solid rgba(36, 108, 204, .12);
 }

 .nav-actions {
   display: flex;
   gap: 10px;
   align-items: center
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 11px 15px;
   border-radius: 999px;
   font-weight: 1000;
   font-size: 14px;
   border: 1px solid rgba(2, 6, 23, .10);
   background: #fff;
   cursor: pointer;
   box-shadow: var(--shadow2);
   transition: .18s ease;
 }

 .btn:hover {
   transform: translateY(-1px) rotate(-.2deg)
 }

 .btn.primary {
   border: 0;
   background: linear-gradient(135deg, var(--orange), var(--red));
   color: #0b1225;
   box-shadow: 0 18px 44px rgba(252, 156, 12, .28);
 }

 .btn.teal {
   border: 0;
   background: linear-gradient(135deg, var(--blue), var(--teal));
   color: #fff;
   box-shadow: 0 18px 44px rgba(36, 108, 204, .22);
 }

 .btn.ghost {
   border: 1px dashed rgba(36, 108, 204, .28);
   background: rgba(255, 255, 255, .88);
 }

 .hamburger {
   display: none
 }

 .mobile-panel {
   display: none
 }

 /* ====== HERO ====== */
 .hero {
   position: relative;
   padding: 34px 0 0;
   background:
     radial-gradient(1200px 520px at 12% 0%, rgba(36, 108, 204, .18), transparent 60%),
     radial-gradient(1000px 520px at 90% 0%, rgba(252, 156, 12, .16), transparent 60%),
     radial-gradient(900px 500px at 55% 10%, rgba(12, 180, 180, .14), transparent 62%),
     linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
   overflow: hidden;
 }

 .hero-grid {
   display: grid;
   grid-template-columns: 1.15fr .85fr;
   gap: 26px;
   align-items: center;
   position: relative;
   padding-bottom: 20px;
 }

 .badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 9px 12px;
   border-radius: 999px;
   background: rgba(132, 180, 12, .14);
   border: 1px solid rgba(132, 180, 12, .22);
   font-weight: 1000;
   font-size: 12px;
 }

 .h1 {
   margin: 12px 0 10px;
   font-size: 48px;
   line-height: 1.02;
   letter-spacing: -.02em;
 }

 .lead {
   margin: 0 0 16px;
   font-size: 16px;
   line-height: 1.75;
   color: #334155;
   max-width: 640px;
 }

 .hero-cta {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin: 18px 0 8px
 }

 .trust {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   align-items: center;
   margin-top: 14px;
 }

 .pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
   border-radius: 999px;
   background: #fff;
   border: 1px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow2);
   font-weight: 900;
   font-size: 13px;
 }

 .pill span {
   font-size: 16px
 }

 .hero-card {
   position: relative;
   border-radius: var(--radius2);
   background:
     radial-gradient(circle at 25% 25%, rgba(252, 156, 12, .26), transparent 55%),
     radial-gradient(circle at 75% 55%, rgba(12, 180, 180, .22), transparent 55%),
     linear-gradient(180deg, rgba(36, 108, 204, .14), rgba(255, 255, 255, .86));
   border: 2px solid rgba(36, 108, 204, .14);
   box-shadow: var(--shadow);
   overflow: hidden;
   padding: 16px;
 }

 .hero-card .inner {
   position: relative;
   z-index: 2
 }

 .hero-card .blob {
   position: absolute;
   inset: auto -60px -70px auto;
   width: 220px;
   height: 220px;
   background: radial-gradient(circle at 30% 30%, rgba(156, 84, 180, .55), rgba(156, 84, 180, .08));
   border-radius: 40% 60% 60% 40% / 45% 45% 55% 55%;
   transform: rotate(10deg);
   filter: blur(.2px);
   opacity: .9;
 }

 .hero-card .blob2 {
   position: absolute;
   inset: -70px auto auto -80px;
   width: 240px;
   height: 240px;
   background: radial-gradient(circle at 30% 30%, rgba(132, 180, 12, .42), rgba(132, 180, 12, .06));
   border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%;
   transform: rotate(-12deg);
   opacity: .8;
 }

 .mock {
   aspect-ratio: 4 / 3;
   background: #fff;
   border: 1px solid rgba(2, 6, 23, .08);
   border-radius: 22px;
   display: grid;
   place-items: center;
   overflow: hidden;
   position: relative;

   background-image: url("../images/gallery/hero.webp");
  background-repeat: no-repeat;
  background-position: center; /* biar fokus ke tengah */
  background-size: cover;    
 }

 .mock::after {
   content: "";
   position: absolute;
   inset: -40% -40%;
   background:
     radial-gradient(circle at 20% 30%, rgba(252, 156, 12, .20), transparent 55%),
     radial-gradient(circle at 80% 60%, rgba(36, 108, 204, .16), transparent 55%);
   transform: rotate(8deg);
 }

 .mock p {
   margin: 0;
   padding: 16px;
   text-align: center;
   color: var(--muted);
   font-weight: 1000;
   position: relative;
   z-index: 2;
 }

 .mini-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-top: 12px
 }

 .mini {
   background: #fff;
   border: 1px solid rgba(2, 6, 23, .06);
   border-radius: 18px;
   padding: 12px;
   box-shadow: var(--shadow2);
 }

 .mini b {
   display: block;
   font-size: 13px
 }

 .mini small {
   color: var(--muted)
 }

 /* ====== SECTION GENERIC ====== */
 section {
   padding: 56px 0
 }

 .section-title {
   text-align: center;
   margin-bottom: 22px
 }

 .section-title h2 {
   margin: 0;
   font-size: 34px;
   letter-spacing: -.01em
 }

 .section-title p {
   margin: 10px auto 0;
   color: var(--muted);
   max-width: 760px;
   line-height: 1.75;
   font-size: 15px
 }

 /* ====== PROBLEM ====== */
 .problem {
   background: #fff;
   position: relative;
   overflow: hidden;
 }

 .problem .sprinkles {
   opacity: .5
 }

 .problem-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px;
   align-items: center;
   position: relative;
 }

 .photo-card {
   background: #fff;
   border-radius: var(--radius2);
   border: 1px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow);
   overflow: hidden;
   transform: rotate(-.2deg);
 }

 .photo-card .ph {
   height: 320px;
   background:
     linear-gradient(135deg, rgba(36, 108, 204, .22), rgba(12, 180, 180, .10)),
     url("../images/gallery/belajar_01.webp");
   background-size: cover;
   background-position: center;
 }

 .photo-card .cap {
   padding: 14px 16px
 }

 .photo-card .cap b {
   display: block
 }

 .photo-card .cap small {
   color: var(--muted)
 }

 .checklist {
   display: grid;
   gap: 10px
 }

 .check {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   background: #fff;
   border: 2px solid rgba(2, 6, 23, .06);
   border-radius: 18px;
   padding: 12px 14px;
   box-shadow: var(--shadow2);
   transition: .15s ease;
 }

 .check:hover {
   transform: translateY(-1px)
 }

 .check .ic {
   width: 26px;
   height: 26px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   font-weight: 1000;
   flex: 0 0 auto;
   margin-top: 1px;
   background: rgba(132, 180, 12, .18);
   border: 1px solid rgba(132, 180, 12, .28);
 }

 .check p {
   margin: 0;
   color: #334155;
   line-height: 1.55;
   font-size: 14px;
   font-weight: 800
 }

 /* ====== METHOD BANNER ====== */
 .method {
   padding: 0;
   background: transparent;
 }

 .method-banner {
   margin-top: -26px;
   background: linear-gradient(135deg, var(--blue), var(--teal));
   color: #fff;
   border-radius: var(--radius2);
   padding: 22px 18px;
   border: 2px solid rgba(255, 255, 255, .22);
   box-shadow: var(--shadow);
   position: relative;
   overflow: hidden;
 }

 .method-banner .sprinkles {
   opacity: .45
 }

 .method-row {
   position: relative;
   z-index: 2;
   display: flex;
   gap: 16px;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .method-row h3 {
   margin: 0;
   font-size: 22px
 }

 .method-row p {
   margin: 6px 0 0;
   color: rgba(255, 255, 255, .92);
   max-width: 680px;
   line-height: 1.65;
   font-weight: 800
 }

 .bubble {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .16);
   border: 1px solid rgba(255, 255, 255, .22);
   font-weight: 1000;
   font-size: 12px;
   white-space: nowrap;
 }

 /* ====== ASPECTS ====== */
 .aspects {
   background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
   position: relative;
   overflow: hidden;
 }

 .aspects .sprinkles {
   opacity: .45
 }

 .chips {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-top: 18px;
   position: relative;
 }

 .chip {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   border-radius: 999px;
   background: #fff;
   border: 2px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow2);
   font-weight: 1000;
   font-size: 13px;
   transition: .15s ease;
 }

 .chip:hover {
   transform: translateY(-1px) rotate(-.2deg)
 }

 .cic {
   width: 34px;
   height: 34px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   font-weight: 1000;
   color: #0b1225;
   border: 1px solid rgba(2, 6, 23, .06);
   box-shadow: 0 10px 18px rgba(2, 6, 23, .06);
 }

 .cic.b {
   background: rgba(36, 108, 204, .16)
 }

 .cic.t {
   background: rgba(12, 180, 180, .16)
 }

 .cic.o {
   background: rgba(252, 156, 12, .18)
 }

 .cic.g {
   background: rgba(132, 180, 12, .18)
 }

 .cic.p {
   background: rgba(156, 84, 180, .16)
 }

 .cic.r {
   background: rgba(228, 84, 12, .16)
 }

 .programs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--gap);
   margin-top: 26px;
   position: relative;
 }

 .card {
   background: #fff;
   border-radius: var(--radius2);
   border: 2px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow);
   overflow: hidden;
   transform: rotate(.1deg);
 }

 .thumb {
   height: 180px;
   background-size: cover;
   background-position: center;
   position: relative
 }

 .thumb::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .26));
 }

 .card .body {
   padding: 14px 16px
 }

 .tag {
   display: inline-flex;
   padding: 7px 11px;
   border-radius: 999px;
   font-weight: 1000;
   font-size: 12px;
   border: 1px solid transparent;
 }

 .tag.blue {
   background: rgba(36, 108, 204, .14);
   border-color: rgba(36, 108, 204, .22);
   color: #1347a6
 }

 .tag.green {
   background: rgba(132, 180, 12, .16);
   border-color: rgba(132, 180, 12, .24);
   color: #264800
 }

 .tag.orange {
   background: rgba(252, 156, 12, .16);
   border-color: rgba(252, 156, 12, .26);
   color: #7a3f00
 }

 .card h4 {
   margin: 10px 0 8px;
   font-size: 18px
 }

 .card p {
   margin: 0;
   color: var(--muted);
   line-height: 1.75;
   font-size: 14px;
   font-weight: 800
 }

 .card .foot {
   padding: 0 16px 16px
 }

 .link {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-weight: 1000;
   color: var(--blue);
   margin-top: 12px;
   font-size: 14px
 }

 /* ====== WHY ====== */
 .why {
   background:
     radial-gradient(900px 420px at 15% 0%, rgba(252, 156, 12, .22), transparent 60%),
     radial-gradient(900px 420px at 85% 0%, rgba(156, 84, 180, .18), transparent 60%),
     linear-gradient(180deg, #0b1b3a 0%, #0f2a5a 100%);
   color: #eaf2ff;
   position: relative;
   overflow: hidden;
 }

 .why .section-title p {
   color: #c7d2fe
 }

 .why-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--gap);
   margin-top: 22px;
   position: relative;
   z-index: 2;
 }

 .why-item {
   background: rgba(255, 255, 255, .10);
   border: 1px solid rgba(255, 255, 255, .16);
   border-radius: var(--radius2);
   padding: 16px;
   box-shadow: 0 16px 40px rgba(2, 6, 23, .30);
   backdrop-filter: blur(6px);
 }

 .whead {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 10px
 }

 .tick {
   width: 36px;
   height: 36px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   font-weight: 1000;
   background: rgba(132, 180, 12, .22);
   border: 1px solid rgba(132, 180, 12, .30);
 }

 .why-item b {
   font-size: 15px
 }

 .why-item p {
   margin: 0;
   color: #c7d2fe;
   line-height: 1.75;
   font-size: 14px;
   font-weight: 800
 }

 /* ====== GALLERY ====== */
 .gallery {
   background:
     radial-gradient(900px 420px at 10% 0%, rgba(252, 156, 12, .12), transparent 60%),
     radial-gradient(900px 420px at 90% 0%, rgba(12, 180, 180, .10), transparent 60%),
     linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
   position: relative;
   overflow: hidden;
 }

 .gallery-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-top: 18px;
   position: relative;
 }

 .gimg {
   aspect-ratio: 4/3;
   border-radius: 22px;
   overflow: hidden;
   border: 2px solid rgba(2, 6, 23, .06);
   background-size: cover;
   background-position: center;
   box-shadow: var(--shadow2);
   transform: rotate(.15deg);
   transition: .15s ease;
 }

 .gimg:hover {
   transform: translateY(-2px) rotate(-.15deg)
 }

 /* ====== VIDEO ====== */
 .video {
   background: linear-gradient(180deg, #fff 0%, #f6fbff 100%);
   position: relative;
   overflow: hidden;
 }

 .video-grid {
   display: grid;
   grid-template-columns: 1.4fr .6fr;
   gap: var(--gap);
   align-items: start;
   margin-top: 18px;
   position: relative;
 }

 .video-main,
 .video-side {
   background: #fff;
   border-radius: var(--radius2);
   border: 2px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow);
   overflow: hidden;
 }

 .video-main .frame {
   aspect-ratio: 16/9;
   background: #0b1225;
   display: grid;
   place-items: center;
   color: #cbd5e1;
   font-weight: 1000;
 }

 .video-side .item {
   display: flex;
   gap: 12px;
   padding: 12px;
   align-items: center;
   border-top: 1px solid rgba(2, 6, 23, .06);
   cursor: pointer;
   transition: .12s ease;
 }

 .video-side .item:hover {
   background: rgba(36, 108, 204, .06)
 }

 .video-side .item:first-child {
   border-top: 0
 }

 .vthumb {
   width: 110px;
   height: 64px;
   border-radius: 16px;
   background: #111827;
   background-size: cover;
   background-position: center;
   border: 1px solid rgba(2, 6, 23, .12);
   flex: 0 0 auto;
 }

 .video-side b {
   display: block;
   font-size: 13px
 }

 .video-side small {
   color: var(--muted);
   font-weight: 800
 }

 /* ====== TESTI ====== */
 .testi {
   background:
     radial-gradient(800px 380px at 20% 0%, rgba(36, 108, 204, .12), transparent 60%),
     linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
   position: relative;
   overflow: hidden;
 }

 .testi-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--gap);
   margin-top: 18px;
 }

 .quote {
   background: linear-gradient(180deg, #fff, #f8fbff);
   border-radius: var(--radius2);
   border: 2px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow2);
   padding: 16px;
   position: relative;
   overflow: hidden;
 }

 .quote::after {
   content: "“";
   position: absolute;
   right: 14px;
   top: -10px;
   font-size: 64px;
   color: rgba(36, 108, 204, .14);
   font-weight: 1000;
 }

 .who {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 10px
 }

 .avatar {
   width: 44px;
   height: 44px;
   border-radius: 18px;
   display: grid;
   place-items: center;
   color: #fff;
   font-weight: 1000;
   background: linear-gradient(135deg, var(--purple), var(--teal));
   box-shadow: 0 14px 30px rgba(156, 84, 180, .16);
 }

 .quote p {
   margin: 0;
   color: #334155;
   line-height: 1.75;
   font-size: 14px;
   font-weight: 800
 }

 /* ====== FAQ ====== */
 .faq {
   background:
     radial-gradient(700px 320px at 85% 0%, rgba(132, 180, 12, .10), transparent 60%),
     linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
   position: relative;
   overflow: hidden;
 }

 .faq-wrap {
   max-width: 860px;
   margin: 0 auto;
   display: grid;
   gap: 10px;
   margin-top: 18px
 }

 details {
   background: #fff;
   border-radius: 18px;
   border: 2px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow2);
   padding: 12px 14px;
 }

 summary {
   cursor: pointer;
   font-weight: 1000;
   list-style: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
 }

 summary::-webkit-details-marker {
   display: none
 }

 .caret {
   width: 36px;
   height: 36px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   background: rgba(252, 156, 12, .18);
   border: 1px solid rgba(252, 156, 12, .26);
   transition: .2s ease;
   flex: 0 0 auto;
   font-weight: 1000;
 }

 details[open] .caret {
   transform: rotate(180deg)
 }

 details p {
   margin: 10px 0 0;
   color: var(--muted);
   line-height: 1.75;
   font-size: 14px;
   font-weight: 800
 }

 /* ====== TUTORS ====== */
 .tutor {
   background: #fff;
   position: relative;
   overflow: hidden;
 }

 .tutor-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   margin-top: 18px;
 }

 .tcard {
   background: linear-gradient(180deg, #fff, #f8fbff);
   border-radius: var(--radius2);
   border: 2px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow2);
   overflow: hidden;
   transform: rotate(.1deg);
 }

 .timg {
   height: 150px;
   background-size: cover;
   background-position: center
 }

 .tcard .body {
   padding: 12px 14px
 }

 .tcard b {
   display: block
 }

 .tcard small {
   color: var(--muted);
   font-weight: 800
 }

 /* ====== CTA LOCATION ====== */
 .cta-bottom {
   padding: 0;
   background: linear-gradient(135deg, var(--orange), var(--red));
   position: relative;
   overflow: hidden;
 }

 .cta-bottom .sprinkles {
   opacity: .35
 }

 .cta-box {
   padding: 22px 18px;
   border-radius: var(--radius2);
   transform: translateY(-34px);
   background: rgba(255, 255, 255, .92);
   border: 2px solid rgba(2, 6, 23, .08);
   box-shadow: var(--shadow);
   display: flex;
   gap: 14px;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   position: relative;
   z-index: 2;
 }

 .cta-box h3 {
   margin: 0;
   font-size: 18px
 }

 .cta-box p {
   margin: 6px 0 0;
   color: var(--muted);
   max-width: 650px;
   line-height: 1.65;
   font-weight: 800
 }

 /* ====== CONTACT ====== */
 .contact {
   background: linear-gradient(180deg, #fff 0%, #f6fbff 100%);
   padding-top: 18px
 }

 .contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--gap);
   align-items: start;
   margin-top: 18px
 }

 .ibox {
   background: #fff;
   border-radius: var(--radius2);
   border: 2px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow2);
   padding: 16px;
 }

 .list {
   display: grid;
   gap: 10px;
   margin-top: 10px
 }

 .li {
   display: flex;
   gap: 10px;
   align-items: flex-start
 }

 .li .pin {
   width: 38px;
   height: 38px;
   border-radius: 18px;
   display: grid;
   place-items: center;
   font-weight: 1000;
   flex: 0 0 auto;
   margin-top: 2px;
   background: rgba(12, 180, 180, .18);
   border: 1px solid rgba(12, 180, 180, .26);
 }

 .li b {
   display: block;
   font-size: 14px
 }

 .li small {
   color: var(--muted);
   font-weight: 800
 }

 .map {
   aspect-ratio: 16/10;
   border-radius: 22px;
   overflow: hidden;
   border: 2px solid rgba(2, 6, 23, .06);
   background: #0b1225
 }

 /* ====== FOOTER + WA ====== */
 footer {
   background: #0b1b3a;
   color: #c7d2fe;
   padding: 26px 0
 }

 .foot {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   align-items: center
 }

 .social {
   display: flex;
   gap: 10px
 }

 .social a {
   width: 42px;
   height: 42px;
   border-radius: 18px;
   display: grid;
   place-items: center;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .12);
   color: #e5edff;
   font-weight: 1000;
 }

 .wa {
   position: fixed;
   right: 18px;
   bottom: 18px;
   z-index: 80;
   width: 58px;
   height: 58px;
   border-radius: 22px;
   background: linear-gradient(135deg, var(--green), #22c55e);
   color: #0b1225;
   display: grid;
   place-items: center;
   font-weight: 1000;
   box-shadow: 0 18px 44px rgba(132, 180, 12, .30);
   border: 2px solid rgba(255, 255, 255, .22);
   transition: .18s ease;
 }

 .wa:hover {
   transform: translateY(-2px) rotate(-.6deg)
 }

 /* ====== RESPONSIVE ====== */
 @media (max-width: 980px) {
   .hero-grid {
     grid-template-columns: 1fr
   }

   .problem-grid {
     grid-template-columns: 1fr
   }

   .programs {
     grid-template-columns: 1fr
   }

   .why-grid {
     grid-template-columns: 1fr
   }

   .gallery-grid {
     grid-template-columns: 1fr 1fr
   }

   .video-grid {
     grid-template-columns: 1fr
   }

   .testi-grid {
     grid-template-columns: 1fr
   }

   .tutor-grid {
     grid-template-columns: 1fr 1fr
   }

   .contact-grid {
     grid-template-columns: 1fr
   }

   .menu {
     display: none
   }

   .hamburger {
     display: inline-flex
   }

   .brand img {
     width: 170px
   }

   .mobile-panel {
     display: none;
     padding: 10px 0 16px
   }

   .mobile-panel.open {
     display: block
   }

   .mobile-panel a {
     display: block;
     padding: 12px 14px;
     border-radius: 18px;
     border: 2px solid rgba(2, 6, 23, .06);
     background: #fff;
     margin-top: 8px;
     font-weight: 1000;
   }

   .h1 {
     font-size: 40px
   }
 }

 /* ===== TEAM SECTION (Playful) ===== */
 .team {
   position: relative;
   padding: 54px 0 34px;
   background:
     radial-gradient(900px 420px at 15% 0%, rgba(252, 156, 12, .12), transparent 60%),
     radial-gradient(900px 420px at 85% 0%, rgba(12, 180, 180, .10), transparent 60%),
     linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
   overflow: hidden;
 }

 .team-sprinkles {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .22;
   filter: blur(.4px);
   background:
     radial-gradient(circle at 12% 20%, rgba(252, 156, 12, .55) 0 6px, transparent 7px),
     radial-gradient(circle at 20% 70%, rgba(36, 108, 204, .35) 0 5px, transparent 6px),
     radial-gradient(circle at 38% 25%, rgba(12, 180, 180, .40) 0 6px, transparent 7px),
     radial-gradient(circle at 52% 78%, rgba(156, 84, 180, .30) 0 6px, transparent 7px),
     radial-gradient(circle at 70% 22%, rgba(132, 180, 12, .35) 0 6px, transparent 7px),
     radial-gradient(circle at 88% 68%, rgba(228, 84, 12, .26) 0 5px, transparent 6px);
 }

 .team-title {
   text-align: center;
   max-width: 780px;
   margin: 0 auto 22px;
 }

 .team-eyebrow {
   font-weight: 1000;
   font-size: 12px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: rgba(36, 108, 204, .92);
 }

 .team-title h2 {
   margin: 10px 0 8px;
   font-size: 38px;
   letter-spacing: -.01em;
 }

 .team-title h2 span {
   color: var(--blue);
   background: linear-gradient(135deg, var(--blue), var(--teal));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .team-title p {
   margin: 0;
   color: var(--muted);
   line-height: 1.7;
   font-weight: 800;
 }

 .team-lead {
   display: flex;
   justify-content: center;
   margin-top: 16px;
   margin-bottom: 18px;
 }

 /* Person card */
 .person {
   width: 100%;
   max-width: 280px;
   background: rgba(255, 255, 255, .88);
   border: 2px solid rgba(2, 6, 23, .06);
   border-radius: 26px;
   box-shadow: var(--shadow2);
   padding: 14px 14px 16px;
   text-align: center;
   transition: .18s ease;
   position: relative;
   overflow: hidden;
 }

 .person:hover {
   transform: translateY(-4px) rotate(-.15deg);
 }

 .person.lead {
   max-width: 560px;
   padding: 18px 18px 16px;
   border-radius: 30px;
   box-shadow: var(--shadow);
   background:
     radial-gradient(circle at 25% 25%, rgba(252, 156, 12, .14), transparent 55%),
     radial-gradient(circle at 80% 65%, rgba(12, 180, 180, .12), transparent 60%),
     linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 251, 255, .92));
 }

 .avatar-wrap {
   width: 132px;
   height: 132px;
   margin: 0 auto 10px;
   position: relative;
   display: grid;
   place-items: center;
 }

 .person.lead .avatar-wrap {
   width: 150px;
   height: 150px;
 }

 .avatar {
   width: 108px;
   height: 108px;
   border-radius: 999px;
   object-fit: cover;
   border: 6px solid #fff;
   box-shadow: 0 16px 34px rgba(2, 6, 23, .16);
   position: relative;
   z-index: 2;
 }

 .person.lead .avatar {
   width: 124px;
   height: 124px;
 }

 .avatar-ring {
   position: absolute;
   inset: 6px;
   border-radius: 999px;
   z-index: 1;
   filter: drop-shadow(0 18px 34px rgba(2, 6, 23, .10));
 }

 .ring-blue {
   background: conic-gradient(from 180deg, var(--blue), var(--teal), var(--blue));
 }

 .ring-orange {
   background: conic-gradient(from 180deg, var(--orange), var(--red), var(--orange));
 }

 .ring-green {
   background: conic-gradient(from 180deg, var(--green), #22c55e, var(--green));
 }

 .ring-teal {
   background: conic-gradient(from 180deg, var(--teal), var(--blue), var(--teal));
 }

 .ring-purple {
   background: conic-gradient(from 180deg, var(--purple), var(--teal), var(--purple));
 }

 .person-meta .name {
   font-weight: 1000;
   font-size: 18px;
 }

 .person-meta .role {
   margin-top: 4px;
   font-weight: 900;
   color: var(--muted);
 }

 /* little sparkles for lead */
 .spark {
   position: absolute;
   z-index: 3;
   width: 34px;
   height: 34px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   background: rgba(255, 255, 255, .90);
   border: 1px solid rgba(2, 6, 23, .08);
   box-shadow: 0 10px 18px rgba(2, 6, 23, .12);
   font-weight: 1000;
 }

 .spark.s1 {
   right: -6px;
   top: 10px;
   transform: rotate(8deg);
 }

 .spark.s2 {
   left: -6px;
   bottom: 12px;
   transform: rotate(-10deg);
 }

 /* chips under lead */
 .person.lead .chips {
   margin-top: 10px;
   display: flex;
   justify-content: center;
   gap: 8px;
   flex-wrap: wrap;
 }

 .person.lead .chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 9px 11px;
  font-size: 12.5px;
   border-radius: 999px;
   background: #fff;
   border: 2px solid rgba(2, 6, 23, .06);
   box-shadow: var(--shadow2);
   font-weight: 1000;
 }

 .team-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   justify-items: center;
   margin-top: 10px;
 }

 /* CTA row */
 .team-cta {
   margin-top: 18px;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: center;
 }

 /* Responsive */
 @media (max-width: 980px) {
   .team-grid {
     grid-template-columns: 1fr 1fr;
   }

   .team-title h2 {
     font-size: 32px;
   }
 }

 @media (max-width: 560px) {
   .team-grid {
     grid-template-columns: 1fr;
   }

   .person {
     max-width: 360px;
   }

   .person.lead {
     max-width: 380px;
   }
 }

 /* ===== CTA SECTION ===== */
 .cta-section {
   position: relative;
   padding: 34px 0 58px;
   background:
     radial-gradient(1000px 420px at 20% 10%, rgba(252, 156, 12, .16), transparent 60%),
     radial-gradient(900px 420px at 85% 25%, rgba(156, 84, 180, .12), transparent 60%),
     linear-gradient(180deg, #ffffff 0%, #fff8ef 55%, #f6fbff 100%);
   overflow: hidden;
 }

 .cta-sprinkles {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .55;
   background:
     radial-gradient(circle at 10% 25%, rgba(252, 156, 12, .55) 0 6px, transparent 7px),
     radial-gradient(circle at 18% 70%, rgba(36, 108, 204, .35) 0 5px, transparent 6px),
     radial-gradient(circle at 40% 22%, rgba(12, 180, 180, .40) 0 6px, transparent 7px),
     radial-gradient(circle at 70% 20%, rgba(132, 180, 12, .35) 0 6px, transparent 7px),
     radial-gradient(circle at 88% 68%, rgba(156, 84, 180, .28) 0 5px, transparent 6px);
 }

 .cta-card {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 18px;

   padding: 18px;
   overflow: hidden;
 }


 .cta-left,
 .cta-right {
   position: relative;
   z-index: 2
 }

 .cta-right {
   margin-top: 60px;
 }

 .cta-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 9px 12px;
   border-radius: 999px;
   background: rgba(132, 180, 12, .14);
   border: 1px solid rgba(132, 180, 12, .22);
   font-weight: 1000;
   font-size: 12px;
 }

 .cta-left h2 {
   margin: 12px 0 8px;
   font-size: 30px;
   letter-spacing: -.01em;
   line-height: 1.1;
 }

 .cta-left h2 span {
   background: linear-gradient(135deg, var(--orange), var(--red));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .cta-left p {
   margin: 0;
   color: #334155;
   line-height: 1.75;
   font-weight: 800;
   max-width: 640px;
 }

 .cta-points {
   margin-top: 12px;
   display: grid;
   gap: 8px;
 }

 .cta-point {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   background: #fff;
   border: 2px solid rgba(2, 6, 23, .06);
   border-radius: 18px;
   padding: 10px 12px;
   box-shadow: var(--shadow2);
   font-weight: 900;
   color: #334155;
 }

 .cta-point span {
   width: 26px;
   height: 26px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: rgba(12, 180, 180, .16);
   border: 1px solid rgba(12, 180, 180, .22);
   flex: 0 0 auto;
   margin-top: 1px;
   font-weight: 1000;
 }

 .cta-box {
   background: #fff;
   border: 2px solid rgba(2, 6, 23, .06);
   border-radius: 26px;
   padding: 14px;
   box-shadow: var(--shadow2);
 }

 .cta-mini b {
   display: block;
   font-size: 14px
 }

 .cta-mini small {
   display: block;
   color: var(--muted);
   font-weight: 800;
   margin-top: 2px
 }

 .cta-btn {
   width: 100%;
   justify-content: center;
   margin-top: 10px
 }

 .cta-note {
   margin-top: 12px;
   color: var(--muted);
   font-weight: 900;
   font-size: 12.5px;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
 }

 .cta-note span {
   font-size: 14px
 }

 @media (max-width: 980px) {
   .cta-card {
     grid-template-columns: 1fr
   }

   .cta-left h2 {
     font-size: 28px
   }
 }

 section,
 header {
   scroll-margin-top: 96px;
   /* tinggi navbar + sedikit jarak */
 }


 /* ===== TEAM - proportional layout (1 owner + 2 tutors) ===== */
 .team-lead {
   display: flex;
   justify-content: center;
   margin-top: 14px;
   margin-bottom: 18px;
 }

 /* Owner card: lebih lebar & terlihat “utama” */
 .person.lead {
   width: min(720px, 100%);
   padding: 18px 20px 16px;
   border-radius: 32px;
 }

 /* rapihin judul/role */
 .person-meta .name {
   line-height: 1.25;
 }

 .person-meta .role {
   margin-top: 6px;
   font-size: 14px;
   opacity: .9;
 }

 /* Divider label biar tidak “loncat” */
 .team-divider {
   display: flex;
   justify-content: center;
   margin: 10px 0 14px;
 }

 .team-divider span {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 12px;
  font-size: 12px;
  box-shadow: none;
  background: rgba(255,255,255,.75);

   border-radius: 999px;
   border: 2px solid rgba(2, 6, 23, .06);
   font-weight: 1000;
   color: var(--muted);
 }

 /* Grid 2 tutor: center, ada max width supaya proporsional */
 .team-grid.two {
   width: min(760px, 100%);
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(2, minmax(240px, 1fr));
   gap: 16px;
   justify-items: center;
 }

 /* Card tutor: tinggi terasa konsisten */
 .team-grid.two .person {
   width: 100%;
   max-width: 340px;
   padding: 12px 14px 16px;
   border-radius: 26px;
 }

 /* Avatar sedikit lebih kecil utk tutor biar beda dengan owner */
 .team-grid.two .avatar-wrap {
   width: 118px;
   height: 118px;
 }

 .team-grid.two .avatar {
   width: 96px;
   height: 96px;
 }

 /* Responsive */
 @media (max-width: 680px) {
   .team-grid.two {
     grid-template-columns: 1fr;
     width: min(420px, 100%);
   }

   .person.lead {
     width: min(520px, 100%);
   }
 }

 .person .spark {
   display: none;
 }
 .team-grid.two .person-meta .name{
  font-size: 16px;
}
.team-grid.two .person-meta .role{
  font-size: 13px;
}