@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}

:root{
  --surface:#FBF7EE;--raised:#FFFFFF;--line:#E5DDCB;--ink:#1C1B22;--muted:#5D5968;
  --nila:#2B2A8C;--nila-soft:#E8E7F7;--on-nila:#FFFFFF;--kunyit:#F2B233;--kunyit-soft:#FCEFD0;--on-kunyit:#1C1B22;
  --r-sm:8px;--r-md:16px;--r-lg:28px;--r-full:9999px;
  --shadow:0 1px 2px #1c1b220d,0 8px 24px -8px #2b2a8c26;
  --gutter:clamp(16px,6vw,120px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(--surface);color:var(--ink);font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--nila)}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--kunyit);outline-offset:2px;border-radius:4px}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.accent{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:1.1em;color:var(--nila);letter-spacing:0}
.eyebrow{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;color:var(--nila);margin:0}
h1,h2,h3{margin:0}
h2{font-size:clamp(28px,3.2vw,36px);line-height:1.22;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h3{font-size:20px;line-height:28px;font-weight:700}
p{margin:0}
.muted{color:var(--muted)}
.head{display:flex;flex-direction:column;gap:12px;max-width:760px}
section{padding-top:clamp(64px,8vw,96px);padding-bottom:clamp(64px,8vw,96px)}
.band{background:var(--raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stack{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:var(--r-full);font-size:16px;font-weight:700;text-decoration:none;border:1px solid transparent}
.btn-primary{background:var(--kunyit);color:var(--on-kunyit)}
.btn-primary:hover{background:#E6A51F;color:var(--on-kunyit)}
.btn-ghost{background:var(--raised);border-color:var(--line);color:var(--ink);font-weight:600}
.btn-ghost:hover{border-color:var(--nila);color:var(--ink)}

/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.site-head .logo img{height:34px;width:auto;display:block}
.site-head nav{display:flex;gap:36px;font-size:15px;font-weight:500}
.site-head nav a{color:var(--ink);text-decoration:none}
.site-head nav a:hover{color:var(--nila)}
.site-head .btn{min-height:44px;padding:0 22px;font-size:15px}
@media (max-width:900px){.site-head nav{display:none}.site-head .logo img{height:28px}.site-head .btn{min-height:40px;padding:0 16px;font-size:14px}}

/* hero */
.hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero h1{font-size:clamp(38px,4.6vw,60px);line-height:1.08;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.hero .lead{max-width:520px;font-size:18px;line-height:30px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.trust{display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;color:var(--muted)}
.trust svg{flex-shrink:0}
.stage{position:relative;min-height:620px;border-radius:var(--r-lg);background:var(--nila)}
.stage .dot{position:absolute;left:40px;top:48px;width:12px;height:12px;border-radius:var(--r-full);background:var(--kunyit)}
.phone{position:absolute;top:40px;right:32px;width:320px;height:540px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.phone-top{display:flex;align-items:center;gap:10px;padding:16px;background:var(--raised);border-bottom:1px solid var(--line)}
.avatar{width:36px;height:36px;border-radius:var(--r-full);background:var(--nila-soft);color:var(--nila);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.phone-top b{display:block;font-size:14px;line-height:20px}
.phone-top small{display:block;font-size:12px;line-height:16px;color:var(--muted)}
.chat{flex-grow:1;display:flex;flex-direction:column;gap:8px;padding:16px 12px}
.day{align-self:center;font-size:11px;line-height:16px;color:var(--muted);padding:2px 10px;border-radius:var(--r-full);background:var(--raised);border:1px solid var(--line)}
.msg{max-width:240px;padding:10px 12px;font-size:13px;line-height:19px}
.msg time{display:block;margin-top:4px;font-size:10px;line-height:12px;text-align:right}
.in{align-self:flex-start;border-radius:16px 16px 16px 4px;background:var(--raised);border:1px solid var(--line)}
.in time{color:var(--muted)}
.out{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--nila);color:var(--on-nila)}
.out time{color:var(--nila-soft)}
.order{position:absolute;left:24px;bottom:48px;width:184px;padding:16px;border-radius:var(--r-md);background:var(--raised);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.order-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.order-top span:first-child{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.pill{font-size:12px;line-height:18px;font-weight:700;padding:3px 10px;border-radius:var(--r-full);background:var(--kunyit-soft);color:var(--ink);white-space:nowrap}
.order strong{font-size:20px;line-height:28px;font-weight:800}
.order p{font-size:13px;line-height:19px;color:var(--muted)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:40px}}
@media (max-width:1280px){
  .stage{min-height:0;padding:28px 16px 24px;display:flex;flex-direction:column;align-items:center;gap:16px}
  .stage .dot{left:24px;top:24px}
  .phone{position:relative;top:auto;right:auto;width:100%;max-width:320px;height:auto}
  .order{position:relative;left:auto;bottom:auto;width:100%;max-width:320px}
}
@media (max-width:900px){.actions .btn{flex:1 1 100%}}

/* grids */
.grid{display:grid;gap:24px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{padding:28px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:10px}
.band .card{background:var(--surface)}
.fitur{background:var(--nila-soft)}
.fitur .card{background:var(--raised);gap:12px}
.step{display:flex;flex-direction:column;gap:12px}
.num{width:44px;height:44px;border-radius:var(--r-full);background:var(--nila);color:var(--on-nila);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}
.num.last{background:var(--kunyit);color:var(--on-kunyit)}

/* guardrails */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.nots{display:flex;flex-direction:column;gap:12px}
.not{display:flex;gap:14px;align-items:flex-start;padding:20px 24px;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--line)}
.not svg{flex-shrink:0;margin-top:2px}

/* pricing */
.plan{padding:36px;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:20px}
.plan-free{background:var(--nila);color:var(--on-nila)}
.plan-free p,.plan-free .unit{color:var(--nila-soft)}
.plan-sub{background:var(--surface);border:1px solid var(--line)}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan-top b{font-size:20px;line-height:28px}
.tag-kunyit{font-size:12px;line-height:18px;font-weight:700;padding:4px 12px;border-radius:var(--r-full);background:var(--kunyit);color:var(--on-kunyit)}
.price{font-size:clamp(36px,4vw,44px);line-height:1.1;font-weight:800}
.unit{font-size:16px;font-weight:500;color:var(--muted)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:22px}
.plan .btn{align-self:flex-start}
@media (max-width:720px){.plan{padding:26px}.plan .btn{align-self:stretch}}

/* faq */
.faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px}
.faq-list{grid-column:span 2}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:24px}.faq-list{grid-column:auto}}
.faq details{padding:22px 0;border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-size:18px;line-height:26px;font-weight:700;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--nila);font-weight:600}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:8px;color:var(--muted)}

/* cta */
.cta-wrap{padding-bottom:clamp(64px,8vw,96px)}
.cta{padding:clamp(40px,6vw,72px) clamp(24px,6vw,80px);border-radius:var(--r-lg);background:var(--nila);color:var(--on-nila);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta h2{font-size:clamp(36px,4vw,48px);line-height:1.12;font-weight:800;letter-spacing:-.02em}
.cta .accent{color:var(--kunyit)}
.cta p{font-size:18px;line-height:28px;color:var(--nila-soft);max-width:560px;margin-top:14px}
.cta-side{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.cta-side small{font-size:14px;color:var(--nila-soft)}
@media (max-width:720px){.cta-side{align-items:stretch;width:100%}.cta-side small{text-align:center}}

/* footer */
.site-foot{padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.site-foot img{height:30px;width:auto;display:block}
.site-foot address{font-style:normal;font-size:14px;line-height:22px;color:var(--muted);margin-top:14px}
.foot-links{display:flex;gap:28px;flex-wrap:wrap;font-size:14px;font-weight:500}
.foot-links a{color:var(--ink)}

/* legal page */
.legal{max-width:760px;padding-top:56px;padding-bottom:96px}
.legal h1{font-size:clamp(34px,4vw,48px);line-height:1.12;font-weight:800;letter-spacing:-.02em}
.legal .updated{margin-top:12px;color:var(--muted);font-size:14px}
.legal h2{font-size:24px;line-height:32px;margin-top:44px;margin-bottom:12px}
.legal p,.legal li{color:#35333F}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin:12px 0 0}
.legal li+li{margin-top:6px}
.legal .box{margin-top:28px;padding:20px 24px;border-radius:var(--r-md);background:var(--nila-soft)}