/* ================= ARIA v3 — corporate command-center ================= */
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/spacegrotesk.woff2') format('woff2');
  font-weight:300 700; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('assets/inter.woff2') format('woff2');
  font-weight:100 900; font-display:swap;
}

:root{
  --bg:#070b16;
  --panel:rgba(0,35,93,.52);
  --panel-solid:#04183e;
  --ink:#ffffff;
  --ink-dim:#9bacca;
  --line:rgba(126,158,214,.18);
  --line-strong:rgba(126,158,214,.34);
  --accent:#f29100;
  --accent-2:#7fa8ff;
  --head:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --glass:blur(18px) saturate(1.2);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:#0a0f1f}
img{max-width:100%}

/* ---------- full-page 3D canvas ---------- */
#world{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 30%, transparent 50%, rgba(4,7,14,.55) 100%);
}
main{position:relative;z-index:2}

/* ---------- nav ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:1.6rem;
  padding:.95rem clamp(1.2rem,3vw,2.6rem);
  transition:all .35s;border-bottom:1px solid transparent;
  background:linear-gradient(rgba(7,11,22,.66), rgba(7,11,22,.28) 70%, transparent);
}
#nav.scrolled{
  background:rgba(7,11,22,.78);backdrop-filter:var(--glass);
  border-bottom-color:var(--line);padding-top:.6rem;padding-bottom:.6rem;
}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{height:32px;width:32px;object-fit:contain;border-radius:7px}
.brand-word{font-family:var(--head);font-weight:700;font-size:1.18rem;letter-spacing:-.02em;line-height:1}
.brand-word em{display:block;font-style:normal;font-weight:500;font-size:.5rem;letter-spacing:.32em;color:var(--ink-dim);text-transform:uppercase;margin-top:.18rem}
.links{display:flex;gap:1.35rem;align-items:center}
.links .toplink{
  color:var(--ink-dim);text-decoration:none;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  transition:color .25s;position:relative;padding:.55rem 0;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem;
}
.links .toplink::after{content:'';position:absolute;left:0;right:100%;bottom:.2rem;height:1.5px;background:var(--accent);transition:right .3s}
.links .toplink:hover,.links .active > .toplink,.links a.toplink.active{color:var(--ink)}
.links .toplink:hover::after,.links .active > .toplink::after,.links a.toplink.active::after{right:0}
.links .toplink i{font-style:normal;font-size:.58rem;color:var(--ink-dim);transition:transform .25s}
.links .toplink .new{
  font-size:.5rem;letter-spacing:.14em;font-weight:800;color:#0a0f1f;background:var(--accent);
  border-radius:.6rem;padding:.12rem .38rem;margin-left:.1rem;
}
.dd{position:relative}
.dd-menu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:230px;
  background:rgba(9,14,29,.95);backdrop-filter:var(--glass);border:1px solid var(--line-strong);
  border-radius:14px;padding:.5rem;box-shadow:0 26px 60px -20px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;
}
.dd::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,2px)}
.dd:hover .toplink i{transform:rotate(180deg);color:var(--accent)}
.dd-menu a{
  display:block;color:var(--ink-dim);text-decoration:none;font-size:.78rem;font-weight:600;
  padding:.62rem .85rem;border-radius:9px;transition:all .2s;letter-spacing:.02em;
}
.dd-menu a:hover{background:rgba(242,145,0,.12);color:var(--ink)}
.dd-menu a.on{color:var(--accent)}
.cta{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:#0a0f1f;background:var(--accent);padding:.65rem 1.15rem;border-radius:2rem;font-weight:700;
  transition:all .25s;box-shadow:0 6px 20px rgba(242,145,0,.3);
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(242,145,0,.45)}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;z-index:70}
.burger i{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}

/* ---------- shared ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1.2rem,5vw,3rem)}
.wrap.narrow{max-width:920px}
.sect{padding:clamp(4rem,8vw,7rem) 0;position:relative}
.eyebrow{
  font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.1rem;font-weight:700;
}
h1.hero-title{
  font-family:var(--head);font-weight:700;letter-spacing:-.035em;line-height:.99;
  font-size:clamp(2.7rem,7vw,5.6rem);
}
h1.hero-title .accent{color:transparent;-webkit-text-stroke:1.5px var(--accent)}
h2.big{
  font-family:var(--head);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.9rem,4.2vw,3.3rem);
  text-shadow:0 2px 28px rgba(4,7,14,.9), 0 1px 4px rgba(4,7,14,.8);
}
.lede{margin-top:1.3rem;color:var(--ink-dim);font-size:clamp(.98rem,1.4vw,1.1rem);line-height:1.8;max-width:44rem;text-shadow:0 1px 14px rgba(4,7,14,.9)}
.sect .eyebrow{text-shadow:0 1px 12px rgba(4,7,14,.95)}
.sect > .wrap > p, .sect .lede{text-shadow:0 1px 14px rgba(4,7,14,.9)}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.btn{
  display:inline-block;text-decoration:none;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.95rem 1.8rem;border-radius:2rem;font-weight:700;transition:all .25s;cursor:pointer;border:0;
}
.btn.solid{background:var(--accent);color:#0a0f1f;box-shadow:0 8px 26px rgba(242,145,0,.3)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(242,145,0,.45)}
.btn.ghost{border:1px solid var(--line-strong);color:var(--ink);background:rgba(0,35,93,.4);backdrop-filter:var(--glass)}
.btn.ghost:hover{border-color:var(--ink);background:rgba(233,237,247,.08)}

/* glass panel — the core surface of v3 */
.glass{
  background:var(--panel);backdrop-filter:var(--glass);
  border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7);
}

