/* ===================================================================
   Simpan Website — global styles
   Ported 1:1 from the design's <helmet><style> block (verbatim below),
   plus :hover rules recovered from the design's style-hover attributes.
   Everything else stays as inline styles on the elements themselves,
   mirroring how the design is authored.
   =================================================================== */

html { scroll-behavior: smooth; }
body { margin: 0; background: #081019; }
a { color: #34d39b; text-decoration: none; }
a:hover { color: #5fe3b4; }
::selection { background: rgba(52,211,155,.3); }
@keyframes swFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes swFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes swRing { 0%{transform:scale(.55);opacity:.9} 100%{transform:scale(2.1);opacity:0} }
@keyframes swScan { 0%{transform:translateY(-44px)} 100%{transform:translateY(44px)} }
@keyframes swFadeUp { 0%{opacity:0;transform:translateY(28px)} 100%{opacity:1;transform:translateY(0)} }
@media (max-width: 880px) {
  [data-r="navlinks"] { display: none !important; }
}
@media (max-width: 980px) {
  [data-r="hero"] { padding: 118px 20px 84px !important; }
  [data-r="hero-grid"] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-r="web-grid"] { display: flex !important; flex-direction: column !important; gap: 14px !important; align-items: stretch !important; }
  [data-r="steps"] { order: 1; min-height: 92px; }
  [data-r="panel"] { order: 2; width: 100% !important; max-width: 380px !important; margin: 0 auto !important; }
  [data-r="panel-body"] { height: 300px !important; }
  [data-r="panel"] [data-layer] { gap: 10px !important; padding: 16px !important; }
  [data-r="qr"] { grid-template-columns: repeat(21, 6px) !important; grid-auto-rows: 6px !important; }
  [data-r="web-header"] { margin-bottom: 8px !important; }
  [data-r="web-h2"] { font-size: 25px !important; letter-spacing: -.8px !important; }
  [data-r="web-sub"] { display: none !important; }
  [data-r="web-sticky"] { padding: 66px 16px 12px !important; }
  [data-scrolly] [data-step] { display: none !important; }
  [data-scrolly] [data-step][data-on="1"] { display: flex !important; }
}
@media (max-width: 640px) {
  [data-r="sec"] { padding: 96px 20px !important; }
  [data-r="hero-h1"] { font-size: 42px !important; letter-spacing: -1.6px !important; }
  [data-r="chip-l"] { left: 0 !important; }
  [data-r="chip-r"] { right: 0 !important; }
}

/* ---- hover states (from the design's style-hover attrs; !important to
   override the elements' inline base styles) ---- */
.hv1:hover { color:#ecf4f6 !important; }
.hv2:hover { color:#ecf4f6 !important; }
.hv3:hover { color:#ecf4f6 !important; }
.hv4:hover { color:#ecf4f6 !important; }
.hv5:hover { background:#5fe3b4 !important; color:#042018 !important; }
.hv6:hover { background:#5fe3b4 !important; color:#042018 !important; }
.hv7:hover { border-color:rgba(255,255,255,.32) !important; color:#ecf4f6 !important; }
.hv8:hover { background:#5fe3b4 !important; color:#042018 !important; }
.hv9:hover { border-color:rgba(255,255,255,.32) !important; color:#ecf4f6 !important; }