:root{--navy:#0E2038;--blue:#13396B;--gold:#F0A21A;--bg:#F1F5FB;--soft:#E3EBF7;--card:#fff;--muted:#5B6B82;--line:#DCE4F0;--ig:#C13584;--fb:#1B6AE0;--tt:#10272E;--yt:#D93025}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--navy);line-height:1.6}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.top{background:var(--navy);color:#C9D6EA;font-size:.78rem}
.top .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
header{background:#fff;border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem}
.logo img{width:34px;height:34px;object-fit:contain}
nav.m{display:flex;gap:28px;font-weight:500;font-size:.92rem}
nav.m a{padding:4px 0;border-bottom:2px solid transparent}
nav.m a:hover{border-color:var(--gold)}
.acts{display:flex;gap:10px;align-items:center}
.btn{display:inline-block;padding:11px 22px;border-radius:999px;font-weight:600;font-size:.9rem;border:2px solid var(--blue);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.f{background:var(--blue);color:#fff}
.btn.o{background:transparent;color:var(--blue)}
.btn.g{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn.s{padding:7px 16px;font-size:.78rem}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:56px 0 48px}
.tag{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--blue);margin-bottom:4px}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:800;line-height:1.02;letter-spacing:-.02em;color:var(--navy)}
.hero h1 span{display:block;font-family:'Caveat',cursive;font-weight:700;font-size:1.25em;color:var(--blue);line-height:1}
.hero p{margin:20px 0 26px;color:var(--muted);max-width:44ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.pts{display:flex;gap:22px;flex-wrap:wrap;font-size:.85rem;font-weight:600}
.pts i{font-style:normal;color:var(--gold);margin-right:6px}
.visual{position:relative;min-height:400px;display:grid;place-items:center}
.visual::before{content:"";position:absolute;inset:6% 4%;background:var(--soft);border-radius:42% 58% 52% 48%/48% 44% 56% 52%}
.mock{position:relative;width:min(340px,86%);background:#fff;border-radius:24px;padding:20px;box-shadow:0 30px 50px -28px rgba(14,32,56,.55);transform:rotate(-2deg)}
.mock h4{font-size:.85rem;margin-bottom:10px}
.pl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.pl span{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;border:2px solid var(--line);border-radius:12px;padding:7px}
.pl span.on{border-color:var(--blue);background:#F2F6FC}
.b{width:26px;height:26px;border-radius:7px;color:#fff;display:grid;place-items:center;font-size:.65rem;font-weight:800;flex:none;font-style:normal}
.ig{background:var(--ig)}.fb{background:var(--fb)}.tt{background:var(--tt)}.yt{background:var(--yt)}
.cap{border:1px solid var(--line);border-radius:12px;padding:10px;font-size:.78rem;color:var(--muted);min-height:54px;margin-bottom:12px}
.sch{display:flex;justify-content:space-between;align-items:center;background:#EEF3FA;border-radius:12px;padding:9px 12px;font-size:.75rem;font-weight:600}
.badge{position:absolute;right:2%;top:6%;width:104px;height:104px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;text-align:center;font-weight:800;font-size:.72rem;line-height:1.2;transform:rotate(10deg);box-shadow:0 14px 28px -14px rgba(0,0,0,.4)}
.badge b{display:block;font-size:1.7rem;line-height:1}
.float{position:absolute;background:#fff;border-radius:14px;padding:8px 12px;font-size:.75rem;font-weight:600;box-shadow:0 14px 30px -16px rgba(14,32,56,.5);display:flex;align-items:center;gap:8px}
.float.a{left:0;bottom:14%}.float.c{right:4%;bottom:4%}

/* strip */
.strip{background:#fff;border-radius:20px;box-shadow:0 18px 40px -28px rgba(14,32,56,.5);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:22px 26px;margin-bottom:56px}
.strip div{display:flex;gap:12px;align-items:center}
.strip .ic{width:42px;height:42px;border-radius:12px;background:var(--soft);display:grid;place-items:center;font-size:1.15rem;flex:none}
.strip b{display:block;font-size:.88rem;line-height:1.3}
.strip small{color:var(--muted);font-size:.76rem;line-height:1.3;display:block}

/* sections */
section{padding:36px 0}
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:20px}
.sh h2{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:800}
.sh h2 em{font-family:'Caveat',cursive;font-style:normal;color:var(--blue);font-size:1.3em;margin-left:6px}
.sh a{font-size:.8rem;font-weight:600;color:var(--blue)}

/* platform cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pc{border-radius:18px;padding:20px 16px;text-align:center;background:#fff;border:1px solid var(--line)}
.pc .b{width:56px;height:56px;border-radius:16px;font-size:1.05rem;margin:0 auto 12px}
.pc h3{font-size:1rem}
.pc p{font-size:.78rem;color:var(--muted);margin:4px 0 14px;min-height:2.6em}
.pc.ig2{background:#FBEAF3}.pc.fb2{background:#E6EFFD}.pc.tt2{background:#E4EBED}.pc.yt2{background:#FCE9E7}

/* jadwal + keamanan */
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.promo{background:var(--blue);color:#fff;border-radius:24px;padding:34px;position:relative;overflow:hidden}
.promo h2{font-size:1.9rem;font-weight:800;line-height:1.1}
.promo h2 span{display:block;font-family:'Caveat',cursive;color:var(--gold);font-size:1.4em;font-weight:700}
.promo p{margin:12px 0 20px;color:#C9D6EA;font-size:.9rem;max-width:34ch}
.cal{position:absolute;right:-10px;bottom:-14px;width:170px;background:#fff;color:var(--navy);border-radius:16px;padding:12px;transform:rotate(6deg)}
.cal b{font-size:.7rem}
.cal div{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:6px}
.cal i{aspect-ratio:1;border-radius:4px;background:var(--soft)}
.cal i.h{background:var(--gold)}.cal i.h2{background:var(--blue)}
.about{background:#fff;border-radius:24px;padding:30px;border:1px solid var(--line)}
.about h2{font-size:1.3rem;font-weight:800}
.about h2 em{font-family:'Caveat',cursive;font-style:normal;color:var(--blue);font-size:1.3em}
.about p{font-size:.86rem;color:var(--muted);margin:10px 0 16px}
.about ul{list-style:none;display:grid;gap:10px}
.about li{display:flex;gap:10px;font-size:.85rem;font-weight:500}
.about li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-size:.7rem;font-weight:800}

/* cara kerja */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.st{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.st .n{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:700;font-size:.9rem}
.st .n i{font-style:normal;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}
.st p{font-size:.84rem;color:var(--muted)}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px}
summary{font-weight:600;font-size:.9rem;cursor:pointer}
details p{margin-top:8px;font-size:.85rem;color:var(--muted)}

/* ajakan akhir */
.crave{background:linear-gradient(100deg,var(--navy),var(--blue));color:#fff;border-radius:24px;padding:38px 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.crave h2{font-size:1.6rem;font-weight:800}
.crave h2 span{font-family:'Caveat',cursive;color:var(--gold);font-size:1.4em}
.crave p{color:#C9D6EA;font-size:.9rem}

/* footer + tim */
footer{margin-top:48px;background:var(--navy);color:#B7C4DA;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;padding-bottom:28px}
footer .logo{color:#fff}
footer .wrap.team{display:block;border-bottom:1px solid rgba(255,255,255,.12);padding:36px 24px 30px;text-align:center}
.team h3{color:#fff;font-size:1.1rem;font-weight:700;margin-bottom:18px}
.team h3 em{font-family:'Caveat',cursive;font-style:normal;color:var(--gold);font-size:1.4em}
.tm{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.tm div{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border-radius:999px;padding:6px 20px 6px 6px;color:#fff;font-weight:600;font-size:.9rem}
.tm i{font-style:normal;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-weight:800}
footer a{margin-left:18px}
footer a:hover{color:#fff}

/* responsif */
@media(max-width:900px){
  nav.m{display:none}
  .hero,.duo{grid-template-columns:1fr}
  .strip,.cards,.steps{grid-template-columns:1fr 1fr}
  .faq{grid-template-columns:1fr}
  .visual{min-height:380px}
}
@media(max-width:560px){
  .strip,.cards,.steps{grid-template-columns:1fr}
  .acts .btn.o{display:none}
  .promo,.crave{padding:26px}
  .cal{display:none}
  .top .wrap span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}