:root{
  --ink:#16324F;
  --blue:#2368A2;
  --blue2:#2D86C2;
  --sky:#EAF5FC;
  --sky2:#D8EEF9;
  --mint:#E4F4EE;
  --green:#1B8C66;
  --amber:#D98418;
  --amber-soft:#FFF3D9;
  --soft:#F7FBFE;
  --line:#D8E6F0;
  --muted:#61758A;
  --white:#FFFFFF;
  --shadow:0 24px 70px rgba(34,73,102,.13);
  --shadow-soft:0 12px 36px rgba(34,73,102,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#F7FBFE;
}
a{text-decoration:none;color:inherit}
svg{display:block}
button,input{font:inherit}
.site-shell{min-height:100vh;overflow:hidden;background:
  radial-gradient(circle at 2% 4%,rgba(198,231,249,.62),transparent 31%),
  radial-gradient(circle at 98% 5%,rgba(205,239,225,.65),transparent 29%),
  linear-gradient(135deg,#F8FCFF 0%,#EDF8FE 52%,#F1F8F4 100%);
}

/* Header */
.site-header{
  position:relative;
  z-index:30;
}
.nav-wrap{
  max-width:1320px;
  margin:0 auto;
  padding:26px 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:max-content;
}
.brand-mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(145deg,var(--blue),var(--blue2));
  box-shadow:0 11px 24px rgba(35,104,162,.23);
}
.brand-mark svg{
  width:31px;
  height:31px;
  fill:#fff;
}
.brand-mark svg path{
  stroke:#fff;
  stroke-width:3.1;
  stroke-linecap:round;
}
.brand-word{
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:-.045em;
}
.brand-word span{color:#4AA0D0}
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.school-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.76rem;
  font-weight:700;
  color:#58738A;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.64);
  border:1px solid rgba(216,230,240,.92);
}
.school-chip svg{width:16px}
.nav-link{
  color:#4B6780;
  font-size:.87rem;
  font-weight:700;
  padding:10px 11px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:13px;
  padding:11px 16px;
  font-weight:800;
  font-size:.86rem;
  border:1px solid transparent;
  transition:.2s ease;
}
.btn svg{width:17px;height:17px}
.btn:hover{transform:translateY(-2px)}
.btn-solid{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  box-shadow:0 10px 25px rgba(35,104,162,.20);
}
.btn-solid:hover{box-shadow:0 14px 30px rgba(35,104,162,.27)}
.btn-outline{
  background:rgba(255,255,255,.74);
  color:var(--blue);
  border-color:#BFDDEC;
}
.btn-light{
  background:#fff;
  color:var(--blue);
  border-color:rgba(255,255,255,.86);
}
.btn-large{padding:14px 19px;font-size:.92rem}

/* Hero */
.hero-section{
  position:relative;
  z-index:2;
}
.hero-wrap{
  max-width:1320px;
  min-height:calc(100vh - 102px);
  margin:0 auto;
  padding:34px 34px 76px;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(470px,.98fr);
  gap:68px;
  align-items:center;
}
.hero-copy{padding:8px 0 24px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  color:var(--blue);
  background:rgba(255,255,255,.82);
  border:1px solid #BFDDEC;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 7px 20px rgba(58,104,134,.05);
}
.eyebrow svg{width:16px}
.hero-copy h1{
  margin:20px 0 20px;
  max-width:760px;
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(3.2rem,5.15vw,5.25rem);
  line-height:.99;
  letter-spacing:-.052em;
  color:var(--ink);
}
.hero-copy h1 em{
  font-style:normal;
  color:#1E5C8B;
  position:relative;
  display:inline;
}
.hero-desc{
  max-width:690px;
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem,1.3vw,1.13rem);
  line-height:1.8;
}
.hero-actions{
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.flow{
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  color:#54768D;
  font-size:.68rem;
  font-weight:800;
}
.flow span{
  padding:8px 10px;
  border-radius:9px;
  background:rgba(255,255,255,.83);
  border:1px solid #D2E3EE;
}
.flow b{color:#72A3BF}
.trust-row{
  margin-top:24px;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  color:#61798D;
  font-size:.73rem;
  font-weight:700;
}
.trust-item{display:flex;align-items:center;gap:7px}
.trust-item svg{width:16px;height:16px;color:var(--green)}

/* Hero visual */
.hero-visual{
  position:relative;
  min-height:590px;
  display:grid;
  align-items:center;
}
.visual-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
}
.glow-one{
  width:280px;height:280px;
  background:#D7EDF9;
  top:2%;right:3%;
}
.glow-two{
  width:230px;height:230px;
  background:#DCEFE7;
  bottom:2%;left:0;
}
.visual-card{
  position:relative;
  z-index:3;
  padding:19px;
  border-radius:30px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.visual-head{
  padding:4px 6px 15px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}
.visual-head>div{display:grid;gap:3px}
.visual-kicker{
  color:#6B8193;
  font-size:.67rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.visual-head strong{font-size:1rem}
.visual-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:999px;
  background:#EAF7F0;
  color:#1B7757;
  font-size:.68rem;
  font-weight:800;
}
.visual-status span{
  width:7px;height:7px;border-radius:50%;background:#24A374;
}
.mentor-illustration{
  width:100%;
  height:auto;
  border-radius:23px;
}
.visual-bottom{
  padding:14px 5px 1px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.mini-card{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid #E2ECF2;
  border-radius:13px;
  background:#FBFDFE;
}
.mini-card>div{min-width:0;display:grid}
.mini-card strong{font-size:.76rem}
.mini-card small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#718698;
  font-size:.61rem;
  margin-top:2px;
}
.mini-icon,.benefit-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:11px;
}
.mini-icon{width:34px;height:34px}
.mini-icon svg{width:16px;height:16px}
.sky{background:var(--sky);color:var(--blue)}
.mint{background:var(--mint);color:var(--green)}
.amber{background:var(--amber-soft);color:#A96913}

.floating-note{
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:15px;
  background:#fff;
  border:1px solid #E3EDF3;
  box-shadow:var(--shadow-soft);
}
.floating-note>svg{
  width:20px;height:20px;color:var(--blue)
}
.floating-note>div{display:grid;gap:2px}
.floating-note strong{font-size:.75rem}
.floating-note span{font-size:.63rem;color:#708496}
.note-a{left:-27px;bottom:96px}
.note-b{right:-16px;top:105px}

/* Benefits */
.benefit-section{
  background:rgba(255,255,255,.56);
  border-top:1px solid rgba(216,230,240,.72);
  border-bottom:1px solid rgba(216,230,240,.72);
}
.section-wrap{
  max-width:1260px;
  margin:0 auto;
  padding:82px 34px;
}
.section-head{
  max-width:760px;
  margin:0 auto 32px;
  text-align:center;
}
.section-kicker{
  color:var(--blue);
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.section-head h2,.cta-card h2{
  margin:9px 0 10px;
  font-family:"Fraunces",Georgia,serif;
  letter-spacing:-.035em;
  font-size:clamp(2rem,3vw,3.15rem);
}
.section-head p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}
.benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px;
}
.benefit-card{
  background:#fff;
  border:1px solid #E0EBF2;
  border-radius:20px;
  padding:23px;
  box-shadow:0 7px 22px rgba(34,73,102,.04);
}
.benefit-icon{
  width:44px;height:44px;
  margin-bottom:17px;
}
.benefit-icon svg{width:20px;height:20px}
.benefit-card h3{margin:0 0 8px;font-size:1rem}
.benefit-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
  font-size:.85rem;
}
.principle-card{
  margin-top:22px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:34px;
  align-items:center;
  background:var(--ink);
  color:#fff;
  border-radius:23px;
  padding:28px 30px;
  overflow:hidden;
  position:relative;
}
.principle-card:after{
  content:"?";
  position:absolute;
  right:-13px;
  bottom:-92px;
  font-family:"Fraunces",serif;
  font-size:230px;
  font-weight:700;
  color:rgba(91,156,196,.16);
}
.principle-copy,.principle-prompts{position:relative;z-index:2}
.principle-kicker{
  color:#9DCCE7;
  font-size:.67rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.principle-copy h3{
  margin:8px 0;
  font-family:"Fraunces",Georgia,serif;
  font-size:2rem;
}
.principle-copy p{
  margin:0;
  color:#C6D9E6;
  line-height:1.65;
  font-size:.86rem;
}
.principle-prompts{
  display:grid;
  gap:3px;
}
.principle-prompts span{
  display:flex;
  gap:11px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.78rem;
  color:#DFEAF1;
}
.principle-prompts span:last-child{border-bottom:0}
.principle-prompts b{
  color:#8CC7E6;
  font-size:.66rem;
}

/* CTA */
.cta-section{padding:64px 0 74px}
.cta-card{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  padding:34px;
  border-radius:26px;
  color:#fff;
  background:linear-gradient(135deg,#17405F,#2368A2 62%,#3B8DC0);
  box-shadow:0 24px 60px rgba(25,72,105,.20);
}
.cta-card .section-kicker{color:#CFE8F6}
.cta-card h2{
  max-width:690px;
  margin-bottom:0;
  color:#fff;
  font-size:clamp(1.8rem,3vw,2.7rem);
}
.cta-actions{display:flex;gap:9px;flex-wrap:wrap}

/* Footer */
.site-footer{background:#fff;border-top:1px solid #E4EDF3}
.footer-wrap{
  max-width:1260px;
  margin:0 auto;
  padding:24px 34px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  color:#6B8092;
  font-size:.76rem;
}
.footer-wrap>div{display:flex;gap:10px;align-items:center}
.footer-wrap strong{color:var(--ink)}
.footer-wrap p{margin:0}

/* responsive */
@media(max-width:1120px){
  .school-chip{display:none}
  .hero-wrap{
    grid-template-columns:minmax(0,1fr) minmax(410px,.9fr);
    gap:38px;
  }
  .hero-copy h1{font-size:clamp(3rem,5vw,4.5rem)}
  .hero-visual{min-height:530px}
}

@media(max-width:900px){
  .nav-wrap{padding:20px 22px}
  .nav-link{display:none}
  .hero-wrap{
    min-height:auto;
    grid-template-columns:1fr;
    gap:36px;
    padding:32px 22px 62px;
  }
  .hero-copy{
    text-align:center;
    max-width:760px;
    margin:0 auto;
    padding-top:10px;
  }
  .hero-desc{margin-left:auto;margin-right:auto}
  .hero-actions,.flow,.trust-row{justify-content:center}
  .hero-copy h1{margin-left:auto;margin-right:auto}
  .hero-visual{
    width:min(100%,680px);
    margin:0 auto;
    min-height:560px;
  }
  .benefit-grid{grid-template-columns:1fr}
  .principle-card{grid-template-columns:1fr}
  .cta-card{display:grid}
}

@media(max-width:640px){
  .nav-wrap{padding:16px}
  .brand-mark{width:42px;height:42px;border-radius:13px}
  .brand-word{font-size:1rem}
  .nav-register{display:none}
  .btn{padding:10px 13px}
  .hero-wrap{padding:18px 16px 48px}
  .hero-copy h1{
    font-size:clamp(2.65rem,14vw,3.6rem);
    line-height:1.01;
  }
  .hero-desc{font-size:.96rem;line-height:1.72}
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .hero-actions .btn{width:100%}
  .flow{gap:5px}
  .flow span{padding:7px 8px;font-size:.6rem}
  .flow b{display:none}
  .trust-row{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    gap:8px;
  }
  .hero-visual{min-height:auto;padding:8px 0 20px}
  .visual-card{padding:12px;border-radius:22px}
  .visual-head{padding:4px 3px 10px}
  .visual-head strong{font-size:.84rem}
  .visual-bottom{grid-template-columns:1fr;gap:6px}
  .mini-card small{white-space:normal}
  .floating-note{display:none}
  .glow-one,.glow-two{display:none}
  .section-wrap{padding:58px 16px}
  .section-head{text-align:left}
  .principle-card{padding:23px 20px}
  .cta-section{padding:44px 0 55px}
  .cta-card{padding:26px 21px;border-radius:20px}
  .cta-actions{display:grid;grid-template-columns:1fr}
  .cta-actions .btn{width:100%}
  .footer-wrap{
    padding:21px 16px;
    display:grid;
    justify-items:start;
  }
}

@media(max-width:390px){
  .brand-word span{display:none}
  .nav-actions .btn-solid span{display:none}
  .nav-actions .btn-solid{width:42px;height:42px;padding:0}
}


/* Brand + real mentoring visual v1 */
.brand-logo-full{
  display:block;
  width:178px;
  max-height:64px;
  object-fit:contain;
  object-position:left center;
}
.visual-card-photo{padding:18px}
.mentor-photo{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:22px;
  border:1px solid #E0EBF2;
}
@media(max-width:640px){
  .brand-logo-full{width:145px;max-height:52px}
  .visual-card-photo{padding:11px}
  .mentor-photo{border-radius:17px}
}

/* Buku Panduan CTA v1.1 */
.btn-guide{
  background:#E8F6F1;
  color:#176B4F;
  border-color:#BDE4D4;
}
.btn-guide:hover{background:#DDF1E9}
.btn-guide-light{
  background:rgba(255,255,255,.14);
  color:#fff;
  border-color:rgba(255,255,255,.45);
}
.btn-guide-light:hover{background:rgba(255,255,255,.22)}