/* HOUNDLINE · sistem dasar: warna, huruf, komponen kecil yang dipakai landing & app */
:root{
  --bg:#070605;            /* hitam hangat, bukan hitam biru */
  --bg-2:#0c0a08;
  --panel:#110e0b;
  --panel-2:#16120e;
  --line:rgba(255,190,110,.10);
  --line-2:rgba(255,190,110,.18);
  --text:#f4ece2;
  --sub:#b3a593;
  --dim:#7b6f61;
  --amber:#ffae2b;         /* amber neon utama */
  --amber-2:#ff8a00;
  --amber-soft:rgba(255,174,43,.12);
  --amber-line:rgba(255,174,43,.42);
  --up:#7fe3a0;            /* naik: hijau pucat, bukan hijau terang */
  --down:#ff6b5e;
  --f-display:"Saira ExtraCondensed","Saira Condensed",Impact,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--amber);color:#120a00}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum"}
.amber{color:var(--amber)}
.up{color:var(--up)} .down{color:var(--down)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:.01em;transition:transform .15s var(--ease),background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-amber{background:var(--amber);color:#160c00;box-shadow:0 0 0 1px rgba(255,174,43,.5),0 10px 40px -10px rgba(255,150,20,.7)}
.btn-amber:hover{background:#ffc25a;transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line-2);background:rgba(20,14,8,.45);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:var(--amber-line);color:var(--amber)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn:active{transform:scale(.97)}

/* label kecil */
.eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font:500 11.5px/1 var(--f-mono);letter-spacing:.04em;border:1px solid var(--line-2);color:var(--sub);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);flex:none}
.dot.live{animation:beat 1.6s ease-in-out infinite}
@keyframes beat{50%{box-shadow:0 0 0 6px rgba(255,174,43,0)}}

/* label dompet (Hunter, Sniper, ...) */
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font:600 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tag.hunter{background:rgba(255,174,43,.16);color:var(--amber)}
.tag.whale{background:rgba(120,190,255,.14);color:#9cc8ff}
.tag.sniper{background:rgba(255,107,94,.14);color:var(--down)}
.tag.dev{background:rgba(200,150,255,.14);color:#d2b2ff}
.tag.bot{background:rgba(180,180,180,.12);color:#bdbdbd}
.tag.fresh{background:rgba(127,227,160,.12);color:var(--up)}

/* kartu CA (dipakai di hero landing & app) */
.ca{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(14,10,7,.72);backdrop-filter:blur(14px);max-width:100%}
.ca-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.ca-k{font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ca-v{font:500 14px/1.2 var(--f-mono);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-v.wait{color:var(--amber)}
.ca-b{display:flex;gap:6px;margin-left:auto;flex:none}
.ca-b button,.ca-b a{height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.ca-b button:hover,.ca-b a:hover{border-color:var(--amber-line);color:var(--amber)}
.ca-b .buy{background:var(--amber);color:#160c00;border-color:transparent}
.ca-b .buy:hover{background:#ffc25a;color:#160c00}
.ca-b [disabled]{opacity:.4;pointer-events:none}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:90;padding:11px 16px;border-radius:12px;background:#1a140e;border:1px solid var(--amber-line);font-size:14px;transition:.25s var(--ease);max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}