:root{
  --bg:#F3F5F9; --ink:#101828; --muted:#566074; --brand:#3B3BF5; --brand-soft:#E1E5FF;
  --amber:#FFB547; --card:#FFFFFF; --line:#D9DEE8;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0E1220; --ink:#EEF1F8; --muted:#A3ACBF; --brand:#7C86FF; --brand-soft:#1D2347; --card:#161B30; --line:#2A3152;}
}
*{box-sizing:border-box;margin:0}
img,svg{max-width:100%;height:auto}
body{overflow-x:hidden;-webkit-text-size-adjust:100%}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 "Instrument Sans",system-ui,sans-serif}
h1,h2,h3,.logo{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;letter-spacing:-.02em;line-height:1.1}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.nav{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1.1rem clamp(1rem,5vw,4rem);gap:1rem}
.nav nav{display:flex;align-items:center;gap:1.5rem}
.nav nav a:not(.btn){text-decoration:none;color:var(--muted);font-weight:500}
.nav nav a:not(.btn):hover{color:var(--ink)}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.35rem;text-decoration:none}

.btn{display:inline-block;background:var(--brand);color:#fff;border:0;font:600 1rem "Instrument Sans",sans-serif;padding:.85rem 1.4rem;border-radius:10px;text-decoration:none;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-small{padding:.55rem 1rem;font-size:.95rem}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px}

section{padding:clamp(3rem,8vw,6rem) clamp(1rem,5vw,4rem);max-width:1200px;margin-inline:auto}
h2{font-size:clamp(1.9rem,4vw,2.9rem);max-width:20ch;margin-bottom:2.2rem}

.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-top:clamp(2rem,5vw,4rem)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.4rem);font-weight:700;margin-bottom:1.3rem}
.lead{font-size:1.2rem;color:var(--muted);max-width:46ch;margin-bottom:2rem}
.cta-row{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.note{margin-top:1rem;font-size:.92rem;color:var(--muted)}

.demo{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 20px 50px -25px rgba(59,59,245,.35)}
.demo-bar{padding:.8rem 1.1rem;border-bottom:1px solid var(--line);font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:.6rem}
.dot{width:9px;height:9px;border-radius:50%;background:#2BB673}
.chat{padding:1.2rem;display:flex;flex-direction:column;gap:.9rem;min-height:21rem}
.msg{max-width:88%;padding:.75rem 1rem;border-radius:14px;font-size:.98rem;line-height:1.5;display:none}
.msg.show{display:block}
.msg .who{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.15rem}
.msg.in{background:var(--bg);align-self:flex-start;border-bottom-left-radius:4px}
.msg.out{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.out .who{color:rgba(255,255,255,.75)}
.msg.sys{background:var(--brand-soft);align-self:stretch;max-width:100%;font-size:.9rem}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;border-block:1px solid var(--line);padding-block:2.2rem}
.stats strong{display:block;font:700 2.2rem "Bricolage Grotesque",sans-serif;color:var(--brand)}
.stats span{color:var(--muted);font-size:.98rem}

.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.f{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.8rem}
.f-wide{grid-column:1/-1;background:var(--brand);color:#fff;border-color:var(--brand)}
.f-wide p{color:rgba(255,255,255,.88);max-width:60ch}
.f h3{font-size:1.5rem;margin-bottom:.6rem}
.f p{color:var(--muted)}

.steps ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--ink);padding-top:1rem}
.steps li::before{content:counter(s);font:700 1rem "Bricolage Grotesque",sans-serif;color:var(--brand)}
.steps h3{font-size:1.5rem;margin:.2rem 0 .5rem}
.steps p{color:var(--muted)}

.faq{max-width:760px}
details{border-bottom:1px solid var(--line);padding:1.1rem 0}
summary{cursor:pointer;font-weight:600;font-size:1.1rem}
details p{margin-top:.6rem;color:var(--muted)}

.signup{background:var(--brand-soft);border-radius:24px;margin-block:2rem;text-align:left;max-width:1100px}
.signup p{max-width:52ch;color:var(--muted);margin-bottom:1.5rem}
form{display:flex;gap:.75rem;flex-wrap:wrap}
input{flex:1 1 260px;padding:.85rem 1rem;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit}
#status{margin:.9rem 0 0;font-weight:600;color:var(--ink)}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:2rem clamp(1rem,5vw,4rem);color:var(--muted);font-size:.95rem;border-top:1px solid var(--line)}


.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--card);border-radius:10px;cursor:pointer;position:relative}
.menu-toggle span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,top .2s}
.menu-toggle span:first-child{top:16px}
.menu-toggle span:last-child{top:25px}
.menu-toggle[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg)}
.msg p{overflow-wrap:anywhere}

/* Layar lebar */
@media(min-width:1500px){section{max-width:1320px}}

/* Tablet landscape */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr 1fr;gap:2rem}
  .steps ol{gap:1.25rem}
}

/* Tablet portrait dan ponsel */
@media(max-width:820px){
  .nav{padding-top:max(1rem,env(safe-area-inset-top));padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
  .menu-toggle{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:1rem;right:1rem;flex-direction:column;align-items:stretch;gap:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.5rem;box-shadow:0 18px 40px -20px rgba(16,24,40,.4)}
  .nav nav.open{display:flex}
  .nav nav a:not(.btn){display:block;padding:.9rem 1rem;border-radius:8px;font-size:1.05rem}
  .nav nav .btn{text-align:center;margin-top:.4rem;padding:.9rem 1rem}
  .hero{grid-template-columns:1fr}
  .lead{max-width:none}
  .demo{max-width:560px;width:100%}
  .chat{min-height:0}
  .stats{grid-template-columns:1fr;gap:1.25rem}
  .stats>div{display:flex;align-items:baseline;gap:1rem}
  .stats strong{min-width:6.5rem}
  .feature-grid,.steps ol{grid-template-columns:1fr}
  h2{max-width:none}
  .signup{border-radius:18px;margin-inline:1rem}
}

/* Ponsel kecil */
@media(max-width:560px){
  body{font-size:1rem}
  section{padding-inline:max(1rem,env(safe-area-inset-left))}
  .cta-row{flex-direction:column;align-items:stretch;gap:1rem;text-align:center}
  .cta-row .btn{padding:1rem}
  .btn,summary,input{min-height:48px}
  .chat{padding:.9rem}
  .msg{max-width:94%;font-size:.94rem}
  .stats>div{flex-direction:column;gap:0}
  .f{padding:1.3rem}
  .signup{margin-inline:.75rem;padding-inline:1.25rem}
  form{flex-direction:column}
  form .btn{width:100%}
  footer{flex-direction:column;padding-bottom:max(2rem,env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.menu-toggle span{transition:none}}