/* larslindemann.dk — v1.0.0 */
:root{
  --bg:#080b12; --bg2:#0c111c; --panel:#111725; --panel2:#151d2e;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --txt:#e9edf5; --dim:#94a1b8; --dim2:#6f7d95;
  --acc:#4d93ff; --acc-soft:rgba(77,147,255,.14); --acc-line:rgba(77,147,255,.38);
  --ok:#3ddc97; --err:#ff6b6b;
  --max:1140px; --r:14px;
  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--f); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--panel); padding:10px 16px; border-radius:8px}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(8,11,18,.78);
     backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:20px; height:68px}
.brand{display:flex; align-items:center; gap:12px; color:var(--txt); text-decoration:none; margin-right:auto}
.brand:hover{text-decoration:none}
.brand-mark{width:26px; height:26px; border-radius:7px; flex:none;
  background:conic-gradient(from 210deg, var(--acc), #7b5cff 40%, #2ee6c0 75%, var(--acc));
  box-shadow:0 0 0 1px var(--line2), 0 6px 18px rgba(77,147,255,.28)}
.brand-txt{display:flex; flex-direction:column; line-height:1.2}
.brand-txt b{font-size:15.5px; letter-spacing:-.01em}
.brand-txt i{font-style:normal; font-size:11.5px; color:var(--dim2); letter-spacing:.02em}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{color:var(--dim); font-size:14.5px; text-decoration:none}
.nav-links a:hover{color:var(--txt)}
/* .nav-links a er mere specifik end .btn — uden dette står Kontakt-knappens
   tekst dæmpet grå på blå bund (dårlig kontrast). */
.nav-links a.btn{color:#04101f}
.nav-links a.btn:hover{color:#04101f}
.lang{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.lang button{background:none; border:0; color:var(--dim2); font:inherit; font-size:12px;
  font-weight:600; letter-spacing:.04em; padding:6px 9px; cursor:pointer}
.lang button.on{background:var(--acc-soft); color:var(--txt)}
.lang button:hover{color:var(--txt)}

/* ---------- buttons ---------- */
.btn{display:inline-block; background:var(--acc); color:#04101f; font-weight:650;
  font-size:15px; padding:13px 22px; border:1px solid transparent; border-radius:10px;
  cursor:pointer; text-decoration:none; transition:transform .15s, box-shadow .15s, background .15s;
  font-family:inherit}
.btn:hover{text-decoration:none; transform:translateY(-1px); box-shadow:0 10px 26px rgba(77,147,255,.3)}
.btn-ghost{background:transparent; color:var(--txt); border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--acc); box-shadow:none}
.btn-sm{padding:8px 15px; font-size:13.5px; border-radius:8px}

/* ---------- sections ---------- */
section{padding:96px 0; position:relative}
.band{background:var(--bg2); border-block:1px solid var(--line)}
.eyebrow{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc); font-weight:650; margin:0 0 14px}
.sec-h{font-size:clamp(27px,3.6vw,40px); margin:0 0 34px; max-width:22ch}
.lead{font-size:19px; color:var(--dim); max-width:66ch}
.lead.center{margin-inline:0; text-align:left}
.big{font-size:19.5px; color:var(--txt)}
.quiet{color:var(--dim)}
.tiny{font-size:13px}

/* ---------- hero ---------- */
.hero{padding:104px 0 88px; overflow:hidden; border-bottom:1px solid var(--line)}
.grid-bg{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 460px at 18% -10%, rgba(77,147,255,.20), transparent 62%),
    radial-gradient(760px 420px at 96% 8%, rgba(123,92,255,.14), transparent 60%),
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px) 0 0/ 62px 62px,
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px) 0 0/ 62px 62px;
  mask-image:linear-gradient(#000 0%, #000 45%, transparent 100%)}
.hero-in{position:relative}
.hero h1{font-size:clamp(34px,5.6vw,60px); max-width:21ch; margin:0 0 22px;
  letter-spacing:-.03em; font-weight:700}
.cta{display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 0}
.facts{list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin:56px 0 0; padding:0}
.facts li{flex:1 1 230px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent); padding:20px 22px}
.facts b{display:block; font-size:31px; letter-spacing:-.03em; color:var(--txt); line-height:1.1}
.facts span{display:block; font-size:13.5px; color:var(--dim); margin-top:6px; line-height:1.45}

/* ---------- cards ---------- */
.cards{display:grid; gap:20px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; position:relative}
.card h3{font-size:19.5px; margin:0 0 12px}
.card p{color:var(--dim); font-size:15.5px; margin:0}
.card .num{position:absolute; top:22px; right:24px; font-size:12px; font-weight:700;
  letter-spacing:.1em; color:var(--dim2)}
/* overskriften skal vige for tallet i hjørnet, ellers skriver de oven i hinanden */
.card .num + h3{padding-right:46px}
.card.lift{transition:border-color .18s, transform .18s, background .18s}
.card.lift:hover{border-color:var(--acc-line); transform:translateY(-3px); background:var(--panel2)}
.ico{width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:var(--acc-soft); border:1px solid var(--acc-line); color:var(--acc);
  font-size:19px; margin:0 0 16px}
