:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#5b6473;
  --acc:#ea580c;
  --acc-dark:#c2410c;

  /* warme tinten */
  --warm-50:#fffaf5;
  --warm-100:#fff4e6;
  --warm-150:#f7ead8;
  --warm-200:#ead7c3;
  --line:#eadfce;

  --max:1100px;
  --gutter:32px;
  --radius:16px;
  --nav-h:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';color:var(--fg);background:var(--bg);line-height:1.6;scroll-behavior:smooth}
a{color:var(--acc);text-decoration:none}

.container{width:min(var(--max),100% - (var(--gutter)*2));margin-inline:auto}

.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid var(--line)}
.nav__wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px}

.brand{display:flex;align-items:center;gap:10px;color:inherit}
.brand img{height:42px}
.brand__name{font-weight:700;letter-spacing:.2px}

.nav__toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:0;padding:8px;border-radius:10px}
.nav__bar{display:block;width:22px;height:2px;background:#111;border-radius:2px}

.menu{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.menu a{padding:8px 10px;border-radius:10px;color:var(--fg)}
.menu a:hover{background:#f3f0ea}

.menu-panel{display:none}
.menu--panel{flex-direction:column;padding:8px 12px}
.menu--panel a{padding:12px;border-radius:12px}

/* HERO */
.hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--warm-200),var(--warm-100) 38%, #fff 100%)}
.hero__grid{display:grid;grid-template-columns:1.25fr .9fr;gap:28px;align-items:center;padding:28px 0}
h1{font-size:34px;margin:0 0 8px}
.sub{color:var(--muted);font-size:18px;margin:0 0 12px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 0}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:600;border:1px solid transparent}
.btn--primary{background:var(--acc);color:#fff}
.btn--primary:hover{background:var(--acc-dark)}
.btn--outline{background:#fff;color:var(--acc);border-color:var(--acc)}
.btn--outline:hover{border-color:var(--acc-dark);color:var(--acc-dark)}

.hero__portrait-wrap{display:flex;justify-content:center}
.portrait{width:100%;max-width:380px;aspect-ratio:1/1;border-radius:18px;border:1px solid var(--line);object-fit:cover;background:var(--warm-50)}

/* MAIN */
.main{padding:28px 0 48px}
section{padding:24px;border-radius:var(--radius);margin:18px 0;background:
  linear-gradient(180deg, var(--warm-50) 0%, #fff 60%);
border:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 14px);box-shadow:0 1px 0 rgba(0,0,0,.02)}
h2{margin:0 0 10px;font-size:22px}
ul{padding-left:18px;margin:8px 0}
ol{padding-left:18px}

.footer{padding:28px 16px 40px;text-align:center;color:var(--muted);border-top:1px solid var(--line)}

/* RESPONSIVE */
@media (max-width: 900px){
  :root{ --gutter:22px; --nav-h:60px }
  .brand img{height:36px}
  .nav__toggle{display:flex}
  .menu{display:none}
  .menu-panel{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:8px 0;z-index:19}
  .menu-panel.open{display:block}
  .hero__grid{grid-template-columns:1fr;gap:20px}
}

/* grotere logo op desktop */
@media (min-width: 1024px){
  .brand img{height:56px}
}