:root{
  --bg:#fff4ec;
  --orange:#ff8a2b;
  --orange-dark:#e66f10;
  --text:#1c1c1c;
  --muted:#777;
}

*{box-sizing:border-box;font-family:Inter,system-ui}
body{margin:0;background:var(--bg);color:var(--text)}

/* ================= HEADER ================= */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0px 42px;
}

.logo-wrap{display:flex;align-items:center;gap:14px}

.logo-icon{width:42px;height:42px}
.logo-wrap span{font-size:28px;font-weight:800;color:var(--orange)}
.logo-wrap span{
  padding:10px 18px;
  border-radius:14px;
}

nav a{
  position:relative;
  margin-left:24px;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  cursor:pointer;
  transition:.25s;

  color:#ff8a2b;
  font-weight:700;

}

nav a:hover{
  background:rgba(255,138,43,.15);
  color:#ff6a00;
}
nav a:hover::after{transform:scaleX(1)}

nav a::after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:4px;
  height:2px;
  background:var(--orange);
  border-radius:2px;
  transform:scaleX(0);
  transition:.25s;
}

.nav-login{
  background:linear-gradient(135deg,#ff8a2b,#ff6a00);
  color:white!important;
  box-shadow:0 8px 20px rgba(255,138,43,.4);
}
.nav-login:hover{
  background:linear-gradient(135deg,#ff9a45,#ff7a10);
  box-shadow:0 12px 28px rgba(255,138,43,.55);
  transform:translateY(-1px);
}

/* ================= HERO ================= */

.hero-wrap{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(160deg,
      #ff9a3d 0%,
      #ff7a18 35%,
      #ff5f00 70%,
      #e94f00 100%
    );
  color:white;
  padding:80px 0;
  box-shadow:
    inset 0 -180px 240px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.hero{
  display:grid;
  grid-template-columns: minmax(0,1fr) 480px;
  gap:64px;
  align-items:center;
}
.hero h1{
  font-size:64px;
  line-height:1;
  letter-spacing:-2px;
}

.hero h1 span{
  color:rgba(255,255,255,.35);
  font-weight:800;
}

.hero p{
  font-size:20px;
  line-height:1.6;
  color:rgba(255,255,255,.9);
}

/* logo + title row */
.hero-title-row{
  display:flex;
  align-items:center;
  gap:28px;
}

.hero-logo{
  width:160px;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.25));
}

/* ================= CTA (hero only) ================= */
.cta{margin-top:40px;display:flex;gap:16px}

.button{
  padding:16px 28px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  border:none;
}

.cta .primary{
  background:linear-gradient(135deg,#fff,#ffe0c4);
  color:#ff7a10;
  font-weight:900;
  padding:18px 36px;
  border-radius:16px;
  box-shadow:
    0 16px 50px rgba(255,138,43,.55),
    inset 0 -3px 0 rgba(255,138,43,.35);
  transition:.25s cubic-bezier(.2,.8,.2,1);
}

.cta .primary:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:
    0 24px 70px rgba(255,138,43,.75),
    inset 0 -4px 0 rgba(255,138,43,.45);
}

.cta .secondary{
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.7);
  color:white;
  padding:18px 32px;
  border-radius:14px;
  backdrop-filter:blur(6px);
  transition:.25s;
}
.cta .secondary:hover{
  background:rgba(255,255,255,.28);
  transform:translateY(-2px);
}

/* ================= HERO CARD ================= */

