/* Base */
:root{
  --bg:#0b0f14;
  --panel:#0f151d;
  --panel-alt:#0c1219;
  --text:#e6edf3;
  --muted:#a9b4c0;
  --accent:#5be49b;
  --accent-2:#49a7ff;
  --ring:#1f8cfa55;
  --border:#1c2330;
  --shadow:0 10px 30px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 800px at 20% -20%,#122034 0%, transparent 60%), var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"JetBrains Mono", monospace; line-height:1.15}
h1{font-size:clamp(32px,5vw,56px); margin:0 0 12px}
h2{font-size:clamp(24px,3.2vw,36px); margin:0 0 12px}
h3{font-size:clamp(18px,2vw,22px); margin:0 0 8px}
p{margin:0 0 12px; color:var(--muted)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:"JetBrains Mono",monospace; color:#b5f5d7}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.section{padding:80px 0}
.section.alt{background:linear-gradient(to bottom, var(--panel-alt), transparent)}
.two-col{display:grid; grid-template-columns:1.2fr .8fr; gap:28px}
.grid{display:grid; gap:20px}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:linear-gradient(120deg,rgba(255,255,255,.02),transparent);
  border:1px solid var(--border); border-radius:14px; padding:18px;
  box-shadow:var(--shadow);
}
.card.thin{padding:16px}
.card.profile{display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center}
.card.profile img{width:120px; height:120px; border-radius:12px; object-fit:cover; border:1px solid var(--border)}
.card.code pre{margin:0; white-space:pre; overflow:auto}
.badge{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:#0b2438; color:#9fd1ff; border:1px solid #14314e; margin-bottom:8px}
.tags{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0}
.tags li{border:1px dashed #2a3648; padding:4px 8px; border-radius:999px; font-size:12px; color:#c4cede}
.bullets{list-style:none; padding:0; margin:12px 0 0}
.bullets li{display:flex; align-items:center; gap:10px; color:#c4cede}
.bullets .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(11,15,20,.6); backdrop-filter:saturate(1.2) blur(10px);
  padding:10px 16px; border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:#fff}
.logo{width:28px; height:28px}
.nav{display:flex; gap:18px}
.nav a{color:#cfe3ff}
.nav .cta{color:#0b0f14; background:var(--accent); padding:8px 12px; border-radius:10px; text-decoration:none}
.menu{display:none; background:none; border:0; padding:8px; cursor:pointer}
.menu span{display:block; width:22px; height:2px; background:#cfe3ff; margin:5px 0; border-radius:2px}

/* Drawer for mobile */
.drawer{
  position:fixed; inset:0 0 0 auto; width:72%; max-width:320px;
  background:var(--panel); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .25s ease; z-index:60; padding:20px;
}
.drawer.open{transform:translateX(0)}
.drawer nav{display:grid; gap:12px}
.drawer a{color:#cfe3ff; font-size:18px}

/* Hero */
.hero{position:relative; padding:120px 0 80px}
.hero-inner{max-width:840px; margin:0 auto; padding:0 20px; text-align:center}
.hero .lead{font-size:18px}
.hero .accent{background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-actions{display:flex; gap:12px; justify-content:center; margin:18px 0 6px}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--border); text-decoration:none}
.btn.primary{background:var(--accent); color:#0b0f14; border-color:transparent; font-weight:700}
.btn.ghost{color:#cfe3ff}
.cred{list-style:none; display:flex; gap:18px; justify-content:center; padding:0; margin:12px 0 0}
.cred li{color:#9fb0c6}

/* Contact form */
.contact-form{max-width:720px}
.contact-form .row{display:grid; gap:6px; margin-bottom:12px}
.contact-form input, .contact-form textarea{
  background:#0e1620; border:1px solid #1b2534; color:#e6edf3; padding:10px 12px; border-radius:10px;
}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--ring)}
.contact-form .checkbox{display:flex; align-items:center; gap:8px; color:#c4cede}
.contact-form .actions{display:flex; align-items:center; gap:14px}
#formMsg{min-height:1.4em; color:#96ffd1}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:28px 0; background:rgba(11,15,20,.7)}
.site-footer .container{display:flex; align-items:center; justify-content:space-between}
.to-top{padding:6px 10px; border:1px solid var(--border); border-radius:8px}

/* Code grid canvas backdrop */
#codeGrid{
  position:fixed; inset:0; z-index:-1; opacity:.16;
  filter:contrast(120%);
}

/* Responsive */
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .nav{display:none}
  .menu{display:block}
  .hero{padding-top:100px}
}

.owner-name-main {
  color: #fff; /* vit text */
}

.owner-name-alias {
  color: #999;    /* ljusgrå text */
  opacity: 0.8;   /* lite genomskinlig */
  font-style: italic; /* valfritt för att skilja ut ännu mer */
}