:root {
  --mx: 3.229167%;
  --my: 34.074074%;
  --mw: 18.645833%;
  --mh: 43.518519%;

  --sx: 27.708333%;
  --sy: 39.814815%;
  --sw: 64.062500%;
  --sh: 37.037037%;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#eef3ff;
  overflow-x:hidden;

  /* Ingen gentaget træ-tiling (det var det som så "forkert" ud nede på siden) */
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(120,160,255,0.20), transparent 60%),
    radial-gradient(900px 500px at 20% 20%, rgba(255,190,120,0.10), transparent 70%),
    linear-gradient(180deg, #05060c 0%, #05060c 35%, #03040a 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: url("../assets/grain.png") 0 0 / 256px 256px repeat;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* HERO */
.hero{ padding: 14px 0 0; }
.hero-stage{
  position: relative;
  width: min(100%, 1920px);
  margin: 0 auto;
}
.hero-base{ display:block; width:100%; height:auto; }
.hero-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* Menu inside mockup panel */
.menu{
  position:absolute;
  left: var(--mx);
  top:  var(--my);
  width: var(--mw);
  height: var(--mh);
  padding: 8px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  overflow:hidden;     /* ingen intern scroll */
}
.menu-item{
  display:block;
  width:100%;
  text-decoration:none;
  color:#eef3ff;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.14);
  overflow:hidden;     /* stop highlight fra at “stikke ud” */
}
.menu-item span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-item.active{
  background: rgba(40, 210, 140, 0.16);
  border-color: rgba(40, 210, 140, 0.55);
  box-shadow: inset 0 0 0 1px rgba(40,210,140,0.35);
}

/* Screen inside mockup monitor */
.screen{
  position:absolute;
  left: var(--sx);
  top:  var(--sy);
  width: var(--sw);
  height: var(--sh);
  padding: 14px 16px;
  overflow:hidden; /* ingen intern scroll */
}
.screen-title{ font-weight: 1000; letter-spacing: 0.08em; }
.screen-sub{ margin-top: 2px; font-size: 12px; opacity: 0.75; }
.screen-list{ margin-top: 14px; display:flex; flex-direction:column; gap: 10px; }
.screen-row{ background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 12px; }
.row-title{ font-weight: 950; }
.row-sub{ opacity: 0.78; font-size: 13px; }

/* PAGE */
.page{
  width: min(980px, 92vw);
  margin: 24px auto 90px;
  padding: 0 16px;
}
.section h1{ margin:0 0 10px; font-size: 30px; }
.muted{ opacity:0.78; margin:0 0 18px; }

/* Projects one column */
.project-list{ display:flex; flex-direction:column; gap: 14px; }
.project-card{
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(2px);
}
.project-title{ font-weight: 950; font-size: 18px; }
.project-desc{ opacity: 0.78; font-size: 13px; margin-top: 4px; }

.actions{ display:flex; gap: 10px; margin-top: 14px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; height: 40px; padding: 0 14px; border-radius: 10px; text-decoration:none; font-weight: 950; letter-spacing: 0.06em; border: 1px solid rgba(255,255,255,0.14); color:#0b0d12; }
.btn.blue{ background: linear-gradient(180deg, #4aa3ff, #1f58ff); }
.btn.green{ background: linear-gradient(180deg, #4cffb0, #1fae62); }
.btn.gold{ background: linear-gradient(180deg, #ffd26a, #d39a21); }

/* Mobile: fallback (ingen overlay-huller, fordi det ellers altid flytter sig) */
@media (max-width: 900px){
  .hero-overlay{ display:none; }
  .menu, .screen{
    position:relative;
    left:auto; top:auto;
    width: min(92vw, 900px);
    height:auto;
    margin: 12px auto 0;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
  }
}