:root{
    --bg:#F2F1EC;
    --surface:#FFFFFF;
    --surface-2:#EAE7DD;
    --ink:#181B22;
    --ink-soft:#4E5262;
    --ink-faint:#7A7E8C;
    --primary:#16304F;
    --primary-700:#0D2038;
    --primary-100:#DCE4EC;
    --accent:#A9761F;
    --accent-soft:#EFDDB2;
    --line:#D6D2C4;
    --line-strong:#B9B4A2;
    --danger:#8C3B2E;
    --shadow: 0 24px 48px -32px rgba(13,32,56,.35);
    --shadow-card: 0 1px 2px rgba(15,25,40,.05), 0 16px 32px -20px rgba(15,25,40,.16);
    --shadow-card-hover: 0 1px 2px rgba(15,25,40,.06), 0 24px 40px -18px rgba(15,25,40,.22);
    --radius-lg: 18px;
    --radius-md: 12px;
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;font-weight:600;}
  p{margin:0;}
  .wrap{max-width:1180px;margin-inline:auto;padding-inline:24px;}
  @media (max-width:720px){ .wrap{padding-inline:18px;} }

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-mono);
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);
    font-weight:500;
  }
  .eyebrow::before{content:"§";font-size:13px;}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 26px;border-radius:var(--radius-md);font-weight:600;font-size:15px;
    text-decoration:none;cursor:pointer;border:1px solid transparent;
    font-family:var(--font-body);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-primary{background:var(--primary);color:#fff;}
  .btn-primary:hover{background:var(--primary-700);transform:translateY(-1px);box-shadow:var(--shadow-card);}
  .btn-accent{background:var(--accent);color:#1B1400;}
  .btn-accent:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--shadow-card);}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
  .btn-ghost:hover{border-color:var(--ink-faint);transform:translateY(-1px);}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .btn-primary, .btn-accent{position:relative;overflow:hidden;}
  .btn-primary::after, .btn-accent::after{
    content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
    transform:skewX(-18deg);transition:left .55s ease;pointer-events:none;
  }
  .btn-primary:hover::after, .btn-accent:hover::after{left:130%;}
  @media (prefers-reduced-motion: reduce){ .btn-primary::after, .btn-accent::after{display:none;} }

  /* ---------- NAV ---------- */
  header.site{
    position:sticky;top:0;z-index:40;
    background:rgba(242,241,236,.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .25s ease, background .25s ease;
  }
  header.site.is-scrolled{
    background:rgba(242,241,236,.97);
    box-shadow:0 10px 28px -20px rgba(13,32,56,.35);
  }
  .nav-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
  .brand-mark{
    width:36px;height:36px;border-radius:9px;
    object-fit:contain;flex-shrink:0;
    background:#fff;padding:3px;border:1px solid var(--line);
  }
  .brand-name{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:.01em;}
  .brand-tag{display:block;font-size:10.5px;color:var(--ink-faint);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;margin-top:-2px;}
  nav.links{display:flex;gap:28px;font-size:14.5px;font-weight:500;}
  nav.links a{text-decoration:none;color:var(--ink-soft);position:relative;padding-bottom:3px;}
  nav.links a:hover{color:var(--ink);}
  nav.links a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
    background:var(--accent);transform:scaleX(0);transform-origin:left;
    transition:transform .25s cubic-bezier(.22,.61,.36,1);
  }
  nav.links a:hover::after{transform:scaleX(1);}
  nav.links a.active::after{transform:scaleX(1);background:var(--primary);}
  @media (max-width:880px){ nav.links a::after{display:none;} }
  .nav-badge{
    display:inline-block;margin-left:5px;padding:1px 6px;border-radius:100px;
    background:var(--accent);color:#1B1400;font-size:9.5px;font-weight:700;
    letter-spacing:.03em;text-transform:uppercase;font-family:var(--font-mono);
    vertical-align:2px;
  }
  .nav-cta{display:flex;align-items:center;gap:10px;}
  @media (max-width:880px){
    nav.links{display:none;}
    .nav-cta .btn-ghost{display:none;}
  }

  /* ---------- HERO ---------- */
  .hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08;margin-top:14px;color:var(--primary-700);}
  .hero p.lede{margin-top:18px;font-size:18px;color:var(--ink-soft);max-width:52ch;}
  .hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}

  .search-card{
    margin-top:32px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-card);
  }
  .search-card .label{font-size:12.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;display:block;}
  .search-row{display:flex;gap:8px;}
  .search-row input{
    flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line-strong);border-radius:4px;
    background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:14.5px;
  }
  .search-row input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
  .chip{
    font-size:12.5px;padding:6px 12px;border-radius:100px;border:1px solid var(--line-strong);
    color:var(--ink-soft);background:var(--surface-2);
  }

  .dossier{
    background:var(--primary);color:#fff;border-radius:var(--radius-lg);padding:28px;
    position:relative;overflow:hidden;box-shadow:var(--shadow-card);
  }
  .dossier::after{
    content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px);
    pointer-events:none;
  }
  .dossier .eyebrow{color:var(--accent-soft);}
  .dossier .eyebrow::before{color:var(--accent-soft);}
  .dossier h3{color:#fff;font-size:22px;margin-top:10px;}
  .dossier-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .dossier-list li{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-top:1px solid rgba(255,255,255,.16);padding-top:14px;}
  .dossier-list li:first-child{border-top:none;padding-top:0;}
  .dossier-list .k{color:rgba(255,255,255,.65);}
  .dossier-list .v{font-weight:600;text-align:right;font-family:var(--font-mono);font-size:13.5px;}

  /* ---------- MARQUEE & RUANG IKLAN ---------- */
  .marquee-bar{background:var(--accent);color:#1B1400;overflow:hidden;position:relative;}
  .marquee-track{display:flex;width:max-content;animation:marquee-scroll 22s linear infinite;}
  .marquee-group{display:flex;flex-shrink:0;align-items:center;padding-block:9px;}
  .marquee-group span{
    display:inline-flex;align-items:center;gap:10px;padding-inline:28px;
    font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    white-space:nowrap;border-right:1px solid rgba(27,20,0,.2);
  }
  @keyframes marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

  .ad-slot{
    border:1.5px dashed var(--line-strong);border-radius:var(--radius-md);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--ink-faint);background:var(--surface-2);
    font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  }
  .ad-slot-kicker{font-weight:700;}
  .ad-slot-top{width:100%;max-width:728px;height:90px;margin:28px auto 0;}
  .ad-rail{position:fixed;top:120px;z-index:30;display:none;}
  .ad-rail-left{left:16px;}
  .ad-rail-right{right:16px;}
  .ad-rail .ad-slot{width:160px;height:600px;}
  @media (min-width:1560px){ .ad-rail{display:block;} }

  /* ---------- SECTION SHELL ---------- */
  section{padding-block:76px;}
  .section-head.reveal, .consult-form-card.reveal, .download-banner.reveal{
    opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .section-head.reveal-in, .consult-form-card.reveal-in, .download-banner.reveal-in{opacity:1;transform:translateY(0);}

  /* staggered per-item reveal for grids/lists */
  .areas-grid.reveal, .lawyer-grid.reveal, .article-grid.reveal, .value-grid.reveal, .faq-list.reveal, .pasal-list.reveal{
    opacity:1;transform:none;transition:none;
  }
  .areas-grid.reveal > *, .lawyer-grid.reveal > *, .article-grid.reveal > *, .value-grid.reveal > *, .faq-list.reveal > *, .pasal-list.reveal > *{
    opacity:0;transform:translateY(16px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .areas-grid.reveal-in > *, .lawyer-grid.reveal-in > *, .article-grid.reveal-in > *, .value-grid.reveal-in > *, .faq-list.reveal-in > *, .pasal-list.reveal-in > *{
    opacity:1;transform:translateY(0);
  }
  .areas-grid.reveal-in > *:nth-child(1), .lawyer-grid.reveal-in > *:nth-child(1), .article-grid.reveal-in > *:nth-child(1), .value-grid.reveal-in > *:nth-child(1), .faq-list.reveal-in > *:nth-child(1), .pasal-list.reveal-in > *:nth-child(1){transition-delay:.02s;}
  .areas-grid.reveal-in > *:nth-child(2), .lawyer-grid.reveal-in > *:nth-child(2), .article-grid.reveal-in > *:nth-child(2), .value-grid.reveal-in > *:nth-child(2), .faq-list.reveal-in > *:nth-child(2), .pasal-list.reveal-in > *:nth-child(2){transition-delay:.07s;}
  .areas-grid.reveal-in > *:nth-child(3), .lawyer-grid.reveal-in > *:nth-child(3), .article-grid.reveal-in > *:nth-child(3), .value-grid.reveal-in > *:nth-child(3), .faq-list.reveal-in > *:nth-child(3), .pasal-list.reveal-in > *:nth-child(3){transition-delay:.12s;}
  .areas-grid.reveal-in > *:nth-child(4), .lawyer-grid.reveal-in > *:nth-child(4), .article-grid.reveal-in > *:nth-child(4), .value-grid.reveal-in > *:nth-child(4), .faq-list.reveal-in > *:nth-child(4){transition-delay:.17s;}
  .areas-grid.reveal-in > *:nth-child(5), .lawyer-grid.reveal-in > *:nth-child(5), .article-grid.reveal-in > *:nth-child(5), .value-grid.reveal-in > *:nth-child(5), .faq-list.reveal-in > *:nth-child(5){transition-delay:.22s;}
  .areas-grid.reveal-in > *:nth-child(6), .article-grid.reveal-in > *:nth-child(6), .faq-list.reveal-in > *:nth-child(6){transition-delay:.27s;}
  .areas-grid.reveal-in > *:nth-child(7), .article-grid.reveal-in > *:nth-child(7), .faq-list.reveal-in > *:nth-child(7){transition-delay:.32s;}
  .areas-grid.reveal-in > *:nth-child(8), .article-grid.reveal-in > *:nth-child(8){transition-delay:.37s;}
  .areas-grid.reveal-in > *:nth-child(9){transition-delay:.42s;}
  .areas-grid.reveal-in > *:nth-child(10){transition-delay:.47s;}
  .areas-grid.reveal-in > *:nth-child(11){transition-delay:.52s;}
  .areas-grid.reveal-in > *:nth-child(12){transition-delay:.57s;}

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal *, .reveal-in, .reveal-in *{opacity:1!important;transform:none!important;transition:none!important;}
  }
  .section-head{max-width:640px;margin-bottom:36px;}
  .section-head h2{font-size:clamp(24px,3vw,34px);margin-top:10px;}
  .section-head p{margin-top:12px;color:var(--ink-soft);font-size:16px;}
  .bab-num{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);letter-spacing:.1em;}

  /* ---------- PRACTICE AREAS ---------- */
  .areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
  @media (max-width:900px){ .areas-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .areas-grid{grid-template-columns:1fr;} }
  .area-cell{background:var(--surface);padding:24px 22px;display:flex;flex-direction:column;gap:12px;min-height:132px;transition:background .18s ease;}
  .area-cell:hover{background:var(--bg);}
  .area-cell .ic{width:26px;height:26px;color:var(--accent);transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
  .area-cell:hover .ic{transform:scale(1.18) rotate(-6deg);}
  .area-cell .name{font-weight:600;font-size:14.5px;}
  .area-cell .desc{font-size:12.5px;color:var(--ink-faint);}

  /* ---------- PASAL / TIER CARDS ---------- */
  .pasal-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card);}
  .pasal{display:grid;grid-template-columns:120px 1fr 200px;gap:24px;padding:28px;border-bottom:1px solid var(--line);align-items:center;}
  .pasal:last-child{border-bottom:none;}
  @media (max-width:760px){ .pasal{grid-template-columns:1fr;gap:12px;} }
  .pasal .tag{font-family:var(--font-mono);font-size:13px;color:var(--accent);font-weight:600;}
  .pasal .tag small{display:block;color:var(--ink-faint);font-weight:400;font-size:11px;margin-top:4px;text-transform:uppercase;letter-spacing:.06em;}
  .pasal h3{font-size:19px;margin-bottom:6px;}
  .pasal .body-txt{color:var(--ink-soft);font-size:14.5px;max-width:52ch;}
  .pasal .price{text-align:right;}
  @media (max-width:760px){ .pasal .price{text-align:left;} }
  .pasal .price .amount{font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--primary);}
  .pasal .price .unit{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:2px;}

  /* ---------- APP DOWNLOAD BANNER ---------- */
  .download-banner{
    display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
    background:var(--primary);color:#fff;border-radius:var(--radius-lg);padding:44px;position:relative;overflow:hidden;
    box-shadow:var(--shadow-card);
  }
  .download-banner::after{
    content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px);
    pointer-events:none;
  }
  .download-copy{max-width:480px;position:relative;z-index:1;}
  .download-copy .eyebrow{color:var(--accent-soft);}
  .download-copy .eyebrow::before{color:var(--accent-soft);}
  .download-copy h3{color:#fff;font-size:28px;margin-top:10px;}
  .download-copy p{color:rgba(255,255,255,.72);margin-top:12px;max-width:44ch;}
  .playstore-btn{
    display:inline-flex;align-items:center;gap:12px;margin-top:24px;
    background:#fff;color:var(--primary-700);padding:14px 22px;border-radius:6px;
    text-decoration:none;font-weight:700;font-size:15.5px;
  }
  .playstore-btn:hover{filter:brightness(.97);}
  .playstore-btn svg{width:22px;height:22px;flex-shrink:0;color:var(--primary);}
  .playstore-btn .lines{display:flex;flex-direction:column;line-height:1.15;text-align:left;}
  .playstore-btn .lines small{font-weight:600;font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;}
  .phone-mock{
    position:relative;z-index:1;width:200px;height:390px;background:var(--primary-700);
    border:6px solid rgba(255,255,255,.15);border-radius:30px;
    padding:16px 12px;flex-shrink:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
    display:flex;flex-direction:column;overflow:hidden;
  }
  .pm-topbar{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:12px;}
  .pm-avatar{width:30px;height:30px;border-radius:8px;object-fit:contain;background:#fff;padding:2px;flex-shrink:0;}
  .pm-topbar-text{line-height:1.25;}
  .pm-name{font-size:11.5px;font-weight:700;color:#fff;}
  .pm-status{display:flex;align-items:center;gap:5px;font-size:9.5px;color:rgba(255,255,255,.55);font-family:var(--font-mono);}
  .pm-online-dot{width:6px;height:6px;border-radius:50%;background:#5FBE73;display:inline-block;animation:dot-pulse 2s ease-in-out infinite;}
  .pm-chat{display:flex;flex-direction:column;gap:9px;flex:1;}
  .pm-bubble{
    max-width:82%;padding:8px 11px;border-radius:11px;font-size:10.5px;line-height:1.4;
    opacity:0;transform:translateY(6px);animation:bubble-in .45s ease forwards;
  }
  .pm-bubble-in{align-self:flex-start;background:rgba(255,255,255,.1);color:rgba(255,255,255,.92);border-bottom-left-radius:3px;}
  .pm-bubble-out{align-self:flex-end;background:var(--accent);color:#1B1400;border-bottom-right-radius:3px;font-weight:500;}
  .pm-typing{
    align-self:flex-start;display:flex;gap:4px;padding:9px 12px;border-radius:11px;
    background:rgba(255,255,255,.1);border-bottom-left-radius:3px;
    opacity:0;animation:bubble-in .45s ease forwards;
  }
  .pm-typing span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);animation:typing-bounce 1.1s ease-in-out infinite;}
  .pm-typing span:nth-child(2){animation-delay:.15s;}
  .pm-typing span:nth-child(3){animation-delay:.3s;}
  @keyframes bubble-in{to{opacity:1;transform:translateY(0);}}
  @keyframes typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-3px);opacity:1;}}
  @media (max-width:760px){ .phone-mock{display:none;} }

  /* ---------- FORMULIR KONSULTASI ---------- */
  .consult-form-card{
    margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:32px;box-shadow:var(--shadow-card);
  }
  .consult-form-head{max-width:560px;margin-bottom:22px;}
  .consult-form-head h3{font-size:21px;margin-top:8px;}
  .consult-form-head p{margin-top:8px;color:var(--ink-soft);font-size:14.5px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
  .form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
  .form-field label{font-size:12.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;}
  .form-field select,
  .form-field input[type="text"],
  .form-field textarea{
    font-family:var(--font-body);font-size:14.5px;color:var(--ink);
    padding:11px 13px;border:1px solid var(--line-strong);border-radius:4px;background:var(--bg);
  }
  .form-field select:focus-visible,
  .form-field input:focus-visible,
  .form-field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .form-field textarea{resize:vertical;font-family:var(--font-body);}
  .jenis-group{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  @media (max-width:640px){ .jenis-group{grid-template-columns:1fr;} }
  .jenis-option{
    position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px;
    border:1px solid var(--line-strong);border-radius:6px;cursor:pointer;font-size:13.5px;font-weight:600;
  }
  .jenis-option input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;}
  .jenis-option small{font-weight:500;color:var(--ink-faint);font-family:var(--font-mono);}
  .jenis-option:has(input:checked){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent);}
  .jenis-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px;}
  .form-note{font-size:12px;color:var(--ink-faint);margin-top:12px;max-width:52ch;}
  .lawyer-pick-btn{
    margin-top:10px;font-family:var(--font-body);font-size:12px;font-weight:700;
    background:none;border:1px solid var(--line-strong);border-radius:100px;padding:6px 14px;
    color:var(--primary);cursor:pointer;
  }
  :root[data-theme="dark"] .lawyer-pick-btn{color:var(--accent);}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .lawyer-pick-btn{color:var(--accent);} }
  .lawyer-pick-btn:hover{border-color:var(--accent);}

  /* ---------- LAWYERS ---------- */
  .lawyer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
  @media (max-width:1000px){ .lawyer-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:640px){ .lawyer-grid{grid-template-columns:repeat(2,1fr);} }
  .lawyer-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 16px;text-align:center;transition:transform .18s ease, box-shadow .18s ease;}
  .lawyer-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}
  .avatar{
    width:64px;height:64px;border-radius:50%;margin:0 auto 14px;
    background:var(--primary-100);color:var(--primary-700);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:600;font-size:20px;
    border:2px solid var(--accent);
  }
  .lawyer-card .name{font-weight:700;font-size:14.5px;line-height:1.3;}
  .lawyer-card .field{font-size:12px;color:var(--accent);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
  .status-pill{
    display:inline-flex;align-items:center;gap:6px;margin-top:12px;
    font-size:11px;color:var(--ink-faint);font-family:var(--font-mono);
  }
  .status-dot{width:7px;height:7px;border-radius:50%;background:#4C8C5C;position:relative;display:inline-block;animation:dot-pulse 2s ease-in-out infinite;}
  .status-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:#4C8C5C;opacity:.35;animation:dot-ring 2s ease-out infinite;}
  @keyframes dot-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
  @keyframes dot-ring{0%{transform:scale(.6);opacity:.5;}100%{transform:scale(1.8);opacity:0;}}
  @media (prefers-reduced-motion: reduce){
    .status-dot, .status-dot::after, .pm-bubble, .pm-typing span, .pm-online-dot{animation:none!important;opacity:1!important;transform:none!important;}
  }
  .lawyer-card .badge-founder{
    display:inline-block;margin-top:10px;font-size:10px;letter-spacing:.06em;
    background:var(--accent-soft);color:var(--accent);padding:3px 8px;border-radius:100px;
    text-transform:uppercase;font-weight:700;
  }

  /* ---------- DIRECTOR (leadership photo card) ---------- */
  .director-card{
    display:flex;align-items:stretch;gap:28px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:28px;
  }
  .director-photo-wrap{
    flex:0 0 220px;max-width:220px;align-self:stretch;overflow:hidden;
  }
  .director-photo{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
  .director-info{flex:1;min-width:0;padding:26px 26px 26px 0;display:flex;flex-direction:column;justify-content:center;gap:8px;}
  .director-info .badge-founder{
    align-self:flex-start;font-size:10px;letter-spacing:.06em;
    background:var(--accent-soft);color:var(--accent);padding:4px 10px;border-radius:100px;
    text-transform:uppercase;font-weight:700;
  }
  .director-name{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--primary);line-height:1.25;}
  .director-desc{font-size:14px;color:var(--ink-soft);line-height:1.6;max-width:62ch;}
  .director-info .btn{align-self:flex-start;margin-top:6px;}
  .director-section-label{
    font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-faint);margin:0 0 14px;font-weight:600;
  }
  @media (max-width:720px){
    .director-card{flex-direction:column;}
    .director-photo-wrap{flex:none;max-width:none;width:100%;height:260px;}
    .director-info{padding:20px;}
    .director-name{font-size:19px;}
  }

  .director-card--compact{
    display:flex;align-items:center;gap:18px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:18px;margin-bottom:22px;
  }
  .director-photo--square{
    flex:0 0 84px;width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top center;
    border:2px solid var(--accent);
  }
  .director-card--compact .director-info{padding:0;gap:4px;}
  .director-card--compact .director-name{font-size:16px;}
  .director-card--compact .director-desc{font-size:13px;max-width:56ch;}
  @media (max-width:560px){
    .director-card--compact{flex-direction:column;text-align:center;}
    .director-card--compact .director-info{align-items:center;}
    .director-card--compact .badge-founder{align-self:center;}
  }

  /* ---------- VALUE PROPS ---------- */
  .value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
  @media (max-width:900px){ .value-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .value-grid{grid-template-columns:1fr;} }
  .value-item{transition:transform .3s ease;}
  .value-item:hover{transform:translateY(-5px);}
  .value-item .num{font-family:var(--font-display);font-size:30px;color:var(--accent);transition:color .3s ease;}
  .value-item:hover .num{color:var(--primary);}
  .value-item h3{font-size:15.5px;margin-top:6px;}
  .value-item p{font-size:13.5px;color:var(--ink-soft);margin-top:6px;}

  /* ---------- FAQ ---------- */
  .faq-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item:last-child{border-bottom:none;}
  .faq-item summary{
    padding:20px 24px;cursor:pointer;font-weight:600;font-size:15px;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:16px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+";font-size:20px;color:var(--accent);flex-shrink:0;font-family:var(--font-mono);transition:transform .2s ease;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  .faq-item p{padding:0 24px 20px;font-size:14px;color:var(--ink-soft);max-width:65ch;}

  /* ---------- ARTIKEL HUKUM ---------- */
  .article-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
  .tab-btn{
    font-family:var(--font-body);font-size:13px;font-weight:600;padding:8px 16px;border-radius:100px;
    border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);cursor:pointer;
  }
  .tab-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;}
  .tab-btn:hover{border-color:var(--ink-faint);}
  .tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
  @media (max-width:760px){ .article-grid{grid-template-columns:1fr;} }
  .article-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;
    display:flex;flex-direction:column;gap:10px;transition:transform .18s ease, box-shadow .18s ease;
  }
  .article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}
  .article-tag{
    align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:4px 10px;border-radius:100px;
    background:color-mix(in srgb, var(--tag-color) 16%, transparent);color:var(--tag-color);
  }
  .tag-publik{--tag-color:#3B8A4E;}
  .tag-mahasiswa{--tag-color:var(--primary);}
  .tag-akademisi{--tag-color:var(--accent);}
  .tag-praktisi{--tag-color:#B5453A;}
  :root[data-theme="dark"] .tag-mahasiswa{--tag-color:#89AFDD;}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tag-mahasiswa{--tag-color:#89AFDD;} }
  .article-card h3{font-size:16.5px;line-height:1.35;}
  .article-card > p{font-size:13.5px;color:var(--ink-soft);}
  .article-extra{font-size:13.5px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:12px;margin-top:2px;}
  .article-toggle{
    align-self:flex-start;background:none;border:none;padding:0;margin-top:2px;
    font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--primary);cursor:pointer;
  }
  :root[data-theme="dark"] .article-toggle{color:var(--accent);}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .article-toggle{color:var(--accent);} }
  .article-toggle:hover{text-decoration:underline;}
  .article-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-faint);font-family:var(--font-mono);margin-top:auto;padding-top:6px;}

  /* ---------- ECOSYSTEM STRIP (condensed) ---------- */
  .eco-strip{display:flex;flex-wrap:wrap;gap:10px;}
  .eco-pill{font-size:13px;padding:8px 14px;border-radius:100px;border:1px solid var(--line-strong);color:var(--ink-soft);background:var(--surface);}
  .eco-pill.current{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--primary-700);color:rgba(255,255,255,.82);padding-block:56px 28px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
  @media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
  footer h5{color:#fff;font-family:var(--font-body);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;font-weight:700;}
  footer .fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  footer .fbrand-name{font-family:var(--font-display);color:#fff;font-size:20px;font-weight:600;}
  footer p.desc{font-size:13.5px;line-height:1.6;max-width:36ch;color:rgba(255,255,255,.62);}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;}
  footer a{text-decoration:none;color:rgba(255,255,255,.78);}
  footer a:hover{color:#fff;}
  .stamp{
    width:96px;height:96px;border:2px solid var(--accent);border-radius:50%;
    display:flex;align-items:center;justify-content:center;text-align:center;
    transform:rotate(-9deg);color:var(--accent);font-family:var(--font-mono);
    font-size:10px;letter-spacing:.06em;line-height:1.4;padding:8px;flex-shrink:0;
  }
  .sign-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);}
  .privacy-note{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);}
  .privacy-note summary{cursor:pointer;font-weight:700;font-size:13px;color:#fff;list-style:none;}
  .privacy-note summary::-webkit-details-marker{display:none;}
  .privacy-note summary::after{content:" +";color:var(--accent);}
  .privacy-note[open] summary::after{content:" \2212";}
  .privacy-body{margin-top:14px;display:flex;flex-direction:column;gap:10px;font-size:12.5px;color:rgba(255,255,255,.62);max-width:70ch;}
  .privacy-body a{color:var(--accent);text-decoration:underline;}
  .sign-meta{font-size:12px;color:rgba(255,255,255,.5);font-family:var(--font-mono);}
  .legal-line{font-size:12px;color:rgba(255,255,255,.45);margin-top:6px;}

  /* ---------- MULTI-PAGE ADDITIONS ---------- */
  nav.links a.active{color:var(--ink);font-weight:700;}
  .lang-switch{display:flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:12px;font-weight:700;margin-right:4px;}
  .lang-switch a{padding:5px 9px;border-radius:6px;color:var(--ink-faint);text-decoration:none;}
  .lang-switch a.active{background:var(--primary-100);color:var(--primary-700);}
  .lang-switch a:hover{color:var(--ink);}
  .lang-switch span.sep{color:var(--line-strong);}
  @media (max-width:880px){ .lang-switch{margin-right:0;} }

  .crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-faint);padding-block:18px 0;}
  .crumbs a{color:var(--ink-faint);text-decoration:none;}
  .crumbs a:hover{color:var(--ink);text-decoration:underline;}
  .crumbs .sep{color:var(--line-strong);}
  .crumbs .current{color:var(--ink-soft);}

  a.article-card{text-decoration:none;color:inherit;cursor:pointer;}
  .article-card .cta-read{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:var(--primary);}
  :root[data-theme="dark"] .article-card .cta-read{color:var(--accent);}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .article-card .cta-read{color:var(--accent);} }

  .page-hero{padding-block:44px 8px;position:relative;overflow:hidden;}
  .page-hero .bab-num{display:block;margin-bottom:10px;position:relative;z-index:1;}
  .page-hero h1{font-size:clamp(28px,4vw,42px);color:var(--primary-700);margin-top:6px;position:relative;z-index:1;}
  .page-hero p.lede{margin-top:14px;font-size:16.5px;color:var(--ink-soft);max-width:64ch;position:relative;z-index:1;}
  .page-hero::before{
    content:"";position:absolute;top:-70px;right:-50px;width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 70%);
    opacity:.55;filter:blur(1px);pointer-events:none;z-index:0;
    animation:page-hero-drift 11s ease-in-out infinite;
  }
  @keyframes page-hero-drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-14px,12px) scale(1.08);}}
  @media (max-width:640px){ .page-hero::before{width:160px;height:160px;top:-40px;right:-40px;} }
  @media (prefers-reduced-motion: reduce){ .page-hero::before{animation:none;} }

  .article-full{max-width:72ch;}
  .article-full .article-tag{margin-bottom:14px;}
  .article-full h1{font-size:clamp(26px,3.6vw,38px);color:var(--primary-700);margin-top:8px;}
  .article-full .article-meta{margin:14px 0 28px;font-size:12.5px;color:var(--ink-faint);font-family:var(--font-mono);display:flex;gap:8px;flex-wrap:wrap;}
  .article-full .lede{font-size:17px;color:var(--ink-soft);margin-bottom:22px;}
  .article-full .body-copy{font-size:15.5px;color:var(--ink);line-height:1.75;display:flex;flex-direction:column;gap:16px;}
  .article-full .law-note{margin-top:28px;padding:18px 20px;background:var(--surface-2);border-radius:var(--radius-md);font-size:13px;color:var(--ink-soft);border-left:3px solid var(--accent);}
  .article-cta{margin-top:40px;padding:26px;background:var(--primary);color:#fff;border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;}
  .article-cta p{font-size:15px;max-width:44ch;}
  .related-articles{margin-top:56px;}
  .related-articles h2{font-size:20px;margin-bottom:18px;}

  .lawyer-card a.lawyer-pick-btn{display:inline-block;text-decoration:none;}

  .page-links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;}
  @media (max-width:820px){ .page-links-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .page-links-grid{grid-template-columns:1fr;} }
  .page-link-card{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;transition:transform .15s ease, box-shadow .15s ease;}
  .page-link-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);}
  .page-link-card .t{font-weight:700;font-size:14.5px;}
  .page-link-card .d{font-size:12.5px;color:var(--ink-faint);margin-top:4px;}

  /* ---------- MOBILE NAV TOGGLE ---------- */
  .nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:6px;padding:8px 9px;cursor:pointer;color:var(--ink);}
  .nav-toggle svg{width:20px;height:20px;display:block;}
  @media (max-width:880px){
    .nav-row{position:relative;flex-wrap:wrap;}
    .nav-toggle{display:inline-flex;align-items:center;justify-content:center;order:1;}
    nav.links{
      display:none;order:3;flex-basis:100%;
      flex-direction:column;gap:0;
      background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
      margin-top:12px;overflow:hidden;box-shadow:var(--shadow-card);
    }
    nav.links.open{display:flex;}
    nav.links a{padding:13px 18px;border-bottom:1px solid var(--line);}
    nav.links a:last-child{border-bottom:none;}
    .nav-cta{order:2;}
  }

  /* ---------- HERO VISUAL (animated) ---------- */
  .hero-side{display:flex;flex-direction:column;gap:20px;}
  .hero-visual{position:relative;height:200px;display:none;align-items:center;justify-content:center;}
  @media (min-width:901px){ .hero-visual{display:flex;} }
  .hv-orb{
    position:relative;width:132px;height:132px;border-radius:50%;
    background:linear-gradient(155deg,var(--primary),var(--primary-700));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 20px 40px -18px rgba(13,32,56,.55);
    animation:hv-float 5s ease-in-out infinite;
    z-index:2;
  }
  .hv-scale{width:56px;height:56px;color:#fff;position:relative;z-index:2;}
  .hv-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:hv-ring 3.2s ease-out infinite;}
  .hv-ring-2{animation-delay:1.1s;}
  .hv-badge{
    position:absolute;top:-2px;right:calc(50% - 128px);
    width:82px;height:82px;border-radius:50%;
    background:var(--accent);color:#1B1400;
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.04em;
    line-height:1.35;padding:6px;
    box-shadow:0 10px 24px -8px rgba(169,118,31,.55);
    animation:hv-pop .5s ease .1s both, hv-float 5s ease-in-out 1s infinite;
    z-index:3;
  }
  .hv-chip{
    position:absolute;width:44px;height:44px;border-radius:12px;background:var(--surface);
    border:1px solid var(--line);box-shadow:var(--shadow-card);
    display:flex;align-items:center;justify-content:center;color:var(--accent);
    animation:hv-pop .5s ease both, hv-float 6s ease-in-out infinite;
    z-index:2;
  }
  .hv-chip svg{width:20px;height:20px;}
  .hv-chip-1{left:calc(50% - 118px);top:0;animation-delay:.25s,0s;}
  .hv-chip-2{left:calc(50% - 128px);bottom:6px;animation-delay:.4s,.6s;}
  .hv-chip-3{right:calc(50% - 122px);bottom:22px;animation-delay:.55s,1.2s;}

  @keyframes hv-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
  @keyframes hv-ring{0%{transform:scale(.85);opacity:.55;}100%{transform:scale(1.55);opacity:0;}}
  @keyframes hv-pop{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}
  @media (prefers-reduced-motion: reduce){
    .hv-badge,.hv-orb,.hv-chip,.hv-ring{animation:none!important;}
  }

  /* ---------- SCROLL PROGRESS BAR ---------- */
  .scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent;pointer-events:none;}
  .scroll-progress-bar{
    height:100%;width:0%;
    background:linear-gradient(90deg, var(--accent), var(--primary));
    transition:width .1s linear;
    box-shadow:0 0 8px rgba(169,118,31,.5);
  }
  @media (prefers-reduced-motion: reduce){ .scroll-progress-bar{transition:none;} }

  /* ---------- BACK TO TOP ---------- */
  .back-to-top{
    position:fixed;left:20px;bottom:20px;z-index:45;
    width:46px;height:46px;border-radius:50%;
    background:var(--primary);color:#fff;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 14px 28px -12px rgba(13,32,56,.55);
    opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
    transition:opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), background .18s ease;
  }
  .back-to-top.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  .back-to-top:hover{background:var(--primary-700);transform:translateY(-2px) scale(1.03);}
  .back-to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .back-to-top svg{width:20px;height:20px;}
  @media (max-width:640px){ .back-to-top{left:14px;bottom:14px;width:42px;height:42px;} }
  @media (prefers-reduced-motion: reduce){ .back-to-top{transition:opacity .15s ease;} }

  /* ---------- WHATSAPP FLOATING BUTTON ---------- */
  .wa-float{
    position:fixed;right:20px;bottom:20px;z-index:46;
    display:flex;align-items:center;gap:8px;
    background:#25D366;color:#fff;border-radius:999px;
    padding:13px;box-shadow:0 14px 28px -10px rgba(19,113,60,.55);
    text-decoration:none;line-height:0;
    transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease, padding .2s ease;
  }
  .wa-float:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 18px 32px -10px rgba(19,113,60,.6);}
  .wa-float:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  .wa-float-label{
    font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;font-weight:600;
    line-height:1;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;
    transition:max-width .25s ease, opacity .2s ease;
  }
  .wa-float:hover .wa-float-label,.wa-float:focus-visible .wa-float-label{max-width:120px;opacity:1;margin-right:2px;}
  .wa-float-ring{
    position:absolute;inset:0;border-radius:999px;background:#25D366;
    animation:wa-pulse 2.4s ease-out infinite;z-index:-1;
  }
  @keyframes wa-pulse{0%{opacity:.55;transform:scale(1);}100%{opacity:0;transform:scale(1.7);}}
  @media (max-width:640px){
    .wa-float{right:14px;bottom:14px;padding:12px;}
    .wa-float-label{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .wa-float{transition:none;}
    .wa-float-ring{animation:none;display:none;}
  }

  /* ---------- MAP EMBED (contact page) ---------- */
  .map-embed{
    margin-top:28px;border-radius:var(--radius-lg);overflow:hidden;
    border:1px solid var(--line);box-shadow:var(--shadow-card);
  }
  .map-embed iframe{display:block;width:100%;}

  /* ---------- TRUST STATS (count-up) ---------- */
  .stats-strip{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  }
  @media (max-width:760px){ .stats-strip{grid-template-columns:repeat(2,1fr);} }
  .stat-cell{background:var(--surface);padding:26px 20px;text-align:center;}
  .stat-num{
    font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.4vw,36px);
    color:var(--primary);display:block;line-height:1.1;
  }
  .stat-num .unit{font-size:.6em;color:var(--accent);margin-left:1px;}
  .stat-label{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-faint);font-weight:600;}