.hero-card{
  /* neutral soft glass (bukan putih, bukan orange) */
  backdrop-filter: blur(48px) saturate(115%);
  -webkit-backdrop-filter: blur(48px) saturate(115%);

  color:#111;

  justify-self:start;
  margin-left:-32px;
  width:125%;

  background: linear-gradient(180deg,#fff7ee,#fff1e3);
  border-radius: 26px;
  padding: 28px;
  box-shadow:
    0 12px 30px rgba(255,120,40,0.18),   /* shadow dekat (tajam) */
    0 60px 140px rgba(255,120,40,0.25);  /* ambient glow */
}

.hero-card-header{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.18em;
  font-weight:900;
  color:#ff7a10;
  margin-bottom:18px;
}


.hero-card.terminal{
  /* premium neutral glass */
  background: rgba(232, 236, 242, 0.34);
  backdrop-filter: blur(56px) saturate(120%);
  -webkit-backdrop-filter: blur(56px) saturate(120%);

  color:#2a1a0e;
  border-radius:24px;
  padding:18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;

  box-shadow:
    /* warm light from hero */
    0 90px 200px rgba(255, 95, 25, 0.22),
    /* real depth */
    0 40px 120px rgba(0, 0, 0, 0.40),
    /* contact shadow */
    0 12px 36px rgba(0, 0, 0, 0.22);
}
.terminal-header{
  font-weight:500;
  font-size:11px;            /* lebih kecil */
  margin-bottom:8px;
  letter-spacing:.02em;     /* hampir normal */
  text-transform:none;     /* biar lebih natural */

  color:rgba(255,255,255,.85);
}

.terminal-header .cond{
  display:block;
  font-size:10px;           /* kecil & subtle */
  margin-top:3px;

  color:rgba(255,255,255,.55);
  font-weight:400;
  letter-spacing:0;
}

.terminal-table{
  background: linear-gradient(
    180deg,
    #2a1207 0%,
    #120703 80%
  );
  border-radius: 18px;
  padding: 5px;
  height: 360px;

  box-shadow:
    inset 0 0 0 1px rgba(255,150,80,0.18),
    inset 0 12px 30px rgba(0,0,0,0.65),
    0 20px 60px rgba(255,120,40,0.25);

 background: linear-gradient(
    180deg,
    rgba(255,255,255,0.9),
    rgba(255,235,215,0.85)
  );
  border-radius: 16px;
  padding: 10px;
  height: 360px;

  box-shadow:
    inset 0 0 0 1px rgba(255,138,43,0.2),
    inset 0 10px 30px rgba(255,138,43,0.12),
    0 30px 80px rgba(255,138,43,0.25);    
}

/* scrollbar – biar kelihatan terminal grade */
.terminal-table::-webkit-scrollbar{
  width: 6px;
}
.terminal-table::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.4);
  border-radius: 10px;

  background:#ffe1c6;

}
.terminal-table::-webkit-scrollbar-thumb{
  background: linear-gradient(#ff9a45,#ff6a00);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);

  background:linear-gradient(#ff9a45,#ff6a00);

}

.t-head, .t-row{
  display:grid;
  grid-template-columns:80px 50px 60px 50px 60px 60px 60px 60px 50px;
  gap:4px;
  font-size:10px;
}

.t-head{
  color:#ffaa44;
  padding-bottom:4px;
  border-bottom:1px solid #33210f;
  margin-bottom:6px;

   color:#ff7a10;
  font-weight:800;
  border-bottom:1px solid rgba(255,138,43,0.3);

}

.t-row{
  padding:4px 0;
  border-bottom:1px solid #1a120a;

  color:#4a2500;
  border-bottom:1px solid rgba(255,138,43,0.15);

}

.good{color:#0fbf8c}
.bad{color:#ff4d4d}
.mid{color:#ff7a18}

.stat{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid #eee;
  font-weight:600;
}

.system-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:48px;
}

.system-card{
  background:linear-gradient(180deg,#fff,#fff7ef);
  border-radius:20px;
  padding:28px;
  border:1px solid rgba(255,138,43,.15);
  box-shadow:0 20px 50px rgba(0,0,0,.04);
  transition:.3s ease;
  position:relative;
}

.system-card:hover{
  transform:translateY(-6px);
  box-shadow:0 40px 80px rgba(255,138,43,.18);
  border-color:rgba(255,138,43,.5);
}

.system-title{
  font-size:11px;
  letter-spacing:.12em;
  color:#ff8a2b;
  font-weight:800;
  opacity:.9;
}

.system-name{
  font-size:20px;
  font-weight:800;
  margin-top:6px;
}

.system-desc{
  margin-top:10px;
  font-size:15px;
  line-height:1.6;
  color:#555;
}
/* ================= SECTIONS ================= */
.section{max-width:1200px;margin:20px auto;padding:0 48px}
.section h2{font-size:48px;margin-bottom:24px}

.grid,.pricing-grid,.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.card{
  background:white;
  padding:32px;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.05);
}

.price{font-size:42px;font-weight:800;color:var(--orange)}
.info-pricing{
                display: grid;
                grid-template-columns: 1.2fr 1fr;
                gap: 64px;
                align-items: center;
                padding: 64px;
                border-radius: 28px;
                background: linear-gradient(
                  180deg,
                  rgba(255, 255, 255, 0.07),
                  rgba(255, 255, 255, 0.02)
                );
                border: 1px solid rgba(255, 255, 255, 0.14);
                box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12),
                  inset 0 1px 0 rgba(255, 255, 255, 0.08);
                max-width: 100%;
}
/* ================= MODALS ================= */
.modal-bg{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}

.modal{
  background:white;
  padding:32px;
  border-radius:20px;
  width:360px;
  position:relative;
}

.modal h3{margin-top:0}
.modal input{
  width:100%;
  padding:14px;
  margin-top:16px;
  border-radius:10px;
  border:1px solid #ddd;
}

.modal button{width:100%;margin-top:24px}

.close{
  position:absolute;
  top:14px;
  right:18px;
  font-size:22px;
  cursor:pointer;
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 64px;
}

.pulse{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#33ff88;
  box-shadow:0 0 0 rgba(51,255,136,.8);
  animation:pulse 1.8s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(51,255,136,.7)}
  70%{box-shadow:0 0 0 10px rgba(51,255,136,0)}
  100%{box-shadow:0 0 0 0 rgba(51,255,136,0)}

  0%{opacity:1}
  50%{opacity:.4}
  100%{opacity:1}
}

.signal-cell {
  animation: pulse 2.5s ease-in-out infinite;
}
/* Metrics */
.metric strong{
  font-size:18px;
}

.metric.pnl strong{
  color:#33ff88;
}


.hero-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:24px;
}

.metric{
  font-size:13px;
  display:flex;
  justify-content:space-between;
  font-weight:700;

  background:linear-gradient(180deg,#1a1a1a,#0f0f0f);
  border-radius:14px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 30px rgba(0,0,0,.4);
}

.metric span{
  display:block;
  font-size:12px;
  letter-spacing:.5px;
  color:#aaa;
  margin-bottom:6px;
}

.metric strong{
  font-size:28px;
  font-weight:800;
  color:white;
}

/* PNL special */
.metric.pnl{
  background:linear-gradient(180deg,#0c1a12,#07120c);
  border:1px solid rgba(0,255,128,.25);
  box-shadow:
    0 0 0 1px rgba(0,255,128,.08),
    0 12px 40px rgba(0,255,128,.15);
}

.metric.pnl span{
  color:#7cffb0;
}

.metric.pnl strong{
  color:#3cff95;
  text-shadow:
    0 0 12px rgba(60,255,149,.6),
    0 0 2px rgba(60,255,149,.8);
}
  .hero-left {
    align-items: flex-start;
    text-align: left;
    padding-left: 6px;   /* ⬅️ geser dikit ke kiri */
  }


header{
  position:relative;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 48px;

  /* SAME as hero background */
  background:linear-gradient(160deg,#ff8a2b,#ff7a10,#ff6a00);
}
header .logo-wrap span{
  color:white;
  font-weight:900;
  letter-spacing:.02em;
}
nav a{
  color:white;
  opacity:.85;
}
nav a:hover{

  background:white;
  opacity:.45;

}
nav a::after{
  background:white;
}
.nav-login{
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.35);
  color:white!important;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

.nav-login:hover{
   color:white;
  background:rgba(255,255,255,.28);
  transform:translateY(-1px);

}
/* ===== HEADER MODES ===== */

/* Landing = orange hero header */
body.landing header{
  background:linear-gradient(160deg,#ff8a2b,#ff7a10,#ff6a00);
}

body.landing header .logo-wrap span,


/* App / Dashboard = normal clean header */
body.app header{
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}

body.app header .logo-wrap span{
  color:var(--orange);
}

body.app nav a{
  color:var(--text);
}

body.app nav a::after{
  background:var(--orange);
}
.engine-zone{
  background:
    radial-gradient(1200px 600px at 20% -5%, rgba(255,138,43,0.18), transparent 40%),
    linear-gradient(180deg,#1c1c1c,#0f0f0f);
  color:white;
  padding:120px 0 160px;
  margin-top:120px;
}
.engine-zone .engine-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-radius:28px;
  padding:64px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:64px;
}


@media (max-width: 900px){
  .engine-zone{
    background:
      radial-gradient(800px 400px at 50% 0%, rgba(255,138,43,0.18), transparent 60%),
      linear-gradient(180deg,#1c1c1c,#0f0f0f);
    padding:80px 0 120px;
    margin-top:80px;
  }
}
.engine-zone h2,
.engine-zone h3{
  color:white;
}

.engine-zone p{
  color:rgba(255,255,255,.75);
}
footer.footer{
  background:linear-gradient(180deg,#1c1c1c,#0f0f0f);
  color:rgba(255,255,255,.75);
  text-align:center;
  padding:96px 48px;
  border-top:1px solid rgba(255,255,255,.08);
}

footer.footer strong{
  color:var(--orange);
  font-weight:900;
  letter-spacing:.04em;
}
.qr-box {
  width: 280px;
  height: 280px;
  margin: 24px auto;
  background: white;
  padding: 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}


#loginModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10,10,15,0.75);
  backdrop-filter: blur(2px);
  z-index: 999999;
}

#loginModal.show {
  display: flex !important;
}

#loginModal .login-card {
  position: relative !important;
  margin: 0 !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  max-width: 620px;
  width: 80%;
  background: white;
  border-radius: 24px;
  padding: 32px;
}
#walletAddress{
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  font-size: 11px;
  color: #aeb4bf;
  word-break: break-all;
  text-align: center;
  font-family: monospace;
}
.hint{
  margin-top: 14px;
  font-size: 12px;
  color: #8a8f98;
  text-align: center;
}

#walletSeed{
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.6;
color: #2e3a4d;  word-break: break-word;
  text-align: center;
  filter: blur(6px);
  cursor: pointer;
  user-select: none;
  transition: filter .2s ease;
}

#walletSeed.revealed{
  filter: none;
}

.mono{
  font-size:8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
#walletStatus{ font-size:11px }
/* ================= IMPORT WALLET ================= */

.import-wallet-card{
  background: linear-gradient(180deg,#fff7ee,#fff1e3);
  border-radius: 26px;
  padding: 28px;
  box-shadow:
    0 12px 30px rgba(255,120,40,0.18),
    0 60px 140px rgba(255,120,40,0.25);
  border:1px solid rgba(255,138,43,.18);
}

.import-wallet-card h2{
  margin:0;
  font-size:26px;
  font-weight:900;
  color:#ff7a10;
}
.import-wallet-card h3{
  margin:0;
  color:#ff7a10;
}


.import-wallet-card .subtitle{
  margin-top:6px;
  font-size:14px;
  color:#a15a20;
}

/* Tabs */
.import-tabs{
  display:flex;
  gap:12px;
  margin:24px 0 20px;
}

.import-tabs .tab{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,138,43,.08);
  border:1px solid rgba(255,138,43,.15);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  color:#c76410;
}

.import-tabs .tab.active{
  background:linear-gradient(135deg,#ff8a2b,#ff6a00);
  color:white;
  box-shadow:0 8px 20px rgba(255,138,43,.5);
  border:none;
}

/* Inputs */
.import-wallet-card .field{
  margin-bottom:14px;
}

.import-wallet-card label{
  display:block;
  font-size:11px;
  letter-spacing:.1em;
  font-weight:900;
  color:#ff7a10;
  margin-bottom:6px;
}

.import-wallet-card input,
.import-wallet-card textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,138,43,.25);
  background:#fffaf6;
  font-size:13px;
  font-weight:600;
  outline:none;
}

.import-wallet-card textarea{
  min-height:96px;
  resize:none;
}

/* Buttons */
.import-wallet-card .primary-btn{
  width:100%;
  margin-top:12px;
  padding:16px;
  border-radius:16px;
  background:linear-gradient(135deg,#ff8a2b,#ff6a00);
  border:none;
  color:white;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 14px 40px rgba(255,138,43,.55);
}

.import-wallet-card .primary-btn:hover{
  transform:translateY(-2px);
}

/* Notes */
.security-note{
  margin-top:14px;
  font-size:11px;
  color:#9a5c25;
  line-height:1.5;
}

/* Radio */
.radio-group{
  display:flex;
  gap:18px;
  margin-bottom:14px;
  font-size:12px;
  font-weight:700;
  color:#c46810;
}

/* Tab system */
.tab-content{ display:none }
.tab-content.active{ display:block }
.import-wallet-card{
  position: relative;
  z-index: 50;
  pointer-events: auto;
}
/* FORCE modal wallet mode */
.wallet-view{
  display: none !important;
}
.wallet-view.active{
  display: block !important;
}

/* ===== Create / Import mode switch ===== */

.wallet-mode-tabs{
  display:flex;
  border-radius:0;              /* ⬅️ kotak */
  overflow:hidden;
  margin-bottom:24px;
}

.wallet-tab{
  flex:1;
  padding:14px 10px;
background:rgba(255,138,43,0.08);   /* idle tab */
  border:none;
  border-right:2px solid rgba(255,138,43,.25);
  font-weight:800;
  font-size:13px;
  color:#c86a15;
  cursor:pointer;
  transition:.15s ease;
}

.wallet-tab:last-child{
  border-right:none;
}

.wallet-tab:hover{
  background:#ffe6d2;
}

/* Active tab = dark orange bar */
.wallet-tab.active{
  background:#e66f10;   /* ⬅️ bukan CTA orange */
  color:white;
}
#walletQRBox{
  display:flex;
  justify-content:center;
  margin:20px 0;
}

#walletQR{
  width:180px !important;
  height:180px !important;
  max-width:70%;
  object-fit:contain;
  background:white;
  padding:12px;
  border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
}
/* ===== Import mode switch (clean segmented) ===== */

