:root{
  --bg:#0b0f14;
  --panel:#10161f;
  --card:rgba(16,22,31,.62);
  --text:#f3f5f7;
  --muted:#b9c0ca;
  --line:rgba(255,255,255,.12);
  --brand:#b11b21;
  --brand2:#9aa0a6;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --max:1120px;

  /* Spacing scale (consistent across pages) */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 20% -10%, rgba(177,27,33,.22), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(154,160,166,.14), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.92}
p{color:var(--muted); margin:0 0 14px}
h1,h2,h3{margin:0 0 12px; line-height:1.15}
h1{font-size:clamp(34px, 4.5vw, 56px)}
h2{font-size:clamp(22px, 2.6vw, 34px)}
h3{font-size:18px}

/* ✅ Fix: sørg for at overskrifter i cards ikke skubber op i tag-pill */
.card h3,
.card h4{
  margin-top:0;
}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:var(--space-6) 0}
main.section{padding:var(--space-5) 0 var(--space-6)}
.small{font-size:14px; color:var(--muted)}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.55);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-2) 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
  font-size:18px;
}
.logo{
  width:56px; height:56px; border-radius:12px;
  background-image: url("/assets/icons/apple-touch-icon.png");
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(177,27,33,.18);
}
.navlinks{display:flex; gap:var(--space-3); align-items:center}
.navlinks a{color:var(--muted); font-size:14px}
.navlinks a.active{color:var(--text)}
.navlinks a:hover{color:var(--text)}

/* Dropdown ("Lens") */
.dropdown{position:relative; display:inline-flex; align-items:center}
.dropbtn{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; padding:0;
  color:var(--muted); font-size:14px; font-weight:650;
  cursor:pointer;
}
.dropbtn:hover{color:var(--text)}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:240px;
  display:none;
  flex-direction:column;
  gap:6px;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(16,26,46,.96);
  box-shadow: var(--shadow);
  z-index:200;
}
.dropdown-menu a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  color:var(--muted);
  font-size:14px;
}
.dropdown-menu a:hover{background: rgba(255,255,255,.06); color:var(--text)}
.dropdown:hover .dropdown-menu{display:flex}
.dropdown.open .dropdown-menu{display:flex}
.dropdown:focus-within .dropdown-menu{display:flex}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:10px 13px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:650;
  font-size:14px;
}
.btn:hover{background: rgba(255,255,255,.09)}
.btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, rgba(177,27,33,.98), rgba(255,125,125,.88));
  color:#ffffff;
}
.btn.primary:hover{filter:brightness(1.04)}
.btn.ghost{background:transparent}

/* Tighter buttons in top navigation to avoid tall header */
.topbar .btn{padding:9px 12px}
/* Slightly larger brand + burger button (mobile header) */
.topbar .btn.burger{padding:11px 16px; font-size:15px; border-radius:14px}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:var(--space-3);
}
.card{
  background: rgba(16,26,46,.58);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card .pad{padding:var(--space-3)}
.kicker{
  display:inline-flex;
  gap:8px; align-items:center;
  padding:7px 10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  font-size:13px;
  color:var(--muted);
}
.kdot{width:8px; height:8px; border-radius:99px; background:var(--brand)}
.hero{padding:40px 0 32px}
.hero .grid{align-items:flex-start}
.hero-left{grid-column:1 / span 7}
.hero-right{grid-column:8 / span 5}
.hero p{font-size:16px}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3)}
.hero-panel{
  /* Avoid “double padding” (card + .pad) and improve top alignment vs. H1 */
  padding:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* Nudge the right hero panel down slightly so its header visually aligns with the H1 cap-height */
@media (min-width: 981px){
  .hero-right{margin-top: 8px;}
}
.badges{
  display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2);
}
.badge{
  font-size:13px; color:var(--muted);
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}
hr.sep{border:none; border-top:1px solid var(--line); margin:var(--space-4) 0}

.feature{grid-column: span 4}
.feature h3{display:flex; gap:10px; align-items:center}
.feature{height:100%}
.feature > .pad{height:100%; display:flex; flex-direction:column}
.icon{
  width:28px; height:28px; border-radius:10px;
  background: rgba(177,27,33,.18);
  border:1px solid rgba(177,27,33,.32);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800;
}

.split-left{grid-column:1 / span 7}
.split-right{grid-column:8 / span 5}

/* Study Week: risks section */
.risks{margin-top:var(--space-4)}
.risks-head{display:flex; gap:var(--space-3); align-items:flex-end; justify-content:space-between; flex-wrap:wrap}
.risks-head p{margin:0; max-width:70ch}
.risks-grid{margin-top:var(--space-3)}
.risk{grid-column: span 4}
.risk .title{display:flex; gap:10px; align-items:center; margin-bottom:6px}
.risk .title strong{font-size:16px}
.risk .meta{font-size:13px; color:var(--muted); margin:0}

