:root{
    --pink:#ED2F72;
    --pink-deep:#D41F60;
    --pink-tint:#FDE9F1;
    --pink-soft:#F8DDE9;
    --ink:#3F4044;
    --ink-soft:#6E7075;
    --grey-line:rgba(63,64,68,0.12);
    --bg:#FFFFFF;
    --bg-alt:#FBF8F9;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth;background:#fff;color-scheme:light;}
  body{
    margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
    font-family:'Poppins',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.01em;line-height:1.15;}
  a{color:inherit;}
  .wrap{max-width:1140px;margin:0 auto;padding:0 20px;}

  /* ---------- Header ---------- */
  header{
    padding:14px 0;border-bottom:1px solid var(--grey-line);
    position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);z-index:50;
  }
  .navrow{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .brand{display:flex;align-items:center;gap:11px;}
  .brand svg{width:42px;height:42px;flex-shrink:0;}
  .brand .txt{line-height:1.1;}
  .brand .n1{font-weight:700;font-size:1.02rem;letter-spacing:.02em;}
  .brand .n1 span{color:var(--pink);}
  .brand .n2{font-size:0.6rem;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;}
  nav.links{display:flex;gap:26px;font-size:0.9rem;font-weight:500;}
  nav.links a{text-decoration:none;opacity:.78;}
  nav.links a:hover{opacity:1;color:var(--pink);}
  .navright{display:flex;align-items:center;gap:10px;}
  .langtoggle{display:flex;background:var(--bg-alt);border-radius:100px;padding:3px;font-size:0.76rem;}
  .langtoggle button{border:none;background:none;padding:6px 12px;border-radius:100px;font-family:inherit;font-weight:600;cursor:pointer;color:var(--ink);opacity:.5;}
  .langtoggle button.active{background:#fff;opacity:1;box-shadow:0 1px 3px rgba(237,47,114,.2);}
  .btn-primary{
    background:var(--pink);color:#fff;border:none;border-radius:100px;padding:12px 24px;
    font-family:inherit;font-weight:700;font-size:0.9rem;cursor:pointer;white-space:nowrap;
    transition:background .15s,transform .15s;
  }
  .btn-primary:hover{background:var(--pink-deep);transform:translateY(-1px);}
  .btn-outline{
    background:none;border:2px solid var(--pink);color:var(--pink);border-radius:100px;
    padding:10px 22px;font-family:inherit;font-weight:700;font-size:0.9rem;cursor:pointer;
  }
  .hamburger{display:none;background:var(--bg-alt);border:none;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;cursor:pointer;}
  .hamburger svg{width:19px;height:19px;}
  .mobile-menu{display:none;flex-direction:column;padding:12px 0 6px;border-top:1px solid var(--grey-line);margin-top:12px;}
  .mobile-menu a{padding:12px 4px;text-decoration:none;font-weight:600;border-bottom:1px solid var(--grey-line);}
  .mobile-menu.open{display:flex;}
  .mobile-menu .mm-lang{display:flex;gap:8px;margin-top:12px;}
  .mobile-menu .mm-lang button{flex:1;border:1px solid var(--grey-line);background:#fff;border-radius:10px;padding:10px;font-family:inherit;font-weight:600;}
  .mobile-menu .mm-lang button.active{background:var(--pink);color:#fff;border-color:var(--pink);}
  .mobile-menu .btn-primary{margin-top:10px;width:100%;}

  /* ---------- Hero ---------- */
  .hero{padding:58px 0 48px;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;background:var(--pink-tint);color:var(--pink-deep);
    border-radius:100px;padding:7px 16px;font-size:0.78rem;font-weight:700;letter-spacing:.02em;margin-bottom:20px;
  }
  .hero h1{font-size:clamp(2rem,4.3vw,3.15rem);}
  .hero h1 em{font-style:normal;color:var(--pink);}
  .hero p.lede{font-size:1.06rem;max-width:48ch;margin-top:18px;color:var(--ink-soft);}
  .hero-cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap;}
  .hero-visual{background:var(--pink-tint);border-radius:24px;padding:32px 28px;text-align:center;}
  .hero-visual svg.logo{width:132px;height:auto;margin-bottom:6px;}
  .hero-visual .tagline{font-weight:700;font-size:1.02rem;margin-top:10px;}
  .hero-visual .tagline span{color:var(--pink);}
  .hero-visual .sub{font-size:0.82rem;color:var(--ink-soft);margin-top:6px;}

  /* ---------- CARE strip ---------- */
  .care-strip{background:var(--bg-alt);padding:54px 0;}
  .care-head{text-align:center;margin-bottom:34px;}
  .care-head h2{font-size:1.75rem;}
  .care-head p{color:var(--ink-soft);margin:10px auto 0;max-width:56ch;font-size:0.96rem;}
  .care-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .care-card{background:#fff;border-radius:18px;padding:24px 20px;border:1px solid var(--grey-line);}
  .care-card .letter{
    width:44px;height:44px;border-radius:13px;background:var(--pink);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;margin-bottom:14px;
  }
  .care-card h3{font-size:0.95rem;font-weight:700;margin-bottom:7px;letter-spacing:.01em;}
  .care-card p{font-size:0.87rem;color:var(--ink-soft);margin:0;}

  /* ---------- Teras ---------- */
  .section{padding:60px 0;}
  .section-head{text-align:center;margin-bottom:38px;}
  .section-head h2{font-size:1.75rem;}
  .section-head p{color:var(--ink-soft);margin:10px auto 0;max-width:56ch;font-size:0.96rem;}
  .teras-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
  .teras{background:var(--pink-soft);border-radius:18px;padding:24px 18px;text-align:center;position:relative;}
  .teras .num{
    position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:0.76rem;font-weight:700;
  }
  .teras .ic{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin:14px auto 12px;}
  .teras .ic svg{width:21px;height:21px;stroke:var(--pink);}
  .teras h3{font-size:0.82rem;font-weight:800;letter-spacing:.02em;margin-bottom:5px;}
  .teras p{font-size:0.86rem;color:var(--ink-soft);margin:0;}

  /* ---------- Kategori aduan ---------- */
  .kategori{background:var(--bg-alt);padding:60px 0;}
  .catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  .cat{background:#fff;border-radius:14px;padding:18px 16px;border:1px solid var(--grey-line);display:flex;align-items:center;gap:12px;font-weight:600;font-size:0.9rem;}
  .cat svg{width:19px;height:19px;stroke:var(--pink);flex-shrink:0;}

  /* ---------- Aliran ---------- */
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px;}
  .flow-step{background:#fff;border:1px solid var(--grey-line);border-left:4px solid var(--pink);border-radius:12px;padding:20px 18px;}
  .flow-step .s{font-size:0.72rem;font-weight:700;color:var(--pink);letter-spacing:.08em;margin-bottom:7px;}
  .flow-step h3{font-size:0.95rem;font-weight:700;margin-bottom:6px;}
  .flow-step p{font-size:0.85rem;color:var(--ink-soft);margin:0;}

  /* ---------- CTA band ---------- */
  .ctaband{background:var(--pink);color:#fff;padding:52px 0;text-align:center;}
  .ctaband h2{font-size:1.7rem;}
  .ctaband p{max-width:52ch;margin:12px auto 26px;opacity:.92;font-size:0.98rem;}
  .ctaband .btn-white{background:#fff;color:var(--pink);border:none;border-radius:100px;padding:14px 30px;font-family:inherit;font-weight:700;font-size:0.95rem;cursor:pointer;}

  footer{padding:34px 0 44px;font-size:0.85rem;color:var(--ink-soft);}
  footer .foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;}

  /* ---------- Chat widget ---------- */
  #bella-toggle{
    position:fixed;bottom:22px;right:22px;width:60px;height:60px;border-radius:50%;
    background:var(--pink);border:none;cursor:pointer;box-shadow:0 10px 26px rgba(237,47,114,.42);
    display:flex;align-items:center;justify-content:center;z-index:60;transition:transform .15s;
  }
  #bella-toggle:hover{transform:translateY(-2px) scale(1.03);}
  #bella-toggle svg{width:27px;height:27px;}

  #bella-panel{
    position:fixed;bottom:96px;right:22px;width:384px;max-width:calc(100vw - 28px);height:min(560px,calc(100vh - 130px));
    background:#fff;border-radius:22px;box-shadow:0 24px 64px rgba(63,64,68,.24);
    display:flex;flex-direction:column;overflow:hidden;z-index:59;
    opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:opacity .22s,transform .22s;
  }
  #bella-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  .bella-head{background:var(--pink);color:#fff;padding:15px 18px;display:flex;align-items:center;gap:11px;}
  .bella-head .avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .bella-head .avatar svg{width:21px;height:21px;}
  .bella-head .who{font-weight:700;font-size:1rem;}
  .bella-head .status{font-size:0.74rem;opacity:.9;display:flex;align-items:center;gap:5px;}
  .bella-head .status .dotg{width:6px;height:6px;border-radius:50%;background:#7CFFB2;}
  .bella-head .mini-lang{margin-left:auto;display:flex;gap:4px;font-size:0.7rem;}
  .bella-head .mini-lang button{background:rgba(255,255,255,.18);border:none;color:#fff;border-radius:100px;padding:4px 9px;cursor:pointer;font-family:inherit;font-weight:600;opacity:.65;}
  .bella-head .mini-lang button.active{opacity:1;background:rgba(255,255,255,.34);}
  .bella-close{background:none;border:none;color:#fff;opacity:.85;cursor:pointer;padding:4px;display:flex;}
  .bella-close svg{width:16px;height:16px;}
  .bella-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;background:var(--bg-alt);}
  .msg{max-width:84%;font-size:0.87rem;padding:10px 13px;border-radius:14px;line-height:1.45;opacity:0;transform:translateY(6px);animation:rise .35s ease forwards;}
  @keyframes rise{to{opacity:1;transform:translateY(0);}}
  .msg.bella{background:#fff;align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--grey-line);}
  .msg.user{background:var(--pink);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
  .msg .typing{display:inline-flex;gap:3px;padding:2px 0;}
  .msg .typing span{width:5px;height:5px;border-radius:50%;background:var(--pink);animation:blink 1.2s infinite ease-in-out;}
  .msg .typing span:nth-child(2){animation-delay:.15s;}
  .msg .typing span:nth-child(3){animation-delay:.3s;}
  @keyframes blink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}
  .summary-card{background:var(--pink-tint);border-radius:12px;padding:12px 14px;font-size:0.82rem;margin-top:8px;}
  .summary-card .ref{font-weight:800;font-size:0.92rem;margin-bottom:5px;}
  .summary-card .tag{display:inline-block;border-radius:100px;padding:3px 11px;font-size:0.73rem;font-weight:700;margin-top:6px;background:var(--pink);color:#fff;}
  .bella-input{border-top:1px solid var(--grey-line);padding:12px 14px;display:flex;gap:8px;align-items:center;background:#fff;padding-bottom:max(12px,env(safe-area-inset-bottom));}
  .bella-input input{flex:1;border:1px solid var(--grey-line);background:var(--bg-alt);border-radius:100px;padding:11px 15px;font-family:inherit;font-size:16px;outline:none;}
  .bella-input input:focus{outline:2px solid var(--pink);outline-offset:1px;}
  .icon-btn{background:none;border:none;cursor:pointer;padding:6px;display:flex;color:var(--pink);opacity:.8;}
  .icon-btn svg{width:19px;height:19px;}
  .send-btn{background:var(--pink);border:none;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
  .send-btn svg{width:15px;height:15px;stroke:#fff;}

  @media(max-width:980px){
    .care-grid{grid-template-columns:repeat(2,1fr);}
    .teras-grid{grid-template-columns:repeat(2,1fr);gap:22px;}
    .catgrid{grid-template-columns:repeat(2,1fr);}
    .flow{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:820px){
    .hero{grid-template-columns:1fr;padding-top:36px;gap:30px;}
    nav.links{display:none;}
    .hamburger{display:flex;}
    .navright .langtoggle,.navright>.btn-primary{display:none;}
    .section,.care-strip,.kategori{padding:44px 0;}
    .hero-cta{flex-direction:column;align-items:stretch;}
    #bella-panel{right:14px;bottom:88px;width:calc(100vw - 28px);height:min(64vh,calc(100vh - 120px));}
    #bella-toggle{right:16px;bottom:16px;}
  }
  @media(max-width:480px){
    .care-grid,.teras-grid,.catgrid,.flow{grid-template-columns:1fr;}
    .teras-grid{gap:24px;}
    .hero h1{font-size:1.85rem;}
  }

/* ---------- Chip pilihan kategori dalam chat ---------- */
.lc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.lc-chip{
  background:#fff;border:1px solid var(--pink);color:var(--pink);
  border-radius:100px;padding:6px 13px;font-family:inherit;font-size:0.79rem;
  font-weight:600;cursor:pointer;transition:background .15s,color .15s;
}
.lc-chip:hover{background:var(--pink);color:#fff;}

/* ---------- Lampiran gambar dalam chat ---------- */
.lc-thumb{max-width:150px;border-radius:10px;display:block;margin-bottom:6px;}
.lc-uploading{opacity:.8;font-style:italic;}