.ticks{list-style:none; margin:18px 0 0; padding:0; border-top:1px solid var(--line); padding-top:16px}
.ticks li{position:relative; padding-left:24px; margin:0 0 9px; font-size:14.5px; color:var(--dim)}
.ticks li:last-child{margin-bottom:0}
.ticks li::before{content:""; position:absolute; left:4px; top:9px; width:7px; height:7px;
  border-radius:2px; background:var(--acc); opacity:.75}

/* ---------- case ---------- */
.case-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:34px; align-items:start}
.case-txt p{color:var(--dim); font-size:16.5px}
.case-txt .big{color:var(--txt)}
.case-side{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px}
.case-side h3{font-size:16px; letter-spacing:.02em; margin:0 0 18px; color:var(--txt)}
.purpose{margin:0}
.purpose dt{font-weight:650; font-size:15px; margin:0 0 4px; padding-left:16px; position:relative}
.purpose dt::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  border-radius:50%; background:var(--acc)}
.purpose dd{margin:0 0 18px 16px; color:var(--dim); font-size:14.5px}
.purpose dd:last-child{margin-bottom:0}
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:22px 0 0;
  border-top:1px solid var(--line)}
.chips li{font-size:12.5px; color:var(--dim); border:1px solid var(--line);
  border-radius:99px; padding:4px 12px; background:rgba(255,255,255,.03)}

/* ---------- steps ---------- */
.steps{list-style:none; counter-reset:s; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px 40px}
.steps li{counter-increment:s; position:relative; padding-left:60px}
.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:-2px;
  font-size:14px; font-weight:700; color:var(--acc); border:1px solid var(--acc-line);
  background:var(--acc-soft); width:42px; height:42px; border-radius:11px; display:grid; place-items:center}
.steps b{display:block; font-size:18px; margin:0 0 8px; letter-spacing:-.01em}
.steps p{color:var(--dim); font-size:15.5px; margin:0}

/* ---------- profil ---------- */
.profil-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:start}
.profil-grid > div > p{color:var(--dim)}
.profil-grid .big{color:var(--txt)}
.cv{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px}
.cv h3{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2);
  margin:0 0 16px}
.cv h3 + ul + h3{margin-top:28px}
.timeline{list-style:none; margin:0 0 4px; padding:0}
.timeline li{padding:0 0 16px 0; border-left:1px solid var(--line); padding-left:18px;
  position:relative; margin-left:3px}
.timeline li::before{content:""; position:absolute; left:-4.5px; top:8px; width:8px; height:8px;
  border-radius:50%; background:var(--acc); box-shadow:0 0 0 3px var(--bg2)}
.timeline .yr{display:block; font-size:12px; color:var(--dim2); letter-spacing:.04em}
.timeline b{display:block; font-size:15px; font-weight:600; margin:2px 0}
.timeline i{font-style:normal; font-size:13.5px; color:var(--dim)}
/* valgfri uddybning under en rolle (fx «Context engineering ved udviklingsopgaver») */
.timeline em{display:block; font-style:normal; font-size:13px; color:var(--dim2); margin-top:3px}

/* ---------- kontakt ---------- */
.kontakt-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:34px; align-items:start; margin-top:40px}
form{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
form label{display:block; margin:0 0 16px}
form label > span{display:block; font-size:13.5px; color:var(--dim); margin:0 0 7px}
input, textarea{width:100%; background:var(--bg); color:var(--txt); font:inherit; font-size:15.5px;
  border:1px solid var(--line2); border-radius:9px; padding:11px 13px; resize:vertical}
input:focus, textarea:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft)}
input[aria-invalid="true"], textarea[aria-invalid="true"]{border-color:var(--err)}
.hp{position:absolute; left:-9999px; height:0; overflow:hidden}
.formmsg{margin:14px 0 0; font-size:14.5px; min-height:1.2em}
.formmsg.ok{color:var(--ok)}
.formmsg.err{color:var(--err)}
.kontakt-side{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px}
.kontakt-side h3{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); margin:0 0 14px}
.kontakt-side h3 ~ h3{margin-top:26px}
.kontakt-side p{margin:0 0 9px; font-size:15.5px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:34px 0; background:var(--bg)}
.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13.5px; color:var(--dim2)}
.foot p{margin:0}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(16px)}
.rv.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cards.two,.cards.three{grid-template-columns:1fr}
  .case-grid,.profil-grid,.kontakt-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .nav-links a:not(.btn){display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .nav-in{gap:10px}
  .brand-txt i{display:none}          /* undertitlen gør topbaren for bred */
  .brand{gap:9px}
  .nav-links{gap:12px}
  .eyebrow{font-size:11px; letter-spacing:.12em}
  section{padding:64px 0}
  .hero{padding:72px 0 60px}
  .wrap{padding:0 18px}
  form .row{grid-template-columns:1fr}
  .facts{margin-top:38px}
  .cta .btn{flex:1 1 100%; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
}