.list{margin:0; padding:0 0 0 18px; color:var(--muted)}
.list li{margin:var(--space-1) 0}

.pricing{grid-column: span 4}

/* =============================
   Pricing cards (Services + Lens pages)
   Goal: baseline alignment for tags/CTAs across cards.
   ============================= */

/* Equal height cards inside a grid row */
.pricing{height:100%;}
.pricing > .pad{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Keep the last separator + CTA anchored to the bottom for consistent alignment */
.pricing > .pad > hr.sep:last-of-type{
  margin-top:auto;
}
.pricing > .pad > a.btn.primary{
  margin-top: var(--space-2);
  width: fit-content;
}

/* If there is no separator before the CTA (some lens cards), still keep CTA at the bottom */
.pricing > .pad > a.btn.primary:last-child{
  margin-top:auto;
}

/* Make sure tag + headline spacing is consistent inside pricing cards */
.pricing .tag{margin-bottom: 0.85rem;}

/* Services: keep the first separator aligned across cards on wide screens */
@media (min-width: 900px){
  .pricing > .pad > p.small:first-of-type{
    min-height: 3.2em; /* reserves ~2 lines so the first <hr> lines up */
  }
}


/* ✅ Fix: tag-pill spacing ned til headline */
.tag{
  font-size:12px; color:#0b0f14;
  display:inline-flex;
  align-items:center;
  line-height:1;
  padding:6px 9px; border-radius:999px;
  background: rgba(154,160,166,.88);
  font-weight:800;
  margin:0 0 0.75rem 0; /* ← LUFT ned til headline */
}

/* Services: make the pricing tags feel more “Stubtec” (darker + subtle red tint) */
.pricing .tag{
  color: rgba(243,245,247,.95);
  background: linear-gradient(135deg,
    rgba(177,27,33,.55),
    rgba(16,22,31,.88)
  );
  border: 1px solid rgba(177,27,33,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.25);
}

/* ✅ (Valgfri) lidt mere luft på små skærme (matcher dit screenshot) */
@media (max-width: 520px){
  .tag{margin-bottom:0.9rem;}
}

/* Services: keep the small “Se også …” note aligned and visually quiet */
.pricing-note{
  margin: 6px 0 0 0;
  color: var(--muted);
}
.pricing-note a{color: var(--text);}

/* ✅ NEW: Align “Åben lens” buttons in #lens (index) */
/* Lens selector: force a 3-column grid inside #lens and ensure each card
   occupies one equal column. Also keep the existing flex rules so buttons
   stay anchored at the bottom. */
#lens .grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-3);
}
#lens .grid > .card{
  height:100%;
  width:100%;
  box-sizing:border-box;
}
#lens .grid > .card > .pad{
  height:100%;
  display:flex;
  flex-direction:column;
}
/* Push the action group to the bottom of the card */
#lens .grid > .card .hero-actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: var(--space-2);
}
/* Ensure consistent spacing even if wrap rules kick in elsewhere */
#lens .grid > .card .hero-actions .btn{
  width: fit-content;
}

/* Mobile: stack lens cards on small screens */
@media (max-width: 768px){
  #lens .grid{
    grid-template-columns: 1fr !important;
  }
}

.quote{
  border-left:3px solid rgba(177,27,33,.72);
  padding-left:14px;
}

.footer{
  border-top:1px solid var(--line);
  padding:var(--space-4) 0;
  color:var(--muted);
  font-size:13px;
}
.footergrid{
  display:flex; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}