.import-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:20px 0 18px;
}

.import-tabs .tab{
  padding:14px 10px;
  background:#f2e1d2;        /* idle – soft bronze */
  border:none;
  font-weight:800;
  font-size:11px;
  color:#6b3a12;             /* deep brown-orange */
  cursor:pointer;
  transition:.15s ease;
}

.import-tabs .tab:hover{
  background:#d9a070;        /* hover – copper */
  color:#3a1d08;
}

/* active = dark amber (NOT CTA orange) */
.import-tabs .tab.active{
  background:#b87333;        /* bronze */
  color:white;
}

.wallet-address-box{
  margin-top:14px;
  padding:14px 16px;
  background:linear-gradient(180deg,#fff,#fff2e6);
  border:1px solid rgba(255,138,43,.35);
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 30px rgba(255,138,43,.18);
  position:relative;
}

#walletAddress{
  display:block;
  font-size:11px;
  color:#000000;
  word-break:break-all;
  text-align:center;
}
.wallet-link{
  color:#ff6a00;
  font-weight:800;
  text-decoration:none;
  word-break:break-all;
}

.wallet-link:hover{
  text-decoration:underline;
}
.wallet-icons{
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  display:flex;
  gap:10px;
}

.wallet-icons .icon{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(255,138,43,.12);
  cursor:pointer;
  font-size:14px;
  user-select:none;
  transition:.15s ease;
}

