/* Halaman beranda. */

  a{text-decoration:none;color:inherit;}
  img{display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}

  /* ===== Nav ===== */
  nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 0;border-bottom:1px solid var(--border);
  }
  nav .logo img{height:30px;}
  .nav-links{display:flex;gap:32px;font-size:14px;color:var(--text-muted);font-weight:700;}
  .nav-right{display:flex;align-items:center;gap:16px;}
  .btn{
    padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:700;cursor:pointer;
    display:inline-block;
  }
  .btn-ghost{color:var(--ink);}
  .btn-primary{background:var(--ink);color:#fff;}
  .btn-primary:hover{opacity:.9;}

  /* ===== Hero ===== */
  .hero{
    text-align:center;padding:100px 0 60px;
  }
  .hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--panel);border:1px solid var(--border);
    border-radius:999px;padding:7px 16px;font-size:12.5px;color:var(--text-muted);
    margin-bottom:30px;
  }
  .hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);}
  .hero h1{
    font-size:52px;line-height:1.12;font-weight:700;letter-spacing:-1px;
    max-width:780px;margin:0 auto 22px;
  }
  .hero h1 .grad{
    background:linear-gradient(90deg,var(--purple),#F0637C,var(--orange));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p{
    font-size:17px;color:var(--text-muted);max-width:560px;margin:0 auto 36px;line-height:1.6;
  }
  .hero-ctas{display:flex;gap:14px;justify-content:center;margin-bottom:22px;}
  .btn-lg{padding:14px 26px;font-size:15px;border-radius:999px;}
  .try-row{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:56px;}
  .try-label{font-size:12px;color:var(--text-faint);}
  .try-chip{
    font-size:12px;color:var(--text-muted);background:var(--panel);border:1px solid var(--border);
    border-radius:999px;padding:7px 14px;transition:border-color .15s,color .15s;
  }
  .try-chip:hover{border-color:var(--purple);color:var(--ink);}

  /* ===== Preview mock ===== */
  .preview{
    max-width:920px;margin:0 auto;background:var(--panel);
    border:1px solid var(--border);border-radius:22px;padding:14px;
    box-shadow:0 30px 60px -20px rgba(46,49,56,0.15);
  }
  .preview-inner{
    background:#fff;border-radius:14px;border:1px solid var(--border);overflow:hidden;
  }
  .preview-bar{
    display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border);
  }
  .preview-bar span{width:9px;height:9px;border-radius:50%;background:#E3E2DD;}
  .preview-body{display:grid;grid-template-columns:190px 1fr;min-height:280px;}
  .preview-side{border-right:1px solid var(--border);padding:16px 12px;}
  .preview-side .pitem{height:10px;border-radius:5px;background:#F0EFEB;margin-bottom:10px;width:80%;}
  .preview-side .pitem.short{width:55%;}
  .preview-main{padding:24px;}
  .pv-bubble{
    max-width:70%;padding:10px 14px;border-radius:12px;background:var(--panel);
    font-size:12px;color:var(--text-muted);margin-bottom:12px;
  }
  .pv-bubble.right{margin-left:auto;background:#2E3138;color:#fff;}
  .pv-chip-row{display:flex;gap:8px;margin-top:18px;}
  .pv-chip{
    font-size:10.5px;padding:5px 10px;border-radius:999px;font-weight:700;
    display:flex;align-items:center;gap:5px;
  }
  .pv-chip.local{background:#E7F5E9;color:var(--green);}
  .pv-chip.cloud{background:#E4F3FC;color:var(--blue);}
  .pv-chip svg{width:9px;height:9px;}

  /* ===== Modality strip ===== */
  .modality{padding:90px 0 70px;text-align:center;}
  .modality h2{font-size:28px;font-weight:700;margin-bottom:10px;}
  .modality p{color:var(--text-muted);font-size:15px;margin-bottom:44px;}
  .modality-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:840px;margin:0 auto;
  }
  .modality-card{
    border:1px solid var(--border);border-radius:16px;padding:26px 18px;text-align:left;
  }
  .modality-icon{
    width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
  }
  .modality-icon svg{width:18px;height:18px;color:#fff;}
  .modality-card h3{font-size:14.5px;margin-bottom:6px;}
  .modality-card p{font-size:12.5px;color:var(--text-faint);line-height:1.5;margin:0;}

  /* ===== Two track ===== */
  .tracks{padding:70px 0;background:var(--panel);}
  .tracks-head{text-align:center;margin-bottom:46px;}
  .tracks-head h2{font-size:30px;font-weight:700;margin-bottom:10px;}
  .tracks-head p{color:var(--text-muted);font-size:15px;}
  .track-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  .track-card{
    background:#fff;border:1px solid var(--border);border-radius:20px;padding:34px;
  }
  .track-eyebrow{
    font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    padding:5px 11px;border-radius:999px;display:inline-block;margin-bottom:18px;
  }
  .track-eyebrow.b2c{background:#FDECD2;color:#B5750F;}
  .track-eyebrow.b2b{background:#E7E1FB;color:var(--purple);}
  .track-card h3{font-size:21px;margin-bottom:10px;}
  .track-card>p{font-size:13.5px;color:var(--text-muted);margin-bottom:22px;line-height:1.6;}
  .track-list{list-style:none;}
  .track-list li{
    display:flex;gap:10px;font-size:13px;color:var(--ink);margin-bottom:12px;align-items:flex-start;
  }
  .track-list li svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--green);}

  /* ===== Features ===== */
  .features{padding:90px 0;}
  .features-head{text-align:center;margin-bottom:50px;}
  .features-head h2{font-size:30px;font-weight:700;margin-bottom:10px;}
  .features-head p{color:var(--text-muted);font-size:15px;}
  .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .feature-card{padding:6px;}
  .feature-icon{
    width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .feature-icon svg{width:22px;height:22px;color:#fff;}
  .feature-card h3{font-size:16px;margin-bottom:8px;}
  .feature-card p{font-size:13.5px;color:var(--text-muted);line-height:1.6;}

  /* ===== CTA footer ===== */
  .cta-band{
    margin:40px 0;background:var(--ink);border-radius:24px;padding:60px 40px;text-align:center;
  }
  .cta-band h2{color:#fff;font-size:28px;margin-bottom:12px;}
  .cta-band p{color:#B7B9C0;font-size:14.5px;margin-bottom:28px;}
  .cta-band .btn-primary{background:#fff;color:var(--ink);}

  footer{
    padding:36px 0 50px;display:flex;justify-content:space-between;align-items:center;
    border-top:1px solid var(--border);font-size:12.5px;color:var(--text-faint);
  }
  footer .flinks{display:flex;gap:20px;}

  @media (max-width:860px){
    .modality-grid,.track-grid,.feature-grid{grid-template-columns:1fr 1fr;}
    .hero h1{font-size:36px;}
  }