/* Mobile */
.burger{display:none}
@media (max-width: 980px){
  /* Make the header wrap so the expanded menu takes real space (pushes content down)
     instead of overlaying the hero section. */
  .nav{flex-wrap:wrap; align-items:flex-start}
  .navlinks{width:100%}

  .hero-left{grid-column:1 / span 12}
  .hero-right{grid-column:1 / span 12}
  .feature{grid-column: span 12}
  .risk{grid-column: span 12}
  .split-left{grid-column:1 / span 12}
  .split-right{grid-column:1 / span 12}
  .pricing{grid-column: span 12}
  .navlinks{display:none}
  .burger{display:inline-flex}

  /* Expanded menu (non-overlay): takes space under the topbar */
  body.menu-open{overflow:auto}
  body.menu-open .topbar{position:sticky}

  .navlinks.open{
    display:flex;
    position:static;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:14px 0 18px;
    border-top:1px solid var(--line);

    /* Slight panel feel for better UX on mobile */
    background: rgba(11,18,32,.45);
    backdrop-filter: blur(10px);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
  }

  .navlinks.open a{font-size:16px; padding:6px 0}
  .navlinks.open .btn{width:100%; justify-content:center}

  /* Dropdown becomes an in-flow accordion on mobile (no floating popover).
     We use higher specificity to reliably override the desktop popover styles. */
  .navlinks.open .dropdown{width:100%}
  .navlinks.open .dropbtn{
    width:100%;
    justify-content:space-between;
    padding:6px 0;
    font-size:16px;
    color:var(--muted);
  }
  .navlinks.open .dropbtn:hover{color:var(--text)}

  .navlinks.open .dropdown-menu{
    position:static !important;
    left:auto; top:auto;
    width:100%;
    min-width:unset;
    margin:8px 0 0;
    padding:10px;
    display:none;
    gap:6px;
    border:1px solid var(--line);
    border-radius:14px;
    background: rgba(255,255,255,.04);
    box-shadow:none;
  }
  .navlinks.open .dropdown.open .dropdown-menu{display:flex}
  .navlinks.open .dropdown-menu a{padding:10px 10px; border-radius:10px; font-size:15px}
}
/* Content helpers */
img{max-width:100%; height:auto}

.mt-3{margin-top:var(--space-3)}
/* ✅ NEW: mt-2 exists in HTML but was missing in CSS */
.mt-2{margin-top:var(--space-2)}

.skip{
  position:absolute; left:-999px; top:10px;
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.55);
  color:var(--text);
  z-index:999;
}
.skip:focus{left:12px}

:focus-visible{
  outline: 2px solid rgba(177,27,33,.85);
  outline-offset: 3px;
}

.media{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.media img{display:block; width:100%}

/* =============================
   Diagram UX (SVG-heavy blocks)
   Goal: diagrams should support the text — not dominate the layout.
   ============================= */

/* A diagram media wrapper adds padding + keeps SVGs visually "contained" */
.media.diagram{
  padding: var(--space-4);
  background:
    radial-gradient(800px 420px at 20% 0%, rgba(177,27,33,.10), transparent 55%),
    rgba(255,255,255,.02);
}

/* Keep diagrams readable without becoming poster-sized */
.media.diagram img{
  width:100%;
  height:auto;
  max-height: 540px; /* increased for a larger visual diagram */
  object-fit: contain;
}

/* On smaller screens, reduce max-height to avoid huge scroll blocks */
@media (max-width: 980px){
  .media.diagram{padding: var(--space-2);}
  .media.diagram img{max-height: 340px;}
  /* Ensure diagram grids stack cleanly on mobile */
  .diagram-grid .split-left,
  .diagram-grid .split-right{grid-column:1 / span 12}
}

/* Diagram-heavy two-card grids (e.g., Aras page) should be balanced 6/6 on desktop */
.diagram-grid{align-items:stretch}
.diagram-grid .card{height:100%}
.diagram-grid .pad{height:100%;display:flex;flex-direction:column}
.diagram-grid .split-left{grid-column:1 / span 6}
.diagram-grid .split-right{grid-column:7 / span 6}

/* Ensure the heading/intro area above each diagram reserves the same
  vertical space so both diagram media blocks start on the same horizontal
  baseline. This keeps the two diagrams visually aligned across the row. */
.diagram-grid .pad > h2,
.diagram-grid .pad > h3,
.diagram-grid .pad > p.small,
.diagram-grid .pad > p.caption{
.diagram-grid .pad .media{margin-top:0}

/* Ensure caption appears before diagram and takes no extra space */
.diagram-grid .caption{margin:0; margin-bottom:var(--space-2); font-size:13px; color:var(--muted)}
.caption{margin-top:10px; font-size:13px; color:var(--muted)}

.embed{
  position:relative;
  padding-top:56.25%;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
}
.embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.gallery{display:grid; grid-template-columns: repeat(12, 1fr); gap:var(--space-3)}
.gallery .gitem{grid-column: span 6}
@media (max-width: 980px){
  .gallery .gitem{grid-column: span 12}
}


/* UI: Lens cards — keep CTAs aligned on the same baseline across all devices */
.lens-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--space-3);
  align-items: stretch;
}
.lens-cards > .card{height:100%;}
.lens-cards > .card > .pad{
  height:100%;
  display:flex;
  flex-direction:column;
}
.lens-cards > .card .hero-actions{
  margin-top:auto; /* push buttons to same baseline */
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap: var(--space-2);
}
@media (max-width: 900px){
  .lens-cards{grid-template-columns:1fr;}
}
/* Mobile: stack lens cards on small screens */
@media (max-width: 900px){
  #lens .grid{
    grid-template-columns: 1fr;
  }
}