.wallet-icons .icon:hover{
  background:rgba(255,138,43,.25);
  transform:scale(1.1);
}

.copy-icon svg{
  width:16px;
  height:16px;
  fill:#ff6a00;
}
.copy-toast{
  display:none;
  position:absolute;
  background:#ff7a10;
  color:white;
  font-size:11px;
  padding:6px 10px;
  border-radius:8px;
  font-weight:700;
  opacity:0;
  transform:translateY(6px);
  transition:.2s ease;
  pointer-events:none;
  box-shadow:0 6px 18px rgba(255,122,16,.5);
}

.copy-toast.show{
  opacity:1;
  transform:translateY(0);
}

/* ===== Password tooltip ===== */
.pw-tooltip{
  position:absolute;
  background:#111;
  color:#fff;
  font-size:11px;
  line-height:1.4;
  padding:8px 10px;
  border-radius:10px;
  max-width:240px;
  z-index:9999;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:.18s ease;
}

/* Arrow */
.pw-tooltip::after{
  content:"";
  position:absolute;
  top:-6px;
  left:16px;
  border-width:6px;
  border-style:solid;
  border-color:transparent transparent #111 transparent;
}

.pw-tooltip.show{
  opacity:1;
  transform:translateY(0);
}

/* Mobile */

@media (max-width: 900px) {
  .system-grid{grid-template-columns:1fr}

  /* Hero becomes vertical */
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 24px;
    margin: 0;

    display:flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }

  /* Keep hero text block clean */
  .hero-left {
    align-items: center;
    text-align: center;
  }

  .hero-title-row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .hero-logo {
    width: 200px;        /* ⬅️ dari 110px → 150px */
    margin: 8px auto 12px;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,0.25));
  }

  .hero h1 {
    font-size: 42px;
    line-height: 1.05;
    text-align: center;
  }

  .hero p {
    font-size: 16px;
    text-align: center;
    max-width: 100%;
  }

  .cta {
    width: 100%;
    align-items: center;
  }

  .cta .button {
    width: 100%;
    max-width: 320px;
  }

  .hero-card{
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-self: stretch !important;
    border-radius: 18px;
  }

  /* Terminal juga full */
  .hero-card.terminal{
    width: 100%;
  }

  /* Terminal table jangan overflow horizontal */
  .terminal-table{
    width: 100%;
    overflow: hidden;
  }

  /* Grid kolom lebih rapat di mobile */
  .t-head,
  .t-row{
    grid-template-columns:
      60px   /* Symbol */
      40px   /* Age */
      50px   /* Curve */
      40px   /* Holders */
      50px   /* Top10 */
      50px   /* Health */
      50px   /* 5m% */
      50px   /* MC */
      40px;  /* Δ */
  }

  /* Font scale otomatis */
  .terminal-header{
    font-size: 11px;
  }

  .terminal-header .cond{
    font-size: 10px;
  }

  .t-head{
    font-size: 10px;
  }

  .t-row{
    font-size: 10px;
  }

  .hero-wrap{
    padding: 48px 0 72px;
  }

}

