:root {
    --primary:#17134F; --primary-dark:#0F0C33;
    --ember:#CC461B; --azure:#1B97CC; --teal:#118E87; --magenta:#D64683; --pink:#C62E75; --pink-dark:#A82763;
    --ink:#1E1E1E; --slate:#353535; --muted:#777777; --muted-2:#777771; --caption:#A6A4B5;
    --line:#E5E7EB; --border:#ECEAF2; --canvas:#F4F3F7; --surface:#FFFFFF;
    --lav:#EEF0FB; --lav-2:#E7EAFA;
    --shadow:0 8px 30px rgba(23,19,79,.10); --shadow-lg:0 30px 60px -28px rgba(23,19,79,.45);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);background:var(--surface);line-height:1.55;-webkit-font-smoothing:antialiased;}
  ::selection{background:var(--pink);color:#fff;}
  a{color:inherit;text-decoration:none;}
  a:not(.btn):not(.logo):hover{color:var(--pink);text-decoration:underline;text-underline-offset:3px;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
  h1,h2,h3,.disp{font-family:'Plus Jakarta Sans',sans-serif;}
  .mono{font-family:'JetBrains Mono',monospace;}

  .btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-family:Inter,sans-serif;font-weight:700;font-size:15px;line-height:1;border-radius:12px;padding:14px 26px;cursor:pointer;border:none;transition:background .15s,transform .08s,box-shadow .15s;}
  .btn:active{transform:scale(.985);}
  .btn-sm{font-size:14px;padding:11px 18px;border-radius:10px;}
  .btn-pink{background:var(--pink);color:#fff;box-shadow:0 12px 26px -12px rgba(198,46,117,.6);}
  .btn-pink:hover{background:var(--pink-dark);}
  .btn-pink-out{background:#fff;color:var(--pink);border:1.5px solid var(--pink);}
  .btn-pink-out:hover{background:#fff5f9;}
  .btn-dark{background:var(--ink);color:#fff;}
  .btn-dark:hover{background:#000;}
  .btn-out{background:#fff;color:var(--ink);border:1px solid var(--border);}
  .btn-out:hover{border-color:var(--muted);}
  .nav-auth{display:flex;align-items:center;gap:10px;}
  .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
  .btn-cta-out{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);}
  .btn-cta-out:hover{background:rgba(255,255,255,.14);}

  .logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:var(--primary);}
  .logo svg{width:28px;height:28px;} .logo .name{font-size:21px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;}
  .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);}

  /* NAV */
  header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
  .nav-links{display:flex;align-items:center;gap:30px;}
  .nav-links a{font-size:14.5px;color:var(--muted-2);font-weight:500;}
  .nav-links a:hover{color:var(--ink);}
  @media(max-width:860px){.nav-links{display:none;}}

  /* HERO */
  .hero{position:relative;padding:76px 0 64px;overflow:hidden;}
  .hero::before{content:"";position:absolute;inset:-15% -8% -20% -8%;z-index:0;pointer-events:none;
    background:
      radial-gradient(46% 42% at 88% 18%,rgba(198,46,117,.20),transparent 64%),
      radial-gradient(40% 44% at 4% 90%,rgba(23,19,79,.10),transparent 68%);}
  .hero-grid{position:relative;z-index:1;}
  .hero .eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(198,46,117,.10);
    padding:8px 15px;border-radius:999px;}
  .hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);flex:none;}
  .hero-feats{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:30px;list-style:none;padding:0;}
  .hero-feats li{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--slate);}
  .hero-feats li::before{content:"\2713";display:grid;place-items:center;width:20px;height:20px;flex:none;
    border-radius:50%;background:rgba(198,46,117,.12);color:var(--pink);font-size:11px;font-weight:800;}
  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
  .hero h1{font-weight:800;font-size:60px;line-height:1.02;letter-spacing:-.03em;color:var(--primary);margin:16px 0 20px;}
  .hero p.lead{font-size:18px;color:var(--muted-2);max-width:440px;margin-bottom:30px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
  .rotate{color:var(--pink);display:inline-block;transition:opacity .32s ease,transform .32s ease;will-change:opacity,transform;}
  .rotate.out{opacity:0;transform:translateY(-14px);}
  .hero-illu{display:flex;justify-content:center;}
  .hero-illu img{width:100%;max-width:520px;height:auto;display:block;}
  /* hero two-phone composition */
  .hero-phones{position:relative;width:100%;max-width:440px;height:590px;}
  .hero-phones .phone{position:absolute;margin:0;}
  .hero-phones .phone-front{left:158px;top:30px;z-index:2;box-shadow:0 44px 80px -28px rgba(23,19,79,.55);}
  .hero-phones .phone-back{left:-2px;top:18px;transform:rotate(-9deg);z-index:1;opacity:.98;box-shadow:0 40px 70px -30px rgba(23,19,79,.5);}
  .ph-nav{display:flex;justify-content:space-around;align-items:center;padding:12px 0 16px;border-top:1px solid var(--border);background:#fff;}
  .ph-nav i{width:20px;height:20px;border-radius:6px;background:var(--border);display:block;} .ph-nav i.on{background:var(--primary);}
  .ph-list-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:11px 12px;margin-bottom:10px;}
  .ph-list-item .ava{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;flex:none;font-family:'Plus Jakarta Sans',sans-serif;}
  .ph-list-item b{display:block;font-size:13px;color:var(--ink);font-weight:700;} .ph-list-item span{font-size:11px;color:var(--muted);}
  .ph-sec{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:8px;}
  .ph-ev{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:9px;}
  .ph-ev .d{flex:none;width:36px;height:36px;border-radius:9px;color:#fff;display:grid;place-items:center;line-height:1;}
  .ph-ev .d b{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;} .ph-ev .d span{font-size:8px;font-weight:600;}
  .ph-ev .x b{display:block;font-size:12px;color:var(--ink);font-weight:700;} .ph-ev .x span{font-size:10px;color:var(--muted);}
  @media(max-width:900px){.hero-phones{margin:0 auto;height:500px;}}
  @media(max-width:420px){
    .hero-phones{transform:scale(.82);transform-origin:top center;height:440px;}
  }

  /* generic section */
  section.pad{padding:74px 0;}
  .sec-eye{margin-bottom:12px;}
  .sec-head-c{text-align:center;max-width:640px;margin:0 auto 44px;}
  h2.title{font-weight:800;font-size:38px;line-height:1.12;letter-spacing:-.03em;color:var(--ink);}
  p.sub{font-size:16px;color:var(--muted-2);line-height:1.6;}

  /* PENGATURAN TAGIHAN */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
  .split h2{margin-bottom:14px;}
  .split .sub{margin-bottom:0;max-width:420px;}
  .mini-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
  .mini{background:var(--lav);border:1px solid var(--lav-2);border-radius:14px;padding:18px 15px;}
  .mini .mi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px;color:#fff;}
  .mini .mi svg{width:18px;height:18px;}
  .mini b{display:block;font-size:14px;color:var(--ink);font-weight:700;margin-bottom:4px;}
  .mini span{font-size:12px;color:var(--muted-2);line-height:1.45;}

  /* info cards (members list / report) */
  .info-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow);}
  .ic-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
  .ic-head b{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;color:var(--primary);}
  .ic-head small{font-size:12px;color:var(--muted);}
  .badge{font-size:10.5px;font-weight:700;border-radius:999px;padding:5px 11px;white-space:nowrap;}
  .badge.paid{color:var(--teal);background:rgba(17,142,135,.12);}
  .badge.due{color:var(--ember);background:rgba(204,70,27,.12);}
  .badge.inv{color:var(--secondary);background:var(--lav);}
  .chart{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:14px;}
  .chart .bar{flex:1;background:var(--lav-2);border-radius:6px 6px 0 0;}
  .chart .bar.hi{background:var(--primary);}
  .big-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:32px;font-weight:800;color:var(--primary);letter-spacing:-.02em;line-height:1;}
  .chip-up{font-size:11px;font-weight:700;color:var(--teal);background:rgba(17,142,135,.12);border-radius:999px;padding:5px 11px;}
  .ic-foot{display:flex;justify-content:space-between;font-size:10.5px;color:var(--caption);font-family:'JetBrains Mono',monospace;margin-top:10px;}
  .astats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 6px;}
  .astat{background:var(--lav);border:1px solid var(--lav-2);border-radius:12px;padding:13px 12px;}
  .astat b{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;color:var(--primary);display:block;line-height:1;letter-spacing:-.02em;}
  .astat span{font-size:10.5px;color:var(--muted);}
  .center-visual{max-width:520px;margin:0 auto;}
  .quotes{display:grid;gap:16px;margin-top:26px;}
  .quote{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow);}
  .quote p{font-size:15px;color:var(--slate);line-height:1.6;margin-bottom:16px;}
  .quote .who2{display:flex;align-items:center;gap:12px;}
  .quote .av2{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;flex:none;}
  .quote .who2 b{display:block;font-size:14px;color:var(--ink);font-weight:700;} .quote .who2 span{font-size:12.5px;color:var(--muted);}

  /* KELOLA DENGAN */
  .showcase{background:var(--canvas);border:1px solid var(--border);border-radius:22px;padding:30px;position:relative;}
  .show-stage{border-radius:16px;overflow:hidden;min-height:300px;display:flex;align-items:stretch;}
  .show-panel{display:none;width:100%;}
  .show-panel.on{display:block;}
  .tabs{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap;}
  .tab{background:#fff;border:1px solid var(--border);border-radius:12px;padding:11px 20px;font-size:14px;font-weight:600;color:var(--muted-2);cursor:pointer;transition:all .15s;}
  .tab.on{background:var(--primary);color:#fff;border-color:var(--primary);}

  /* browser mock */
  .mock{background:#100c30;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);width:100%;}
  .mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0b0824;}
  .mock-bar i{width:10px;height:10px;border-radius:50%;display:block;}
  .mock-url{margin-left:12px;font-size:11px;color:#8a88ad;background:rgba(255,255,255,.07);padding:4px 12px;border-radius:6px;}
  .mock-body{background:var(--canvas);padding:20px;}
  .mock-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
  .mock-h b{font-size:17px;color:var(--primary);font-family:'Plus Jakarta Sans',sans-serif;}
  .mock-h small{font-size:11px;color:var(--muted);}
  .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
  .metric{background:#fff;border:1px solid var(--border);border-radius:10px;padding:13px;}
  .metric .ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:13px;margin-bottom:9px;}
  .metric .val{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;color:var(--primary);}
  .metric .lbl{font-size:10.5px;color:var(--muted);}
  .panel{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
  .panel .head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--border);}
  .panel .head b{font-size:13px;color:var(--primary);} .panel .head small{font-size:11px;color:var(--muted);}
  .rw{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
  .rw:last-child{border-bottom:none;padding-bottom:0;}
  .who{display:flex;align-items:center;gap:10px;}
  .av{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;flex:none;}
  .who small{display:block;font-size:12px;font-weight:700;color:var(--ink);} .who em{font-style:normal;font-size:10.5px;color:var(--pink);}
  .pillt{font-size:11px;font-weight:700;color:var(--primary);border:1px solid var(--border);border-radius:999px;padding:6px 13px;}

  /* phone (member app) */
  .phone{width:250px;background:#0f0c30;border-radius:34px;padding:11px;box-shadow:var(--shadow-lg);position:relative;margin:0 auto;}
  .phone .notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:20px;background:#0f0c30;border-radius:0 0 13px 13px;z-index:3;}
  .phone .screen{background:var(--canvas);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;min-height:492px;}
  .phone .ph-body{flex:1;}
  .ph-status{display:flex;justify-content:space-between;padding:13px 18px 6px;font-size:10.5px;font-weight:600;color:var(--ink);}
  .ph-body{padding:2px 14px 16px;}
  .ph-hi{font-size:10.5px;color:var(--muted);} .ph-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;color:var(--ink);margin-bottom:12px;}
  .ph-card{background:linear-gradient(140deg,#241f66,#17134F);border-radius:14px;padding:15px;color:#fff;position:relative;margin-bottom:12px;}
  .ph-card .st{position:absolute;top:13px;right:13px;font-size:8.5px;font-weight:700;background:rgba(17,142,135,.28);color:#5fe0d6;padding:3px 8px;border-radius:999px;}
  .ph-card .cl{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#cfceea;margin-bottom:16px;}
  .ph-card .cl .b{width:18px;height:18px;border-radius:6px;background:var(--ember);display:grid;place-items:center;font-size:8px;font-weight:700;}
  .ph-card .rl{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#9c9ac4;}
  .ph-card .nm{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;margin-bottom:12px;}
  .ph-card .mt{display:flex;justify-content:space-between;font-size:8.5px;color:#9c9ac4;} .ph-card .mt b{display:block;color:#fff;font-size:11px;font-weight:600;margin-top:1px;}
  .ph-dues{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--border);border-radius:12px;padding:11px 13px;}
  .ph-dues .a{font-size:9px;color:var(--muted);} .ph-dues .a b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--primary);font-weight:700;}
  .ph-dues .pb{background:var(--primary);color:#fff;font-size:10px;font-weight:700;padding:7px 12px;border-radius:8px;}
  .show-phone{background:#efeef6;display:flex;align-items:center;justify-content:center;padding:26px 0;}

  /* public page card */
  .pubcard{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
  .pub-cover{height:120px;background:linear-gradient(135deg,var(--primary),var(--magenta));position:relative;}
  .pub-logo{position:absolute;left:24px;bottom:-24px;width:56px;height:56px;border-radius:16px;background:var(--ember);border:3px solid #fff;display:grid;place-items:center;color:#fff;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;}
  .pub-b{padding:34px 24px 22px;}
  .pub-b h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;color:var(--ink);}
  .pub-b .meta{font-size:12.5px;color:var(--muted);margin:2px 0 12px;}
  .pub-b p{font-size:13px;color:var(--muted-2);line-height:1.55;margin-bottom:14px;}
  .pub-tags{display:flex;gap:8px;flex-wrap:wrap;}
  .pub-tags span{font-size:11px;font-weight:600;color:var(--primary);background:var(--lav);border-radius:999px;padding:6px 12px;}

  /* READY TEMPLATE */
  .rt-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;}
  .rt-left h2{margin-bottom:12px;}
  .rt-left .sub{margin-bottom:26px;max-width:440px;}
  .rt-stack{background:var(--lav);border:1px solid var(--lav-2);border-radius:20px;padding:26px;position:relative;overflow:hidden;}
  .rt-stack .st-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
  .rt-stack .st-head .d{width:34px;height:34px;border-radius:10px;background:#d9d9e6;}
  .rt-stack .st-head b{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--ink);} .rt-stack .st-head span{font-size:11px;color:var(--muted);}
  .fan{position:relative;height:250px;}
  .fan img{position:absolute;width:150px;height:auto;border-radius:14px;box-shadow:0 20px 40px -16px rgba(23,19,79,.5);}
  .fan img:nth-child(1){left:0;top:22px;transform:rotate(-6deg);z-index:1;}
  .fan img:nth-child(2){left:70px;top:8px;z-index:2;}
  .fan img:nth-child(3){left:140px;top:22px;transform:rotate(6deg);z-index:1;}
  .rt-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .rtc{background:var(--canvas);border:1px solid var(--border);border-radius:16px;padding:20px;}
  .rtc .c{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;}
  .rtc .c svg{width:19px;height:19px;}
  .rtc b{display:block;font-size:14.5px;color:var(--ink);font-weight:700;margin-bottom:4px;}
  .rtc span{font-size:12.5px;color:var(--muted-2);line-height:1.45;}

  /* CTA */
  .cta{background:linear-gradient(135deg,var(--pink),var(--magenta));border-radius:24px;padding:56px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);}
  .cta h2{color:#fff;margin-bottom:12px;}
  .cta>p{font-size:16px;color:rgba(255,255,255,.9);max-width:440px;margin:0 auto 26px;}
  .cta-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:460px;margin:0 auto;}
  .cta-form input{flex:1;min-width:220px;border:none;border-radius:12px;padding:14px 18px;font-size:15px;font-family:Inter,sans-serif;color:var(--ink);outline:none;}
  .cta .btn-white{background:#fff;color:var(--pink);}
  .cta-sub{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:15px;}

  /* FOOTER */
  footer{padding:52px 0 40px;border-top:1px solid var(--border);}
  .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;}
  .foot .blurb{font-size:13px;color:var(--muted-2);max-width:270px;margin-top:12px;line-height:1.6;}
  .foot-links{display:flex;gap:52px;flex-wrap:wrap;}
  .foot-col h5{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:12px;}
  .foot-col a{display:block;font-size:14px;color:var(--muted-2);margin-bottom:9px;} .foot-col a:hover{color:var(--ink);}
  .foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
  .foot-bottom span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--caption);}

  @media(max-width:900px){
    .hero-grid,.split,.rt-grid{grid-template-columns:1fr;gap:36px;}
    .hero h1{font-size:44px;} h2.title{font-size:30px;}
    .mini-cards{grid-template-columns:1fr;}
    .hero-illu{order:-1;}
    .fan{height:230px;max-width:320px;margin:0 auto;}
  }
  @media(max-width:560px){
    .hero h1{font-size:36px;} .rt-cards{grid-template-columns:1fr;}
    .cta,.showcase{padding:30px 20px;}
  }