:root{
  --bg-dark: #07140d;
  --bg-mid: #0b1f14;
  --matrix: #00ff88;
  --text: #eaffee;
  --muted: #9bd6b3;
  --card: #0f2419;
  --shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.06);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% -10%, #143822, transparent 60%),
              radial-gradient(900px 600px at 120% 110%, #0f2f1d, transparent 60%),
              linear-gradient(180deg, var(--bg-mid), var(--bg-dark));
  color:var(--text);
  font-family: 'Space Grotesk', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}
.container{ max-width:920px; margin:0 auto; padding:28px 18px 56px; }
.header{ display:flex; align-items:center; gap:18px; margin-top:14px; }
.logo-badge{ width:78px;height:78px;border-radius:22px; display:flex;align-items:center;justify-content:center;
  background: linear-gradient(180deg, #153b24, #0b2416); box-shadow: var(--shadow); border:1px solid rgba(0,255,136,.18); flex-shrink:0 }
.logo-badge img{ width:52px; height:52px; }
.headings{ display:flex; flex-direction:column; }
h1{margin:0; font-size:36px; letter-spacing:0.5px}
.subtitle{ margin-top:8px; color:var(--muted); line-height:1.5; }

.links{ display:flex; flex-direction:column; gap:16px; margin-top:22px; }
.link-card{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  background: linear-gradient(180deg, #113020, #0c2519);
  padding:16px 18px; border-radius:18px; border:1px solid rgba(0,255,136,.18);
  box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.07);
  transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration:none; color:var(--text);
}
.link-card:hover{ transform:translateY(-3px); border-color:rgba(0,255,136,.35); box-shadow:0 44px 86px rgba(0,0,0,.55), inset 0 3px 0 rgba(255,255,255,.09); }
.link-left{ display:flex; align-items:center; gap:14px; min-width:0 }
.link-left img{ width:40px; height:40px; border-radius:12px; background:#0b2416; padding:6px; flex-shrink:0 }
.link-title{ font-weight:700; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.chevron{
  width:44px; height:44px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 20%, #1b3f2b, #0b1f14);
  border:1px solid rgba(0,255,136,.5);
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.08);
  color: var(--matrix); font-size:26px; line-height:1;
}

.footer{ margin:26px 0 8px; color:var(--muted); font-size:12px; text-align:center }

.tips{ margin-top:24px; background:rgba(3,20,12,.55); border:1px solid rgba(0,255,136,.16);
  padding:14px 16px; border-radius:14px; box-shadow: var(--shadow); }
.tips h3{ margin:0 0 8px 0; font-size:18px }
.tips ul{ margin:0; padding-left:18px } .tips li{ margin:6px 0 }
.qa{ margin-top:12px; display:grid; grid-template-columns: 1fr; gap:8px }
.qa details{ background:rgba(3,20,12,.5); border:1px solid rgba(0,255,136,.14); border-radius:12px; padding:10px 12px }
.qa summary{ cursor:pointer; font-weight:700 } .qa p{ margin:8px 0 2px 0; color:#d8ffe2 }

@media (max-width:640px){
  .header{ flex-direction:row; align-items:center }
  h1{font-size:28px}
  .link-title{font-size:16px}
  .chevron{ width:42px; height:42px; font-size:24px }
}