/* ---------- hero ---------- */
.hero{min-height:92vh;display:flex;align-items:center;position:relative}
.hero-inner{max-width:1200px;width:100%;margin:0 auto;padding:7.5rem clamp(1.2rem,5vw,3rem) 4rem}
.hero-panel{max-width:640px;padding:clamp(1.8rem,3.5vw,2.8rem)}
.hero-sub{max-width:32rem;color:var(--ink-dim);line-height:1.75;font-size:clamp(.95rem,1.3vw,1.05rem);margin-top:1.3rem}
.hero-actions{display:flex;gap:.9rem;margin-top:2rem;flex-wrap:wrap}
.scroll-hint{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.58rem;letter-spacing:.4em;color:var(--ink-dim);display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.scroll-hint span{width:1.5px;height:38px;background:linear-gradient(var(--accent),transparent);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- cards / grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1.4rem}

/* ---------- grid lima disiplin ----------------------------------------------- */
/* auto-fit memilih jumlah kolom dari lebar yang tersedia, jadi lima kartu mendarat
   4+1 atau 3+2 dan baris terakhir terbaca "belum selesai" — persis yang dilihat
   Irsan 22 Sep. Blok empat langkah (.flow) tidak pernah kena karena jumlah kolomnya
   DITULIS (4/2/1), dan empat habis dibagi semuanya.
   Di sini jumlahnya juga ditulis, lalu kartu pertama menutup sisanya:
     3 kolom -> [01 01 02] [03 04 05]   genap
     2 kolom -> [01 01] [02 03] [04 05] genap
     1 kolom -> genap dengan sendirinya
   Kartu pertama yang melebar itu Wireless & DAS, dan itu memang benar secara isi:
   di situlah satu-satunya skala yang Aria punya. Bentuknya mengikuti kenyataan,
   bukan sebaliknya. */
.grid-feature{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-feature>:first-child{grid-column:span 2}
@media (max-width:1000px){
  .grid-feature{grid-template-columns:repeat(2,1fr)}
  .grid-feature>:first-child{grid-column:span 2}
}
@media (max-width:700px){
  .grid-feature{grid-template-columns:1fr}
  .grid-feature>:first-child{grid-column:auto}
}
.card{
  padding:1.9rem;border-radius:18px;display:flex;flex-direction:column;gap:.85rem;
  background:var(--panel);backdrop-filter:var(--glass);border:1px solid var(--line);
  transition:transform .3s,border-color .3s;color:var(--ink);text-decoration:none;
}
.card:hover{transform:translateY(-6px);border-color:var(--accent)}
.card .no{font-family:var(--head);font-weight:700;font-size:.8rem;color:var(--accent);letter-spacing:.18em}
.card h2,.card h3{font-family:var(--head);font-size:1.28rem;letter-spacing:-.02em;line-height:1.18}
.card p{color:var(--ink-dim);font-size:.89rem;line-height:1.65;flex:1}
.card .go{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.card i{color:var(--accent);font-style:normal;font-size:.85rem}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.stat{background:var(--panel);backdrop-filter:var(--glass);padding:2rem 1.7rem}
.stat b{display:block;font-family:var(--head);font-weight:700;font-size:clamp(2.2rem,3.8vw,3.2rem);letter-spacing:-.03em;color:var(--accent);line-height:1}
.stat span{display:block;margin-top:.7rem;color:var(--ink-dim);font-size:.84rem;line-height:1.5}
.stat .bar{height:3px;background:rgba(139,150,178,.2);border-radius:2px;margin-top:1rem;overflow:hidden}
.stat .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.stat.in .bar i{width:var(--w,80%)}

/* ---------- detail blocks (services) ---------- */
/* lompatan dari tombol Services tidak boleh tertutup nav lengket */
.detail{scroll-margin-top:96px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,4rem);align-items:start;
  padding:clamp(2.6rem,5vw,4rem);margin-bottom:1.6rem;
}
.detail .no{font-family:var(--head);font-weight:700;font-size:3.6rem;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(139,150,178,.45)}
.detail h2{font-family:var(--head);font-weight:700;letter-spacing:-.025em;line-height:1.07;font-size:clamp(1.7rem,3.1vw,2.5rem);margin:.7rem 0 1rem}
.detail>div>p{color:var(--ink-dim);line-height:1.75;font-size:.96rem}
.check-list{list-style:none}
.check-list li{padding:.75rem 0 .75rem 1.7rem;border-bottom:1px solid var(--line);font-size:.92rem;position:relative}
.check-list li:last-child{border-bottom:0}
.check-list li::before{content:'—';position:absolute;left:.1rem;color:var(--accent);font-weight:700}
.check-list li b{display:block;font-family:var(--head);font-size:.97rem}
.check-list li b + span{color:var(--ink-dim);font-size:.84rem}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:.55rem;flex-wrap:wrap;position:relative;z-index:2}
.tab{
  font-family:var(--body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:.68rem 1.15rem;border-radius:2rem;border:1px solid var(--line-strong);cursor:pointer;
  background:rgba(0,35,93,.55);backdrop-filter:var(--glass);color:var(--ink-dim);transition:all .25s;
}
.tab:hover{border-color:var(--ink);color:var(--ink)}
.tab.active{background:var(--accent);border-color:var(--accent);color:#0a0f1f;box-shadow:0 6px 18px rgba(242,145,0,.4)}

/* ---------- coverage explorer (hubtown-style map) ---------- */
.cov{display:grid;grid-template-columns:minmax(300px,360px) 1fr;overflow:hidden;border-radius:20px}
.cov-side{
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  background:rgba(8,12,24,.55);max-height:min(78vh,760px);
}
.cov-head{padding:1.4rem 1.5rem 1.1rem;border-bottom:1px solid var(--line)}
.cov-head h3{font-family:var(--head);font-size:1.06rem;letter-spacing:-.01em}
.cov-head .sub{font-size:.7rem;color:var(--ink-dim);letter-spacing:.18em;text-transform:uppercase;margin-top:.3rem}
.cov-regions{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.cov-regions div{background:rgba(8,12,24,.7);padding:.85rem 1.5rem}
.cov-regions b{font-family:var(--head);font-size:1.25rem;color:var(--accent);display:block;line-height:1}
.cov-regions span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.cov-filters{display:flex;gap:.45rem;flex-wrap:wrap;padding:1rem 1.5rem;border-bottom:1px solid var(--line)}
.fchip{
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;cursor:pointer;
  padding:.42rem .8rem;border-radius:1rem;border:1px solid var(--line-strong);
  color:var(--ink-dim);background:transparent;transition:all .25s;
}
.fchip b{color:var(--accent);margin-left:.3rem}
.fchip:hover{color:var(--ink);border-color:var(--ink)}
.fchip.active{background:var(--accent);border-color:var(--accent);color:#0a0f1f}
.fchip.active b{color:#0a0f1f}
.cov-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.cov-item{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:.95rem 1.5rem;border-bottom:1px solid var(--line);transition:background .2s;color:var(--ink);
}
.cov-item:hover{background:rgba(233,237,247,.045)}
.cov-item.active{background:rgba(242,145,0,.1);box-shadow:inset 3px 0 0 var(--accent)}
.cov-item .id{font-size:.6rem;letter-spacing:.22em;color:var(--accent);font-weight:700;font-family:ui-monospace,monospace}
.cov-item h4{font-family:var(--head);font-size:.98rem;margin:.25rem 0 .2rem;display:flex;justify-content:space-between;gap:.8rem;align-items:baseline}
.cov-item h4 small{font-size:.68rem;color:var(--ink-dim);font-family:var(--body);white-space:nowrap}
.cov-item p{font-size:.76rem;color:var(--ink-dim);line-height:1.5}
.cov-item .chip{margin-top:.4rem;display:inline-block}
.cov-map{position:relative;background:#0a1124;min-height:420px}
.cov-map svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.cov-map svg:active{cursor:grabbing}
/* Isi hanya untuk BIDANG state. Aturan lama mengisi semua <path>, termasuk garis batas
   (g.borders) dan garis pemisah inset Alaska/Hawaii — atribut fill="none" kalah oleh CSS,
   jadi garis terbuka terisi jadi segitiga gelap, dan pemisah inset menutupi Alaska dan
   Hawaii. Tak terlihat selama semua state biru tua; langsung kelihatan begitu state
   yang dikerjakan diwarnai terang (screenshot Irsan, 17 Okt). */
/* :where() menjaga spesifisitas tetap rendah supaya .b2/.dim/.sel tetap menang */
.cov-map svg :where(g.state path,circle.state){fill:#131c38;stroke:#28345c;stroke-width:.8;transition:fill .3s}
.cov-map svg .borders path,.cov-map svg [class^="separator"]{fill:none;stroke:#28345c;stroke-width:.8}
.cov-map svg .lit{fill:#1c2a54}
.cov-map svg .hot{fill:#25396e}
/* Licensed to seal, but no program on record yet — visibly distinct from both
   worked states and states where Aria holds no licence at all. */
.cov-map svg .dim{fill:#141d38;stroke:#31498c;stroke-dasharray:2 2}
/* Ramp sekuensial satu hue, makin banyak = makin TERANG (permukaan gelap membalik
   jangkarnya). L OKLab 0,235 (dasar) -> 0,385 -> 0,528 -> 0,694, selisih antar-tingkat
   dE 14–17: bisa dibedakan, dan urutannya terbaca dari terangnya, bukan dari hue.
   Warna tidak pernah sendirian: angka ada di tooltip, di daftar, dan di tabel statis. */
.cov-map svg .b0{fill:#131c38}
.cov-map svg .b1{fill:#24407e}
.cov-map svg .b2{fill:#3768bd}
.cov-map svg .b3{fill:#6a9cf0}
/* Strip di bawah peta dulu menempel langsung di atas adegan 3D — teks abu tipis di
   atas latar kuning terang. Diberi panel sendiri seperti peta di atasnya. */
.cov-below{margin-top:1rem;padding:1.1rem 1.2rem 1.2rem;border-radius:20px}
.cov-below .cov-table{margin-top:1rem}
.cov-key{margin-top:0 !important;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.4rem;margin-top:1rem}
.cov-view{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:.2rem;gap:.2rem}
.vbtn{background:none;border:0;color:var(--ink-dim);font:inherit;font-size:.74rem;font-weight:600;
  padding:.45rem .9rem;border-radius:999px;cursor:pointer;min-height:36px}
.vbtn.active{background:var(--accent);color:#0a0f1f}
.vbtn:not(.active):hover{color:var(--ink)}
.cov-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem 1rem;font-size:.72rem;color:var(--ink-dim)}
.cov-legend li{display:flex;align-items:center;gap:.4rem}
.cov-legend .lt{width:100%;color:var(--ink);font-weight:600;letter-spacing:.02em}
.cov-legend .sw{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid #28345c}
.cov-legend .sw.b0{background:#131c38}.cov-legend .sw.b1{background:#24407e}
.cov-legend .sw.b2{background:#3768bd}.cov-legend .sw.b3{background:#6a9cf0}
.cov-legend .sw.dim{background:#141d38;border:1px dashed #31498c}
.cov-table{margin-top:1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.cov-table summary{cursor:pointer;padding:.9rem 1.1rem;font-size:.8rem;font-weight:600;color:var(--ink);min-height:44px;display:flex;align-items:center}
.cov-table .tscroll{overflow-x:auto;padding:0 1.1rem 1rem}
.cov-table table{width:100%;border-collapse:collapse;font-size:.74rem;min-width:540px}
.cov-table caption{text-align:left;color:var(--ink-dim);font-size:.72rem;line-height:1.5;padding:.2rem 0 .8rem}
.cov-table th,.cov-table td{text-align:left;padding:.42rem .6rem;border-bottom:1px solid var(--line);color:var(--ink-dim)}
.cov-table thead th{color:var(--ink);font-weight:600;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.cov-table tbody th{color:var(--ink);font-weight:500}
.cov-table td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums}
.cov-table tfoot th,.cov-table tfoot td{color:var(--ink);font-weight:600;border-bottom:0}
.cov-lic{font-size:.72rem;color:var(--ink-dim);padding:0 1.1rem 1rem;line-height:1.5}
.cov-note{font-size:.74rem;color:var(--ink-dim);margin-top:.7rem;max-width:72ch;line-height:1.55}
.cov-map svg .sel{fill:#31498c}
.mpin{fill:var(--accent);stroke:#0a0f1f;cursor:pointer;transition:fill .2s}
.mpin:hover{fill:#ffb133}
.mpin.active{fill:#ffb133}
.mring{fill:none;stroke:var(--accent);opacity:0;pointer-events:none}
.mring.on{animation:mping 1.8s ease-out infinite}
@keyframes mping{0%{opacity:.8;stroke-width:2}100%{opacity:0;stroke-width:.4}}
.cov-hud{position:absolute;top:1.1rem;left:1.2rem;z-index:4;pointer-events:none}
.cov-hud .t{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim)}
.cov-hud .z{font-family:ui-monospace,monospace;font-size:.72rem;color:var(--ink);margin-top:.25rem}
.cov-ctrl{position:absolute;right:1.1rem;top:1.1rem;z-index:4;display:flex;flex-direction:column;gap:.4rem}
.cov-ctrl button{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);cursor:pointer;
  background:rgba(0,35,93,.8);backdrop-filter:var(--glass);color:var(--ink);font-size:1rem;
  font-family:var(--head);transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.cov-ctrl button:hover{border-color:var(--accent);color:var(--accent)}
.cov-compass{
  position:absolute;right:1.15rem;bottom:1.1rem;z-index:4;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);background:rgba(0,35,93,.8);backdrop-filter:var(--glass);
  display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;
  color:var(--accent);font-size:.8rem;pointer-events:none;
}
.cov-compass::before{content:'';position:absolute;top:4px;left:50%;width:1px;height:7px;background:var(--accent)}
.cov-scale{position:absolute;left:1.2rem;bottom:1.15rem;z-index:4;font-size:.62rem;color:var(--ink-dim);letter-spacing:.14em;pointer-events:none}
.cov-scale i{display:block;width:74px;height:1.5px;background:var(--ink-dim);margin-top:.3rem}
.cov-hint{
  position:absolute;left:50%;bottom:1.15rem;transform:translateX(-50%);z-index:4;pointer-events:none;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);transition:opacity .5s;
}
.map-tip{
  position:fixed;z-index:60;width:min(290px,72vw);padding:1.1rem 1.2rem;border-radius:14px;
  background:rgba(0,35,93,.94);backdrop-filter:var(--glass);border:1px solid var(--line-strong);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8);pointer-events:none;opacity:0;transition:opacity .15s;
}
.map-tip.show{opacity:1}
.map-tip h4{font-family:var(--head);font-size:1rem;display:flex;justify-content:space-between;gap:1rem}
.map-tip h4 b{color:var(--accent)}
.map-tip .row{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;color:var(--ink-dim);padding:.32rem 0;border-bottom:1px solid var(--line)}
.map-tip .row:last-child{border-bottom:0}
.map-tip .row span:last-child{color:var(--ink);text-align:right}
.map-note{margin-top:1rem;font-size:.72rem;color:var(--ink-dim);letter-spacing:.06em}
@media (max-width:900px){
  .cov{grid-template-columns:1fr}
  .cov-map{min-height:340px;order:-1}
  .cov-side{max-height:52vh;border-right:0;border-top:1px solid var(--line)}
}

/* ---------- process timeline ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem;position:relative}
.flow::before{
  content:'';position:absolute;top:34px;left:6%;right:6%;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:.5;
}
.step{padding:1.7rem;border-radius:18px;background:var(--panel);backdrop-filter:var(--glass);border:1px solid var(--line);position:relative}
.step .dot{
  width:34px;height:34px;border-radius:50%;background:var(--accent);color:#0a0f1f;
  font-family:var(--head);font-weight:700;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;box-shadow:0 0 0 6px rgba(242,145,0,.15);
}
.step h3{font-family:var(--head);font-size:1.08rem;letter-spacing:-.01em}
.step .dur{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:.5rem 0 .6rem}
.step p{color:var(--ink-dim);font-size:.85rem;line-height:1.65}

/* ---------- portal demo ---------- */
.portal-demo{padding:clamp(1.4rem,3vw,2.4rem);position:relative;overflow:hidden}
.demo-tag{
  position:absolute;top:1.2rem;right:1.2rem;z-index:4;font-size:.62rem;letter-spacing:.25em;font-weight:700;
  text-transform:uppercase;color:#0a0f1f;background:var(--accent-2);padding:.35rem .8rem;border-radius:1rem;
}
.portal-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.portal-head h3{font-family:var(--head);font-size:1.3rem}
.portal-head .meta{font-size:.78rem;color:var(--ink-dim)}
.portal-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:1.4rem;margin-top:1.4rem}
.ptable{width:100%;border-collapse:collapse;font-size:.82rem}
.ptable th{
  text-align:left;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
  padding:.6rem .6rem;border-bottom:1px solid var(--line-strong);
}
.ptable td{padding:.68rem .6rem;border-bottom:1px solid var(--line)}
.chip{font-size:.66rem;font-weight:700;letter-spacing:.08em;padding:.26rem .6rem;border-radius:1rem;text-transform:uppercase}
.chip.ok{background:rgba(63,185,120,.16);color:#57d391}
.chip.wip{background:rgba(242,145,0,.15);color:var(--accent)}
.chip.rev{background:rgba(127,168,255,.15);color:var(--accent-2)}
.pside{display:flex;flex-direction:column;gap:1.1rem}
.pwidget{border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;background:rgba(13,20,38,.5)}
.pwidget h4{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.7rem}
.pbar{height:8px;border-radius:4px;background:rgba(139,150,178,.18);overflow:hidden;margin:.45rem 0 .8rem}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffb133);border-radius:4px}
.feed{font-size:.8rem;color:var(--ink-dim);line-height:1.5}
.feed li{list-style:none;padding:.45rem 0 .45rem 1.1rem;position:relative;border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:0}
.feed li::before{content:'';position:absolute;left:0;top:.85rem;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.feed b{color:var(--ink)}

/* ---------- drawings (case studies) ---------- */
.drawing{border-radius:14px;overflow:hidden;border:1px solid var(--line-strong);background:#0c1836}
.drawing svg{display:block;width:100%;height:auto}
.case-meta{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1rem;font-size:.78rem;color:var(--ink-dim)}
.case-meta b{display:block;color:var(--ink);font-size:.85rem;font-family:var(--head)}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:1.4rem;margin-top:3rem}
.member{padding:1.8rem;text-align:left}
/* Empat disiplin: kolom DITULIS 4/2/1 seperti blok empat langkah — empat habis dibagi
   semuanya, jadi tidak pernah ada baris yang timpang (koreksi Irsan 22 Sep). */
.team-grid.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.team-grid.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.team-grid.grid-4{grid-template-columns:1fr}}
.team-grid.grid-feature{margin-top:3rem}
.member .tenure{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink);border:1px dashed var(--line-strong);border-radius:1rem;
  padding:.25rem .65rem;margin-bottom:.7rem}
/* Kartu kaca di halaman Team duduk di atas langit adegan 3D yang paling terang di
   seluruh situs; teks abu di kaca setengah tembus jadi nyaris hilang. Kacanya
   dipekatkan di sini saja. */
.member.glass,.team-note.glass{background:rgba(10,17,36,.84)}
/* ---------- process: tahapan per disiplin (tanpa durasi) ---------- */
.disc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.6rem}
@media (max-width:1100px){.disc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.disc-grid{grid-template-columns:1fr}}
.disc{padding:1.6rem;border-radius:18px;display:flex;flex-direction:column;background:rgba(10,17,36,.84)}
.disc-top{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1rem}
.disc-top .no{font-family:var(--head);font-weight:700;font-size:1.6rem;color:transparent;-webkit-text-stroke:1px rgba(139,150,178,.6)}
.disc-top h3{font-family:var(--head);font-size:1.08rem}
.stages{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:.75rem;flex:1}
.stages li{counter-increment:st;display:grid;grid-template-columns:1.6rem 1fr;column-gap:.6rem;font-size:.8rem;line-height:1.5}
.stages li::before{content:counter(st);grid-row:span 2;width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--accent);color:#0a0f1f;font-weight:700;font-size:.68rem;display:flex;align-items:center;justify-content:center;margin-top:.1rem}
.stages b{color:var(--ink);font-weight:600}
.stages span{color:var(--ink-dim)}
.disc-note{font-size:.76rem;color:var(--ink-dim);margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);line-height:1.55}
.disc .go{margin-top:.9rem;font-size:.78rem;color:var(--accent);text-decoration:none;font-weight:600}
.team-note{margin-top:1.4rem;padding:1.2rem 1.4rem;border-radius:16px;color:var(--ink-dim);
  font-size:.9rem;line-height:1.65;max-width:none}
.member .tenure.in{color:#0a0f1f;background:var(--accent);border:1px solid var(--accent)}
.avatar{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-weight:700;font-size:1.3rem;color:#0a0f1f;
  background:linear-gradient(135deg,var(--accent),#ffb95e);margin-bottom:1rem;
}
.avatar.alt{background:linear-gradient(135deg,var(--accent-2),#a9c4ff)}
.member h3{font-family:var(--head);font-size:1.15rem}
.member .role{color:var(--accent);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin:.35rem 0 .8rem}
.member p{color:var(--ink-dim);font-size:.85rem;line-height:1.65}
.member .lic{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--ink-dim)}
.member .lic b{color:var(--ink)}

/* ---------- FAQ ---------- */
/* Enam kredensial: kolom ditulis 3/2/1 — enam habis dibagi semuanya, jadi tidak
   pernah ada baris timpang (aturan yang sama dengan disiplin & logo, koreksi Irsan). */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
@media (max-width:1000px){.badges{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.badges{grid-template-columns:1fr}}
.badge{
  display:flex;align-items:center;gap:.8rem;padding:1rem 1.4rem;border-radius:14px;
  background:var(--panel);backdrop-filter:var(--glass);border:1px solid var(--line-strong);
}
.badge svg{flex:none}
.badge b{font-family:var(--head);font-size:.95rem;display:block}
.badge span{font-size:.72rem;color:var(--ink-dim)}
.faq-list{margin-top:2.6rem;display:flex;flex-direction:column;gap:.9rem}
details.faq{
  background:var(--panel);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:14px;
  padding:1.2rem 1.5rem;transition:border-color .3s;
}
details.faq[open]{border-color:var(--accent)}
details.faq summary{
  cursor:pointer;font-family:var(--head);font-size:1.02rem;letter-spacing:-.01em;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
details.faq summary::after{content:'+';color:var(--accent);font-size:1.4rem;transition:transform .3s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{margin-top:.9rem;color:var(--ink-dim);font-size:.9rem;line-height:1.75}

/* ---------- smart quote form ---------- */
.quote{padding:2.2rem;display:flex;flex-direction:column;gap:1rem}
.quote h3{font-family:var(--head);font-size:1.3rem;letter-spacing:-.02em}
.quote label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);font-weight:700;margin-top:.3rem}
.quote input,.quote select,.quote textarea{
  background:rgba(233,237,247,.05);border:1px solid var(--line-strong);border-radius:11px;
  padding:.9rem 1.05rem;color:var(--ink);font-family:var(--body);font-size:.92rem;outline:none;
  transition:border-color .25s;resize:vertical;width:100%;
}
.quote option{background:var(--panel-solid);color:var(--ink)}
.quote input:focus,.quote select:focus,.quote textarea:focus{border-color:var(--accent)}
.quote ::placeholder{color:var(--ink-dim)}
.quote .branch{display:none;flex-direction:column;gap:1rem;padding:1.1rem;border:1px dashed var(--line-strong);border-radius:14px}
.quote .branch.show{display:flex}
/* 1fr defaults to min-width:auto, so a long placeholder or a select's intrinsic
   width pushes the column wider than its share and the whole page scrolls sideways.
   minmax(0,1fr) caps it; below 560px two fields in a row are unusable anyway. */
.quote .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
@media (max-width:560px){.quote .row2{grid-template-columns:1fr}}
.quote.sent{pointer-events:none;opacity:.6}

/* ---------- CTA banner ---------- */
.cta-banner{
  padding:clamp(2.2rem,4.5vw,3.6rem);display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;border-radius:22px;
  background:linear-gradient(120deg,rgba(242,145,0,.16),rgba(0,35,93,.7) 55%);
  backdrop-filter:var(--glass);border:1px solid var(--line-strong);
}
/* Banner di tengah deretan kartu detail (services: antara 05 dan 06) harus memakai
   ritme yang sama dengan kartu di sekitarnya — 1.6rem — bukan menempel ke kartu
   berikutnya. Diukur, bukan dikira: tanpa ini jaraknya 0px. */
.detail + .cta-banner{margin-bottom:1.6rem}
.cta-banner{scroll-margin-top:96px}
.cta-banner h2{font-family:var(--head);font-weight:700;letter-spacing:-.025em;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.12}
.cta-banner p{color:var(--ink-dim);margin-top:.6rem;max-width:34rem;line-height:1.7;font-size:.92rem}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:1.4rem;margin-top:3rem}
.post time{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700}

/* ---------- logos ---------- */
.logos{display:flex;gap:clamp(1.2rem,3vw,2.4rem);flex-wrap:wrap;align-items:center;margin-top:2.4rem}
.logos img{
  height:clamp(64px,7vw,88px);width:auto;border-radius:50%;
  opacity:.85;transition:all .35s;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
}
.logos img:hover{opacity:1;transform:translateY(-5px) scale(1.05)}

/* ---------- footer ---------- */
footer{position:relative;z-index:2;background:rgba(7,11,22,.88);backdrop-filter:var(--glass);border-top:1px solid var(--line);margin-top:clamp(4rem,7vw,6rem)}
.foot-grid{
  max-width:1200px;margin:0 auto;padding:3.2rem clamp(1.2rem,5vw,3rem) 2rem;
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:2.2rem;
}
.foot-grid h4{font-family:var(--head);color:var(--ink);font-size:.95rem;margin-bottom:.9rem}
.foot-grid a{display:block;color:var(--ink-dim);text-decoration:none;font-size:.85rem;padding:.26rem 0;transition:color .25s}
.foot-grid a:hover{color:var(--accent)}
.foot-brand{font-family:var(--head);font-weight:700;color:var(--ink);font-size:1.45rem;letter-spacing:-.02em}
.foot-brand span{color:var(--accent)}
.foot-grid p{font-size:.85rem;line-height:1.7;margin-top:.7rem;max-width:26rem;color:var(--ink-dim)}
.foot-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.foot-badges span{
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-dim);
  border:1px solid var(--line-strong);border-radius:1rem;padding:.32rem .7rem;
}
/* Sesuatu yang sedang diurus, bukan yang sudah jalan. Garis putus-putus membedakannya
   dari Avetta dan Ariba tanpa perlu kalimat tambahan, dan tetap terbaca kalau warnanya
   hilang — statusnya ada di teksnya sendiri, tidak hanya di gayanya. */
.foot-badges span.pending{border-style:dashed;opacity:.85}
.foot-social{display:flex;gap:.6rem;margin-top:1.1rem}
.foot-social a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink-dim);border:1px solid var(--line-strong);transition:color .2s,border-color .2s}
.foot-social a:hover,.foot-social a:focus-visible{color:var(--accent);border-color:var(--accent)}
.foot-bottom{
  border-top:1px solid var(--line);max-width:1200px;margin:0 auto;
  padding:1.3rem clamp(1.2rem,5vw,3rem);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .links{
    position:fixed;inset:0;background:rgba(7,11,22,.97);backdrop-filter:blur(22px);
    flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
    opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;z-index:60;
    overflow-y:auto;padding:5rem 0 3rem;
  }
  .links.open{opacity:1;visibility:visible}
  .links .toplink{font-size:1rem}
  .dd{text-align:center}
  .dd-menu{
    position:static;transform:none;min-width:0;background:transparent;border:0;box-shadow:none;
    backdrop-filter:none;padding:.2rem 0 .6rem;display:none;opacity:1;visibility:visible;
  }
  .dd.open .dd-menu{display:block}
  .dd-menu a{font-size:.9rem;padding:.5rem;color:var(--ink-dim)}
  .burger{display:flex}
}

/* ---------- simulators ---------- */
.sim-grid{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:1.4rem;align-items:start}
.sim-panel{padding:1.8rem;display:flex;flex-direction:column;gap:1.15rem}
.sim-panel h2,.sim-panel h3{font-family:var(--head);font-size:1.2rem;letter-spacing:-.015em}
.field label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);font-weight:700;margin-bottom:.5rem;
}
.field label output{color:var(--accent);font-family:var(--head);font-size:.95rem;letter-spacing:0}
.field select,.field input[type=number]{
  width:100%;background:rgba(233,237,247,.05);border:1px solid var(--line-strong);border-radius:11px;
  padding:.8rem 1rem;color:var(--ink);font-family:var(--body);font-size:.92rem;outline:none;transition:border-color .25s;
}
.field select:focus,.field input:focus{border-color:var(--accent)}
.field option{background:var(--panel-solid)}
input[type=range]{
  width:100%;appearance:none;height:5px;border-radius:3px;outline:none;
  background:linear-gradient(90deg,var(--accent) var(--p,50%),rgba(139,150,178,.25) var(--p,50%));
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);
  border:3px solid #0a0f1f;box-shadow:0 0 12px rgba(242,145,0,.6);cursor:pointer;
}
.sim-out{padding:1.8rem;display:flex;flex-direction:column;gap:1.3rem;min-height:100%}
.out-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.out-nums div{background:rgba(0,35,93,.7);padding:1.1rem 1.2rem}
.out-nums b{display:block;font-family:var(--head);font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--accent);letter-spacing:-.02em;line-height:1.1}
.out-nums span{display:block;margin-top:.35rem;font-size:.7rem;color:var(--ink-dim);line-height:1.4}
.verdict{
  padding:1.1rem 1.3rem;border-radius:12px;font-size:.92rem;line-height:1.65;border:1px solid;
}
.verdict.good{background:rgba(63,185,120,.1);border-color:rgba(63,185,120,.4);color:#7fe0a8}
.verdict.warn{background:rgba(242,145,0,.1);border-color:rgba(242,145,0,.45);color:#ffc46a}
.verdict.bad{background:rgba(255,92,92,.09);border-color:rgba(255,92,92,.4);color:#ff9d9d}
.verdict b{display:block;font-family:var(--head);font-size:1.02rem;margin-bottom:.25rem}
.gantt{display:flex;flex-direction:column;gap:.55rem}
.gantt .row{display:grid;grid-template-columns:150px 1fr;gap:.8rem;align-items:center}
.gantt .row span{font-size:.72rem;color:var(--ink-dim);letter-spacing:.06em}
.gantt .track{height:16px;border-radius:8px;background:rgba(139,150,178,.12);overflow:hidden;position:relative}
.gantt .bar{
  position:absolute;top:0;bottom:0;border-radius:8px;
  background:linear-gradient(90deg,var(--accent),#ffb133);
  box-shadow:0 0 14px rgba(242,145,0,.35);transition:left .7s cubic-bezier(.2,.7,.2,1),width .7s cubic-bezier(.2,.7,.2,1);
}
.gantt .bar.alt{background:linear-gradient(90deg,#4f79e8,var(--accent-2));box-shadow:0 0 14px rgba(127,168,255,.35)}
.gantt .scale{display:grid;grid-template-columns:150px 1fr;gap:.8rem}
.gantt .scale div{display:flex;justify-content:space-between;font-size:.62rem;color:var(--ink-dim);font-family:ui-monospace,monospace}
.gauge-wrap{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.gauge{width:190px;height:110px;flex:none}
.loadbar{height:22px;border-radius:11px;background:rgba(139,150,178,.14);overflow:hidden;position:relative}
.loadbar i{
  display:block;height:100%;border-radius:11px;transition:width .6s cubic-bezier(.2,.7,.2,1);
  background:linear-gradient(90deg,#57d391,var(--accent) 70%,#ff6b5c);
}
.loadbar em{
  position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.7;font-style:normal;
}
.sim-note{font-size:.74rem;color:var(--ink-dim);line-height:1.6;border-top:1px solid var(--line);padding-top:1rem}
.sim-cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
/* 1fr keeps min-width:auto, so a wide child (the capacity calendar) stretches its
   column past the viewport. minmax(0,1fr) plus min-width:0 on the panels caps it, and
   anything genuinely wide scrolls inside its own box instead of moving the page. */
@media (max-width:900px){.sim-grid,.sim-grid.flip{grid-template-columns:minmax(0,1fr)}}
.sim-panel,.sim-out{min-width:0}
.sim-out .cal,.sim-out .pipe{max-width:100%;overflow-x:auto}
/* Inline grid declarations can't be overridden by a media query, so two layouts that
   were written as style="" attributes live here instead. Both stack on narrow screens. */
.sim-grid.flip{grid-template-columns:1fr minmax(300px,360px)}
@media (max-width:900px){.sim-grid.flip{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,4vw,4rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:2rem}}
@media (max-width:900px){
  .detail,.grid-2,.portal-grid{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:1fr 1fr}
  .flow::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  #nav .cta{display:none}
  .flow{grid-template-columns:1fr}
  .quote .row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-panel{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .pin{animation:none}
}

/* ---------- answer-first recap block (2026-08-08) ---------- */
.recap-sect{padding-top:0}
.recap{padding:clamp(1.5rem,3vw,2.3rem) clamp(1.5rem,3vw,2.6rem)}
.recap-list{list-style:none;margin-top:1.05rem;display:grid;gap:.8rem}
.recap-list li{position:relative;padding-left:1.5rem;line-height:1.75;font-size:.94rem;color:var(--ink-dim)}
.recap-list li:before{content:"";position:absolute;left:.1rem;top:.68em;width:.4rem;height:.4rem;
  border-radius:50%;background:var(--accent)}

/* Very narrow phones (<=420px): the section padding alone ate most of the width and
   the grid columns kept min-width:auto, so long headings pushed the box wider than
   the screen. */
@media (max-width:420px){
  .detail{padding:1.5rem 1.25rem}
  .detail .no{font-size:2.6rem}
  .wrap{padding:0 1rem}
}

/* Archive of the pre-2026 posts, which live on aria-corp.com. Deliberately quieter
   than the cards above so a dormant three-year gap does not read as the main feed. */
.archive-list{list-style:none;border-top:1px solid var(--line)}
.archive-list li{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.archive-list a{color:var(--ink);text-decoration:none;font-size:.92rem}
.archive-list a:hover{color:var(--accent)}
.archive-list span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}

/* ---------- accessibility ---------- */
/* Skip link: off-screen until focused, then a normal visible control. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--accent);color:#0a0f1f;font-family:var(--head);font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 1.4rem;
  border-radius:0 0 10px 0;text-decoration:none;
}
.skip:focus{left:0}
/* Form controls had outline:none with only a 1px border-colour change on focus, which is
   not a reliable focus indicator — and range inputs had none at all. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.quote input:focus-visible,.quote select:focus-visible,.quote textarea:focus-visible{
  outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}
input[type=range]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* ---------- networks wall (projects page; block is generated) ---------- */
/* 18 logo (15 jaringan + XCharge, Tesla, CenterPoint, 15 Okt). auto-fill memberi jumlah
   kolom apa saja dan baris terakhir berlubang. Yang dipakai hanya pembagi 18: 6, 3. Jumlah logo
   dijaga oleh assert di coverage/emit_programs.py; kalau berubah jadi angka yang
   tidak habis dibagi, build GAGAL keras, bukan diam-diam jadi ragged. */
.netwall{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(6,1fr);gap:.85rem}
/* 6 kolom mulai sempit di bawah ~1000px: pembagi 18 berikutnya adalah 3. */
@media (max-width:1000px){ .netwall{grid-template-columns:repeat(3,1fr)} }
.netcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:.85rem;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.netcard .mark{background:#fff;border-radius:9px;height:62px;display:flex;
  align-items:center;justify-content:center;padding:.55rem .7rem}
.netcard .mark img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.netcard .mark.wordmark{font-family:var(--head);font-size:.8rem;font-weight:600;
  color:#0a1a3a;letter-spacing:-.01em;text-align:center;line-height:1.3}
.netcard b{font-family:var(--head);font-size:.86rem;letter-spacing:-.01em;line-height:1.25}
.netcard .meta{font-size:.68rem;color:var(--ink-dim);letter-spacing:.05em;line-height:1.5}
@media (max-width:430px){
  .netwall{grid-template-columns:repeat(3,1fr);gap:.7rem}
  .netcard .mark{height:52px}
}

/* ---------- contact form fallback ---------- */
/* A mailto: handoff silently does nothing on a browser with no mail client, so the
   composed enquiry is shown too. Hidden until the visitor actually submits. */
.rfp-fb[hidden]{display:none}
.rfp-fb{margin-top:1.2rem;padding:1.3rem;border:1px solid var(--line-strong);border-radius:16px;
  background:var(--panel);display:flex;flex-direction:column;gap:.9rem}
.rfp-fb p{font-size:.86rem;line-height:1.7;color:var(--ink-dim)}
.rfp-fb p b{color:var(--ink)}
.rfp-fb a{color:var(--accent)}
.rfp-fb textarea{width:100%;min-width:0;background:rgba(4,10,26,.55);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;font-family:ui-monospace,monospace;
  font-size:.78rem;line-height:1.6;resize:vertical}
.rfp-fb button{align-self:flex-start}