:root{
    --bg:#0f172a;
    --bg-deep:#020617;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --accent:#38bdf8;

    --radius-lg:26px;
    --radius-md:18px;

    --container:1100px;
    --shadow-soft:0 25px 60px rgba(0,0,0,0.45);
}

/* RESET */
*{box-sizing:border-box}
body{
    margin:0;
    font-family:"Inter","Segoe UI",Arial,sans-serif;
    background:linear-gradient(180deg,var(--bg),var(--bg-deep));
    color:var(--text);
    line-height:1.6;
}

/* CONTAINER */
.container{
    max-width:var(--container);
    margin-inline:auto;
    padding:clamp(1.25rem,4vw,3rem);
}

/* HEADER */
.site-header{
    position:sticky;
    top:0;
    background:rgba(2,6,23,0.7);
    backdrop-filter:blur(10px);
    z-index:20;
}
.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.site-title{margin:0}
.site-tag{color:var(--muted);font-size:.9rem}

/* NAV */
.nav-list{
    display:flex;
    gap:1.25rem;
    list-style:none;
    padding:0;
    margin:0;
}
.nav-list a{
    color:var(--muted);
    text-decoration:none;
    padding:.4rem .75rem;
    border-radius:8px;
}
.nav-list a:hover{
    color:var(--text);
    background:rgba(56,189,248,.1);
}

/* HERO */
.hero{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:3rem;
    align-items:center;
    min-height:80vh;
}
.hero-title{
    font-size:clamp(2rem,4vw,3rem);
}
.profile-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr; /* tekst | billede */
    gap: 2.5rem;
    align-items: center;
}

.profile-image {
    display: flex;
    justify-content: center;
}
.profile-photo {
    width: 100%;
    max-width: 280px;        /* GØR BILLEDET MINDRE */
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;

    border-radius: 20px;
    background: #020617;

    box-shadow:
        0 20px 45px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Mobil */
@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }
}
/* PROFIL-SIDE BILLEDE (IKKE HERO) */
.profile-image-photo {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;

    border-radius: 20px;
    background: #020617;

    box-shadow:
        0 20px 45px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.2);
}


/* CLICKABLE SECTION LINKS */
.section-links{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:2.5rem;
}
.section-link{
    padding:0.75rem 1.6rem;
    border-radius:999px;
    border:2px solid rgba(56,189,248,0.6);
    color:var(--accent);
    text-decoration:none;
    font-weight:700;
    background:linear-gradient(
        180deg,
        rgba(56,189,248,0.08),
        rgba(56,189,248,0.02)
    );
    box-shadow:
        0 10px 25px rgba(56,189,248,0.18),
        inset 0 1px 0 rgba(255,255,255,0.35);
    transition:transform .2s ease, box-shadow .2s ease;
}
.section-link:hover{
    transform:translateY(-2px);
    box-shadow:
        0 18px 45px rgba(56,189,248,0.35),
        inset 0 1px 0 rgba(255,255,255,0.45);
}

/* SECTIONS (CARDS) */
.section{
    margin-top:5rem;
    padding:clamp(2rem,5vw,3.5rem);
    border-radius:24px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );
    box-shadow:
        var(--shadow-soft),
        inset 0 1px 0 rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
}
.section h3{
    margin-top:0;
    font-size:clamp(1.5rem,2.5vw,2rem);
    letter-spacing:.2px;
}

/* GRID + CARDS */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1.25rem;
}
.card{
    background:#e5e7eb;
    color:#020617;
    padding:1.5rem;
    border-radius:var(--radius-md);
    font-weight:600;
    box-shadow:
        0 20px 45px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25);
    transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
    transform:translateY(-4px);
    box-shadow:
        0 35px 70px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

/* PROJECTS */
.project-list{
    display:grid;
    gap:1.25rem;
}
.project-card{
    padding:2rem;
    border-radius:20px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)
    );
    box-shadow:0 18px 50px rgba(0,0,0,0.45);
    border:1px solid rgba(255,255,255,0.12);
}

/* FOOTER */
.site-footer{
    margin-top:5rem;
    padding:2rem;
    text-align:center;
    color:var(--muted);
}

/* MOBILE */
@media(max-width:900px){
    .hero{grid-template-columns:1fr}
}
/* FACT CARDS */
.fact-card{
    text-align:center;
}

.fact-card h4{
    margin:0 0 .5rem 0;
    font-size:1.1rem;
    letter-spacing:.3px;
}

.fact-card p{
    margin:0;
    font-size:0.95rem;
    color:#334155;
}