@media (max-width: 900px) {

  /* Hancurkan layout hero desktop */
  .hero-wrap,
  .container,
  .hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Paksa terminal keluar dari grid */
  .hero-card.terminal {
    position: relative !important;

    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;

    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 12px !important;

    border-radius: 0 !important;
  }

  /* Tinggi terminal = layar */
  .terminal-table {
    max-height: none !important;
    overflow-y: auto !important;
  }
}
@media (max-width: 900px) {

  /* Kembalikan layout konten hero (kiri) */
  .hero-left {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .cta {
    width: 100%;
    justify-content: center;
  }

  .cta .button {
    max-width: 320px;
    width: 100%;
  }

}

@media (max-width: 900px) {
  .info-pricing {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }

  .info-pricing > div {
    padding: 0 !important;
    border: none !important;
  }
}
@media (max-width: 900px) {
  .hero-title-row {
    margin-top: 24px;
  }

  .hero-logo {
    display: block;
    margin-top: 8px;
  }
}

@media (max-width: 900px) {
  .hero {
    align-items: stretch !important;   /* allow full width children */
  }

  .hero-left {
    align-self: center;                /* only this stays centered */
    max-width: 420px;
    width: 100%;
  }

  .hero-card {
    align-self: stretch;               /* force full width */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  .hero-wrap {
    overflow-x: hidden;
  }
}
@media (max-width: 900px) {
  .hero {
    display: block !important;   /* ⬅️ MATIKAN FLEX */
  }

  .hero-left {
    margin: 0 auto 32px;
    max-width: 420px;
    text-align: center;
  }

  .hero-terminal-wrap {
    width: 100vw;                /* ⬅️ PAKAI VIEWPORT */
    margin-left: calc(50% - 50vw);
  }

  .hero-card.terminal {
    width: 100vw;
    border-radius: 0;
  }
}