:root{
    --ink:#155EEF;
    --ink-2:#2E74FF;
    --ink-3:#4C8CFF;
    --paper:#FFFFFF;
    --paper-2:#F1F5FC;
    --line-dark:rgba(255,255,255,0.10);
    --line-light:rgba(11,18,32,0.12);
    --signal:#00E6B4;
    --signal-dim:#00B896;
    --coral:#FF5B3C;
    --text-dark:#0F1522;
    --text-dim:#5B6472;
    --text-on-ink:#FFFFFF;
    --text-on-ink-dim:#D3E1FF;
    --radius-s:6px;
    --radius-m:14px;
    --maxw:1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--text-dark);
    font-family:'Manrope',sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    margin:0;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  ul{margin:0;padding:0;list-style:none;}
  button{font-family:inherit;cursor:pointer;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

  :focus-visible{outline:2px solid var(--signal);outline-offset:3px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky;top:0;z-index:60;
    background:rgba(21,94,239,0.75);
    backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, background .3s ease;
  }
  header.scrolled{
    border-bottom-color:var(--line-dark);
    background:rgba(21,94,239,0.94);
  }
  .navbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 32px;max-width:var(--maxw);margin:0 auto;
  }
  .brand{
    display:flex;align-items:center;gap:10px;
    color:var(--text-on-ink);
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;font-size:1.05rem;
  }
  .brand-text{display:flex;flex-direction:column;line-height:1.2;}
  .brand-tagline{
    font-family:'Manrope',sans-serif;font-weight:500;
    font-size:0.68rem;color:var(--text-on-ink-dim);
    letter-spacing:0.01em;
  }
  .brand-mark{
    width:32px;height:32px;border-radius:50%;
    border:1.5px solid var(--signal);
    position:relative;flex-shrink:0;
  }
  .brand-mark::before,.brand-mark::after{
    content:"";position:absolute;border-radius:50%;
    border:1px solid var(--signal-dim);
    opacity:.6;
  }
  .brand-mark::before{inset:6px;}
  .brand-mark::after{inset:12px;background:var(--signal);border:none;opacity:1;}

  nav.links{display:flex;gap:36px;}
  nav.links a{
    color:var(--text-on-ink-dim);font-size:0.94rem;font-weight:500;
    padding:6px 0;border-bottom:1px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  nav.links a:hover{color:var(--text-on-ink);border-color:var(--signal);}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 24px;border-radius:999px;
    font-weight:600;font-size:0.92rem;
    border:1px solid transparent;
    transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  }
  .btn:active{transform:scale(0.97);}
  .btn-signal{background:var(--signal);color:#06231D;}
  .btn-signal:hover{background:#4FF0D4;}
  .btn-outline{border-color:var(--line-dark);color:var(--text-on-ink);}
  .btn-outline:hover{border-color:var(--signal);color:var(--signal);}
  .btn-coral{background:var(--coral);color:#28100A;}
  .btn-coral:hover{background:#FF8768;}

  .nav-cta{display:flex;align-items:center;gap:18px;}
  .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;}
  .hamburger span{width:22px;height:2px;background:var(--text-on-ink);display:block;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:
      radial-gradient(circle at 8px 8px, rgba(255,255,255,0.14) 1.5px, transparent 1.6px) 0 0/28px 28px,
      linear-gradient(155deg, var(--ink-3) 0%, var(--ink) 62%);
    color:var(--text-on-ink);
    overflow:hidden;
    padding:96px 0 84px;
  }
  .hero::before{
    content:"";position:absolute;top:-160px;right:-140px;width:520px;height:520px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,91,60,0.35) 0%, rgba(255,91,60,0) 70%);
    filter:blur(6px);pointer-events:none;
  }
  .hero .wrap{
    display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;
    position:relative;z-index:2;
  }
  .eyebrow-line{
    display:flex;align-items:center;gap:10px;
    color:var(--signal);font-weight:600;font-size:0.82rem;
    margin-bottom:22px;
  }
  .eyebrow-line .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);
    box-shadow:0 0 0 4px rgba(0,230,180,0.18);
  }
  .hero h1{
    font-size:clamp(2.2rem, 4vw, 3.4rem);
    line-height:1.08;color:#fff;
    max-width:14ch;
  }
  .hero .lede{
    margin-top:22px;color:var(--text-on-ink-dim);
    font-size:1.08rem;max-width:46ch;
  }
  .hero .cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

  .hero-stats{
    display:flex;gap:34px;margin-top:56px;padding-top:28px;
    border-top:1px solid var(--line-dark);
  }
  .hero-stats .stat b{
    display:block;font-family:'Space Grotesk',sans-serif;
    font-size:1.5rem;color:#fff;font-variant-numeric:tabular-nums;
  }
  .hero-stats .stat span{color:var(--text-on-ink-dim);font-size:0.82rem;}

  /* ---------- HERO VISUAL: fanned post-card stack ---------- */
  .post-stack{
    position:relative;height:420px;perspective:1200px;
  }
  .source-doc{
    position:absolute;left:6%;top:10%;width:150px;
    background:rgba(255,255,255,0.08);
    border:1px solid var(--line-dark);
    border-radius:12px;padding:16px;
    transform:rotate(-6deg);
    transition:transform .25s ease-out;
  }
  .source-doc .doc-title{
    font-family:'Space Grotesk',sans-serif;font-size:0.72rem;font-weight:600;color:#fff;margin-bottom:10px;
  }
  .source-doc .doc-line{height:6px;border-radius:3px;background:rgba(255,255,255,0.22);margin-bottom:7px;}
  .source-doc .doc-line:nth-child(2){width:92%;}
  .source-doc .doc-line:nth-child(3){width:100%;}
  .source-doc .doc-line:nth-child(4){width:70%;}
  .flow-arrow{
    position:absolute;left:41%;top:38%;width:64px;height:64px;
    color:var(--signal);opacity:.85;
  }
  .post-card{
    position:absolute;width:172px;
    background:#fff;border-radius:16px;
    box-shadow:0 20px 40px -14px rgba(9,20,50,0.45);
    padding:14px;color:var(--text-dark);
    transition:transform .2s ease-out;
    will-change:transform;
  }
  .post-card .pc-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
  .post-card .pc-badge{
    width:26px;height:26px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .post-card .pc-badge i{font-size:19px;}
  .post-card .pc-name{font-size:0.72rem;font-weight:700;color:var(--text-dark);}
  .post-card .pc-media{
    width:100%;height:64px;border-radius:8px;margin-bottom:9px;
  }
  .post-card .pc-line{height:5px;border-radius:3px;background:var(--paper-2);margin-bottom:5px;}
  .post-card .pc-line.short{width:60%;}
  .post-card .pc-chip{
    position:absolute;bottom:-12px;right:-10px;
    background:var(--ink);color:#fff;font-family:'Space Grotesk',sans-serif;
    font-size:0.66rem;font-weight:600;padding:5px 10px;border-radius:999px;
    border:2px solid var(--paper);
  }
  .card-ig{top:2%;left:34%;transform:rotate(-4deg);z-index:3;}
  .card-tt{top:20%;left:58%;transform:rotate(7deg);z-index:2;}
  .card-fb{top:44%;left:18%;transform:rotate(5deg);z-index:4;}
  .card-yt{top:52%;left:52%;transform:rotate(-8deg);z-index:1;}

  .drift{animation:drift 7s ease-in-out infinite;}
  .drift.d2{animation-delay:.5s;}
  .drift.d3{animation-delay:1s;}
  .drift.d4{animation-delay:1.5s;}
  @keyframes drift{
    0%,100%{margin-top:0;}
    50%{margin-top:-9px;}
  }

  /* ---------- SECTION SCAFFOLD ---------- */
  section{padding:96px 0;}
  .section-light{background:var(--paper);}
  .section-tint{background:var(--paper-2);}
  .section-dark{background:var(--ink);color:var(--text-on-ink);}
  .kicker{
    color:var(--signal-dim);font-weight:700;font-size:0.8rem;
    margin-bottom:14px;
  }
  .section-dark .kicker{color:var(--signal);}
  h2.section-title{
    font-size:clamp(1.6rem,2.6vw,2.3rem);
    max-width:18ch;color:var(--text-dark);
  }
  .section-dark h2.section-title{color:#fff;}

  /* ---------- PROBLEM/SOLUTION ---------- */
  .split{
    display:grid;grid-template-columns:1fr 1fr;gap:64px;
  }
  .split .col p{color:var(--text-dim);margin-top:16px;font-size:1.02rem;max-width:44ch;}
  .split .col + .col{
    border-left:1px solid var(--line-light);padding-left:64px;
  }
  .split .col h3{font-size:1.15rem;color:var(--text-dark);}

  /* ---------- WHY CHOOSE (frequency band list) ---------- */
  .freq-list{margin-top:52px;}
  .freq-item{
    display:grid;grid-template-columns:22px 1fr;gap:22px;
    padding:30px 0;border-top:1px solid var(--line-dark);
    align-items:start;
  }
  .freq-item:last-child{border-bottom:1px solid var(--line-dark);}
  .freq-tag{
    position:relative;padding-top:8px;
  }
  .freq-tag::before{
    content:"";position:absolute;left:0;top:8px;
    width:9px;height:9px;border-radius:50%;background:var(--signal);
  }
  .freq-body h3{color:#fff;font-size:1.2rem;margin-bottom:8px;}
  .freq-body p{color:var(--text-on-ink-dim);max-width:58ch;}

  /* ---------- AUDIENCE ---------- */
  .audience-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    margin-top:52px;
  }
  .audience-card{
    padding:0 36px;position:relative;
  }
  .audience-card + .audience-card{border-left:1px solid var(--line-light);}
  .audience-card:first-child{padding-left:0;}
  .audience-mark{
    width:44px;height:44px;border-radius:50%;
    border:1.5px solid var(--signal-dim);
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--signal-dim);
    margin-bottom:22px;
  }
  .audience-card h3{font-size:1.12rem;margin-bottom:10px;}
  .audience-card p{color:var(--text-dim);font-size:0.98rem;}

  /* ---------- JARINGAN PLATFORM (directory style) ---------- */
  .network-lede{color:var(--text-dim);max-width:58ch;margin-top:14px;font-size:1.02rem;}

  .stat-chip-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    margin-top:44px;
  }
  .stat-chip{
    background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-m);
    padding:20px 22px;
  }
  .stat-chip b{
    display:block;font-family:'Space Grotesk',sans-serif;font-size:1.7rem;
    color:var(--ink);font-variant-numeric:tabular-nums;
  }
  .stat-chip span{color:var(--text-dim);font-size:0.86rem;}

  .network-toolbar{
    display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;
  }
  .network-search{
    flex:1;min-width:240px;display:flex;align-items:center;gap:10px;
    background:#fff;border:1px solid var(--line-light);border-radius:999px;
    padding:14px 20px;
  }
  .network-search svg{flex-shrink:0;color:var(--text-dim);}
  .network-search input{
    border:none;outline:none;flex:1;font-family:'Manrope',sans-serif;
    font-size:0.94rem;color:var(--text-dark);background:transparent;
  }
  .network-search input::placeholder{color:#9AA3AF;}
  .reset-btn{
    background:var(--ink);color:#fff;border:none;border-radius:999px;
    padding:0 26px;font-weight:600;font-size:0.9rem;
  }
  .reset-btn:hover{background:var(--ink-2);}

  .filter-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
  .filter-pill{
    background:#fff;border:1px solid var(--line-light);border-radius:999px;
    padding:9px 18px;font-size:0.86rem;font-weight:600;color:var(--text-dim);
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .filter-pill.active,.filter-pill:hover{
    background:var(--ink);color:#fff;border-color:var(--ink);
  }

  .group-card{
    background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-m);
    margin-top:28px;overflow:hidden;
  }
  .group-header{
    display:flex;align-items:center;gap:16px;padding:24px 26px;
    cursor:pointer;
  }
  .group-icon{
    width:44px;height:44px;border-radius:12px;flex-shrink:0;
    background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-weight:700;
  }
  .group-title{flex:1;}
  .group-title h3{font-size:1.08rem;color:var(--text-dark);}
  .group-title span{color:var(--text-dim);font-size:0.86rem;}
  .group-toggle{
    width:34px;height:34px;border-radius:50%;flex-shrink:0;
    background:var(--paper-2);border:none;color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;
  }
  .group-body{
    padding:0 26px 26px;
    display:block;
  }
  .group-card.collapsed .group-body{display:none;}

  .subcat{margin-top:22px;}
  .subcat:first-child{margin-top:4px;}
  .subcat-head{
    display:flex;align-items:center;gap:9px;margin-bottom:14px;
  }
  .subcat-icon{
    width:20px;height:20px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .subcat-icon i{font-size:17px;}
  .subcat-head h4{font-size:0.92rem;color:var(--text-dark);font-weight:700;}
  .subcat-head span{color:var(--text-dim);font-size:0.82rem;}

  .item-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  }
  .item-pill{
    display:flex;align-items:center;gap:12px;
    background:var(--paper-2);border-radius:10px;
    padding:12px 14px;
  }
  .item-num{
    width:26px;height:26px;border-radius:8px;flex-shrink:0;
    background:var(--ink);color:#fff;font-family:'Space Grotesk',sans-serif;
    font-size:0.74rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .item-info{min-width:0;}
  .item-info .item-name{
    font-size:0.88rem;font-weight:600;color:var(--text-dark);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .item-info .item-followers{
    font-family:'Space Grotesk',sans-serif;font-size:0.76rem;color:var(--signal-dim);
    font-variant-numeric:tabular-nums;
  }
  .item-pill.is-hidden{display:none;}
  .no-result{color:var(--text-dim);font-size:0.9rem;padding:18px 0;display:none;}
  .network-note{color:var(--text-dim);font-size:0.82rem;margin-top:24px;}

  /* ---------- CTA CLOSING ---------- */
  .cta-closing{
    background:linear-gradient(120deg,#FF5B3C 0%, var(--ink) 65%);
    text-align:center;padding:100px 0;
  }
  .cta-closing h2{
    color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);
    max-width:20ch;margin:0 auto;
  }
  .cta-closing p{
    color:var(--text-on-ink-dim);max-width:52ch;margin:20px auto 0;font-size:1.05rem;
  }
  .cta-closing .cta-row{
    display:flex;justify-content:center;gap:14px;margin-top:36px;flex-wrap:wrap;
  }

  /* ---------- FOOTER ---------- */
  footer{background:var(--ink);color:var(--text-on-ink-dim);padding:52px 0 32px;border-top:1px solid var(--line-dark);}
  .footer-top{
    display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:32px;
    border-bottom:1px solid var(--line-dark);
  }
  .footer-brand p{max-width:36ch;margin-top:14px;font-size:0.92rem;}
  .footer-links{display:flex;gap:56px;flex-wrap:wrap;}
  .footer-links h4{color:#fff;font-size:0.86rem;margin-bottom:14px;}
  .footer-links ul li{margin-bottom:10px;font-size:0.9rem;}
  .footer-links ul li a:hover{color:#fff;}
  .footer-bottom{
    display:flex;justify-content:space-between;padding-top:24px;font-size:0.82rem;flex-wrap:wrap;gap:10px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    .wrap{padding:0 22px;}
    nav.links{display:none;}
    .hamburger{display:flex;}
    .hero .wrap{grid-template-columns:1fr;}
    .post-stack{height:300px;order:-1;transform:scale(0.82);}
    .flow-arrow{display:none;}
    .split{grid-template-columns:1fr;gap:36px;}
    .split .col + .col{border-left:none;padding-left:0;border-top:1px solid var(--line-light);padding-top:36px;}
    .audience-grid{grid-template-columns:1fr;gap:36px;}
    .audience-card + .audience-card{border-left:none;border-top:1px solid var(--line-light);padding-top:36px;}
    .audience-card{padding-left:0;}
    .freq-item{grid-template-columns:1fr;gap:10px;}
    .stat-chip-row{grid-template-columns:1fr 1fr;}
    .item-grid{grid-template-columns:1fr;}
    .group-header{padding:20px;}
    .group-body{padding:0 20px 20px;}
    .navbar{padding:16px 22px;}
    section{padding:68px 0;}
  }