:root {
  --bg:#0f1115;
  --panel:#171a21;
  --text:#e6eaf2;
  --muted:#9aa3b2;
  --brand:#7cb342;
  --brand-900:#5a8a2f;
  --outline:#2a2f3a;
  --accent:#ffffff0f;
  --max:1200px;
}

*{box-sizing:border-box}
html{
scroll-behavior:smooth
}

body{
margin:0; 
font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; 
color:var(--text); 
background:var(--bg);
}

/* Header */
header{
  position:sticky; 
  top:0; 
  z-index:50; 
  backdrop-filter:saturate(120%) blur(8px);
  background:linear-gradient(180deg, #0f1115cc, #0f111500);
  border-bottom:1px solid var(--outline);
}

.nav{
 max-width:var(--max); 
 margin:auto; 
 display:flex; 
 align-items:center; 
 justify-content:space-between; 
 padding:14px 20px
}

.logo{
 font-weight:700; 
 letter-spacing:.5px
}

.logo span{
 color:var(--brand)
}

.nav ul{
 list-style:none; 
 display:flex; 
 gap:22px; 
 margin:0; 
 padding:0
}

.nav a{
 color:var(--muted); 
 text-decoration:none; 
 font-weight:500
}

.nav a:hover{
 color:var(--text)
}

.menu-btn{
 display:none; 
 background:none; 
 border:1px solid var(--outline); 
 color:var(--text); 
 padding:8px 10px; 
 border-radius:10px
}

/* Hero */
.hero{
  position:relative; 
  display:grid; 
  grid-template-columns:1.1fr .9fr; 
  align-items:center;
  min-height:88svh; 
  max-width:var(--max); 
  margin:0 auto; 
  padding:40px 20px 70px; 
  gap:40px;
}

.hero::before{
  content:""; 
  position:absolute; 
  inset:-10%; 
  z-index:-2;
  background:radial-gradient(1200px 600px at 70% 40%, #ffffff12, transparent 60%);
}

.headline{
 font-size:clamp(32px,5vw,64px); 
 line-height:1.05; 
 margin:0 0 8px
}

.sub{
 color:var(--muted); 
 font-size:clamp(16px,2.2vw,18px); 
 margin:0 0 28px
}

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

.btn{
 appearance:none; 
 border:none; 
 cursor:pointer; 
 border-radius:10px; 
 padding:12px 18px; 
 font-weight:600; 
 letter-spacing:.2px
}
.btn-primary{
 background:var(--brand); 
 color:#0a0f0a 
}
.btn-primary:hover{
 background:var(--brand-900)
}
.btn-ghost{
 background:transparent; 
 color:var(--text); 
 border:1px solid var(--outline)
}
.btn-ghost:hover{
 background:var(--accent)
}

/* Portrait */
.portrait-wrap{
 position: relative; 
 width: min(480px,90%); 
 justify-self: end;
 margin-bottom: 130px; /* Add spacing below portrait */
}

.portrait{
 position: relative;  
 width: 100%; 
 border-radius: 18px; 
 display: block; 
 object-fit: cover; 
 height: 520px; 
 filter: saturate(1.03);
 transform: translateY(20); /* Remove the -80px transform */
}

/* Add new style for the closing text */
.closing-text {
  text-align: center;
  max-width: 800px;
  margin: 30px auto 60px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  padding: 0 20px;
}

/* Generic sections */
section{
 max-width:var(--max); 
 margin:0 auto; 
 padding:80px 20px
}

.grid{
 display:grid; 
 gap:20px
}

/* 2-kolonne layout til kontakt-siden */
.two { 
 grid-template-columns: 1.2fr 1fr; }

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


.cards{
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr))
}

.card {
  background: var(--panel);                             /* Baggrundsfarve */
  border: 1px solid var(--outline);                     /* Kantfarve */
  padding: 22px;                                        /* Luft omkring indholdet */
  border-radius: 16px;                                  /* Bløde hjørner */
  text-align: center;                                   /* Centrerer tekst og billeder eks. FH-CONCEPT WEBSHOP */
  color: var(--brand);
}

.card h3{
margin:0 0 8px
}

.muted{
color:var(--muted)
}

.work img {
  display: block;                                    /* Sørger for, at billedet kan centreres */
  margin: 0 auto;                                    /* Centrerer billedet horisontalt */
  width: auto;                                       /* Lader billedet beholde sin naturlige bredde */
  height: auto;                                      /* Lader billedet beholde sin naturlige højde */
  max-width: 80%;                                    /* Sikrer, at billedet ikke bliver større end containeren */
  border-radius: 12px;                               /* Bevarer de bløde hjørner */
  border: 1px solid var(--outline, #333);          /* Tynd kant med farve fra variabel */
  object-fit: contain;                               /* Viser hele billedet uden beskæring */
}

/* Footer */
footer{
border-top:1px solid var(--outline); 
background:#0e1014; 
color:var(--muted)
}

.footer-inner{
max-width:var(--max); 
margin:0 auto; 
padding:26px 20px; 
display:flex; 
align-items:center; 
justify-content:space-between; 
flex-wrap:wrap; 
gap:10px
}

/* Form */
input, textarea{
width:100%; 
background:#0e1117; 
color:var(--text); 
border:1px solid var(--outline); 
border-radius:10px; 
padding:10px 12px; 
margin:6px 0 12px
}

input:focus, textarea:focus{
outline:2px solid #7cb34255
}

/* Mobile */
@media(max-width:900px){
  .hero{grid-template-columns:1fr; 
    padding-top:28px; 
    gap:28px}

  .portrait-wrap{justify-self:center}
  .nav ul{display:none}
  .menu-btn{display:inline-flex}
}

/* Fjern baggrunden bag portrættet */
.portrait-bg {
  display: none;
}

/* --- Contact section redesign --- */
.contact-card {
  overflow: hidden;
  position: relative;
  border: 1px solid var(--outline);
  border-radius: 16px;
  background: linear-gradient(160deg, #0e1117 0%, #0b0f14 100%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: transform .2s ease, box-shadow .3s ease;
}
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(124, 179, 66, 0.15);
}

.contact-head {
  margin-bottom: 18px;
}
.contact-head h3 {
  margin: 6px 0 4px;
  font-size: 1.2rem;
}

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: #1b2a13;
  color: #b9f38c;
  border: 1px solid #36521c;
}

/* Contact info rows */
.contact-rows {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.contact-row {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #0f1319;
  border: 1px solid var(--outline);
  border-radius: 12px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.contact-row:hover {
  border-color: #7cb34266;
  background: #131821;
}

/* --- Contact icons styling --- */
.contact-row .icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121821;
  border-radius: 10px;
  border: 1px solid var(--outline);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.contact-row .icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: brightness(0.9);
  transition: filter 0.2s ease;
}

.contact-row:hover .icon {
  border-color: var(--brand);
  transform: scale(1.05);
}

.contact-row:hover .icon img {
  filter: brightness(1.2);
}

/* Lysere LinkedIn-ikon */
.contact-row .icon img[alt="LinkedIn icon"] {
  filter: brightness(2.2) contrast(1.3) saturate(1.4);
}