/* ============================================================
   Rail — home.css v3  (full dark, BVNK-informed)
   Works with home3d.js v3 tagging engine (data-r* attributes).
   No value-substring selectors: only elements, ids, data-attrs.
   ============================================================ */

:root{
  --bg:#070D1D; --sec:#070D1D; --card:#0D1526; --card2a:#0F1930; --card2b:#0C1424;
  --ink:#E9EEFB; --soft:#A9B6D3; --mut:#8391AD; --acc:#A9AEFF; --line:rgba(148,160,220,.16);
}
body{background:var(--bg) !important;}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:'Space Grotesk','Hanken Grotesk',system-ui,sans-serif !important;font-weight:700 !important;}
h2,h3,h4{color:var(--ink) !important;}
[data-reb]{
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-size:11.5px !important;font-weight:600 !important;letter-spacing:.18em !important;
  color:#929BFF !important;
}

/* ---------- sections: unified dark ---------- */
section{background:var(--sec) !important;position:relative;}
/* ---------- themed elements (tagged at runtime) ---------- */
[data-rhide]{display:none !important;}
[data-rbg="card"]{background:var(--card) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 22px 50px -32px rgba(0,0,0,.65) !important;}
[data-rbg="card2"]{background:linear-gradient(180deg,var(--card2a),var(--card2b)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 22px 50px -32px rgba(0,0,0,.6) !important;}
[data-rbg="tint"]{background:rgba(124,119,255,.14) !important;}
[data-rbg="tintg"]{background:rgba(70,201,95,.16) !important;}
[data-rbg="glass"]{background:rgba(255,255,255,.06) !important;}
[data-rbg="chip"]{background:rgba(124,119,255,.12) !important;border-color:rgba(124,119,255,.34) !important;color:#C9C6FF !important;}
[data-rbd]{border-color:var(--line) !important;}
[data-rtx="ink"]{color:var(--ink) !important;}
[data-rtx="soft"]{color:var(--soft) !important;}
[data-rtx="mut"]{color:var(--mut) !important;}
[data-rtx="acc"]{color:var(--acc) !important;}

/* hero works-with strip */
[data-rworks]{border-top-color:rgba(255,255,255,.1) !important;}
[data-rwl]{color:#7E8BAA !important;}
[data-rlogo]{color:#C3CCE0 !important;}

/* ---------- nav: dark glass ---------- */
nav{background:rgba(7,13,29,.6) !important;border-bottom:1px solid rgba(255,255,255,.06) !important;}
nav.railup{background:rgba(7,13,29,.92) !important;border-bottom-color:rgba(148,155,255,.16) !important;box-shadow:0 14px 40px -22px rgba(2,6,20,.9);}
nav a[href="#top"]{color:#fff !important;}
[data-navlinks] a{color:#AEB9D6 !important;}
[data-navlinks] a:hover{color:#fff !important;}
[data-navlinks] a[href*="payrail.site"]{color:#A5AAFF !important;}
[data-navlinks] a[href*="payrail.site"]:hover{color:#CDD0FF !important;}
nav button{border-color:rgba(255,255,255,.18) !important;color:#C7D0E4 !important;}
nav button:hover{border-color:#8F88FF !important;color:#fff !important;}
nav a[href*="login.html"]{background:#635BFF !important;}
nav a[href*="login.html"]:hover{background:#766FFF !important;}

/* ---------- hero ---------- */
#top{background:var(--bg) !important;}
#top h1{
  color:#F5F7FF !important;
  background:linear-gradient(180deg,#FFFFFF 24%,#BCC1FF 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#top [data-herogrid] p{color:#A9B6D3 !important;}
#top [data-herogrid] a[href="#kapabilitas"]{
  background:rgba(255,255,255,.05) !important;color:#EEF1FF !important;
  border-color:rgba(255,255,255,.18) !important;backdrop-filter:blur(6px);
}
#top [data-herogrid] a[href="#kapabilitas"]:hover{border-color:#8F88FF !important;}
#top a[href="#cara-kerja"]{box-shadow:0 10px 34px -8px rgba(99,91,255,.8),0 0 0 1px rgba(255,255,255,.12) inset !important;}

/* injected fx layers */
.railfx-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.railfx-base{position:absolute;inset:0;background:
  radial-gradient(42% 50% at 62% 44%,rgba(99,91,255,.14),rgba(99,91,255,0) 70%),
  radial-gradient(38% 42% at 18% 40%,rgba(0,198,255,.08),rgba(0,198,255,0) 68%),#070D1D;}
.railfx-grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");}
.railfx-c{position:absolute;inset:0;width:100%;height:100%;display:block;}
.railfx-fade{position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(7,13,29,0),#070D1D);opacity:.9;}
.railfx-glow{position:absolute;width:560px;height:560px;border-radius:50%;left:0;top:0;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(99,91,255,.17),rgba(0,198,255,.06) 44%,transparent 70%);
  mix-blend-mode:screen;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s ease;}

@media (min-width:900px){[data-herogrid]{padding-top:96px !important;padding-bottom:84px !important;}}
@media (max-width:899px){[data-herogrid]{padding-top:72px !important;}.railfx-glow{display:none !important;}}

/* ---------- footer bookend ---------- */
footer{background:var(--bg) !important;}
footer div{border-bottom-color:rgba(255,255,255,.08) !important;}

/* ---------- quality floor ---------- */
a:focus-visible,button:focus-visible{outline:2px solid #8F88FF;outline-offset:3px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){
  .railfx-c,.railfx-glow{display:none !important;}
  
}

/* ---------- v4: phone mock dark theme (data-rp tags) ---------- */
[data-railkeep]{
  background:linear-gradient(165deg,#0F1830,#0A1122) !important;
  border:1px solid rgba(148,160,220,.16) !important;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(233,238,251,.04) !important;
}
[data-rp="screen"]{background:transparent !important;}
[data-rp="notch"]{background:rgba(233,238,251,.14) !important;height:6px !important;border-radius:5px !important;margin-top:8px;}
[data-rp="bal"]{
  background:linear-gradient(135deg,rgba(99,91,255,.2),rgba(0,198,255,.08)) !important;
  border:1px solid rgba(124,119,255,.38) !important;
  box-shadow:none !important;
}
[data-rp="lab"]{
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-size:9.5px !important;letter-spacing:.18em !important;
  text-transform:uppercase !important;color:#8391AD !important;opacity:1 !important;
  font-weight:600 !important;
}
[data-rp="tag"]{background:rgba(233,238,251,.1) !important;font-family:'IBM Plex Mono',monospace !important;}
[data-rp="act"]{
  background:rgba(233,238,251,.04) !important;
  border:1px solid rgba(148,160,220,.16) !important;
}
[data-rp="row"]{background:rgba(233,238,251,.02) !important;border-color:rgba(148,160,220,.16) !important;}
[data-rp="rowg"]{background:rgba(70,201,95,.15) !important;}
[data-rp="rowi"]{background:rgba(124,119,255,.14) !important;}
[data-rp="up"]{color:#3DD68C !important;font-family:'IBM Plex Mono',monospace !important;}
[data-rp="amt"]{font-family:'IBM Plex Mono',monospace !important;}
[data-railkeep] [data-rtx="ink"]{color:#EDF1FF !important;}
[data-railkeep] [data-rtx="soft"],[data-railkeep] [data-rtx="mut"]{color:#8391AD !important;}

/* capabilities tag pills — outline mono (mock parity, our colors) */
[data-rbg="pilltag"]{
  background:transparent !important;
  border:1px solid rgba(124,119,255,.42) !important;
  color:#A9AEFF !important;
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-size:10px !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;border-radius:100px !important;
}

/* why-title scatter chars */
[data-whyrow] h3 .rw{display:inline-block;white-space:nowrap;}
[data-whyrow] h3 .rc{display:inline-block;will-change:transform,opacity;}

/* preloader (inline-styled by JS; keyframe support here) */
#railpre{font-family:'Space Grotesk','Hanken Grotesk',system-ui,sans-serif;}

/* v4.1: monochrome glyph icons + spacing fixes inside dark phones */
[data-rp="act"]{color:#E9EEFB !important;}
[data-rp="rowg"],[data-rp="rowi"]{color:#E9EEFB !important;}
[data-rp="bal"] div{white-space:nowrap;}
[data-rp="amt"]{white-space:nowrap;font-size:12.5px !important;}

/* v4.2: decorative purple orbs are box-clipped by design -> remove entirely */
[data-rorb]{display:none !important;}

/* v4.3: phone feed must never clip; tighten feed typography */
[data-rp="screen"]{height:auto !important;}
[data-rp="amt"]{font-size:11.5px !important;}
[data-rp="row"]{padding:9px 10px !important;}
[data-rp="row"]>div:nth-child(2)>div:first-child{font-size:12px !important;line-height:1.3 !important;}