:root{
  --bg:#0f1724;
  --card:#0f1724;
  --muted:#9aa6c0;
  --accent:#5b8cff;
  --accent-2:#6dd3ff;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#071028 0%, #071028 40%);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1100px;margin:0 auto;padding:28px}
.site-header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:20;background:linear-gradient(180deg, rgba(7,16,40,0.6), rgba(7,16,40,0.3));border-bottom:1px solid rgba(255,255,255,0.02)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;letter-spacing:0.4px;margin:0}
.nav a{color:var(--muted);text-decoration:none;margin-left:16px}

.hero{padding:48px 0 80px}
.hero-grid{display:grid;grid-template-columns:1fr minmax(280px,480px);gap:28px;align-items:start;align-items:center;grid-auto-flow:row}
.eyebrow{color:var(--muted);margin:0 0 8px}
.hero-title{font-size:38px;margin:0 0 12px;color:#fff}
.hero-lead{color:var(--muted);line-height:1.5}
.links{margin-top:16px}
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#07213b;padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:600;margin-right:8px}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(91,140,255,0.12)}
.meta-list{list-style:none;padding:0;margin:18px 0 0;color:var(--muted)}
.meta-list li{margin-bottom:6px}

.hero-visual{position:relative}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);padding:12px;border-radius:12px;box-shadow:0 8px 30px rgba(3,7,18,0.6);position:relative;z-index:4}
.chart-card{width:100%;height:260px;padding:10px;min-height:160px}
/* Decorative background removed */

.about{padding:36px 0}
.about h3{margin:0 0 8px}
.skills{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.skills span{background:var(--glass);padding:8px 10px;border-radius:999px;color:var(--muted);font-size:13px}

.contact{padding:40px 0}
.site-footer{padding:18px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}

/* Section divider */
.divider{display:flex;align-items:center;gap:14px;margin:40px 0;justify-content:center}
.divider-line{flex:1;height:2px;background:linear-gradient(90deg,transparent,rgba(91,140,255,0.28),transparent)}
.divider-badge{display:none}

@media (max-width:880px){
  .divider{margin:28px 0}
}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:auto;margin-bottom:18px}
  .hero-content{text-align:left}
  /* decorative graphic removed */
  .hero-title{font-size:28px}
}

/* Chart canvas sizing */
#marketChart{width:100% !important;height:220px !important;display:block}

/* Make layout more zoom-resistant by constraining long lines and using flexible columns */
.hero-content{max-width:60ch}
.container{padding-left:20px;padding-right:20px}