:root {
  --bg: #EEEEEE;
  --text: #000000;
  --muted: #161616;
  --panel: #f8fafc;
  --radius: 0px;
  --shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
  --max-width: 1120px;
  --page-pad: clamp(16px, 3vw, 32px);
  --sticky-gap: 12px;
  --tab-h: 88px;
  --card-h: 510px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

.page-intro,
.page-outro{
  max-width:var(--max-width);
  margin:0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
}

.page-intro h1,
.page-outro h2{
  margin:0 0 18px;
  font-size:clamp(2.5rem,7vw,5.25rem);
  line-height:.92;
  letter-spacing:-.06em;
}

.page-intro p,
.page-outro p{
  margin:0;
  max-width:34ch;
  font-size:clamp(1.05rem,1.7vw,1.25rem);
  line-height:1.6;
  color:var(--muted);
}

.stack-section{
  position:relative;
}

.stack-viewport{
  position:sticky;
  top:var(--sticky-gap);
  max-width:var(--max-width);
  margin:0 auto;
  height:calc(var(--card-h) + (var(--card-count,1) - 1) * var(--tab-h));
  pointer-events:none;
}

.stack-stage{
  position:relative;
  width:100%;
  height:100%;
}

.stack-card{
  position:absolute;
  inset:0;
  height:var(--card-h);
  min-height:var(--card-h);
  border-radius:var(--radius);
  overflow:hidden;
  background:white;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,.06);
  pointer-events:auto;
  backface-visibility:hidden;
  contain:layout paint style;
  transform:translate3d(0,0,0);
  will-change:transform;
}

/* farve accent i øverste højre hjørne */
.stack-card::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:50px;
  height:64px;
  border-top-right-radius:var(--radius);
  z-index:4;
  display:none;
}

.stack-card__inner{
  display:grid;
  grid-template-columns:1.6fr 0.4fr;
  min-height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.98));
}

.stack-card__content{
  padding:clamp(22px,4vw,48px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  min-width:0;
  background:rgba(255,255,255,.86);
}

.stack-card__header{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.stack-card__title{
  margin:0;
  font-size:clamp(2rem,4vw,4.2rem);
  line-height:.95;
  letter-spacing:-.06em;
  transform-origin:top left;
  will-change:transform;
  color: #3366FF;
}

.stack-card__text{
  margin:0;
  max-width:36ch;
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.65;
  color:rgba(15,23,42,.78);
  transition: 1s;
}

.stack-card__pills {
  width: 100%;
}

/* de to øverste */
.stack-card__pills-top {
  display: flex;
}

.stack-card__pill-a {
  flex: 1;
  text-decoration: none;
}

.stack-card__pill-a:focus-visible {
  outline: 3px solid #cdff4e;
  outline-offset: 4px;
}

/* generel pill styling */
.stack-card__pill {
  position: relative;
  overflow: hidden;
  padding: 60px 40px;
  font-weight: 600;
  color: #3366FF;
  min-height: 48px;
  transition: background .25s ease, color .25s ease;
}

/* tekst over billedet */
.stack-card__pill-label,
.pill-arrow,
.stack-card__pill-full .stack-card__pill span {
  position: relative;
  z-index: 2;
}

.stack-card__pill-label {
  display: inline-block;
  max-width: min(100%, 22ch);
  color: white;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* billede i HTML */
.stack-card__pill-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.5s ease;
}

/* overlay-farve ovenpå billedet */
.pill-bg-image::before,
.pill-bg-color::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: background 0.5s ease;
}

/* ØVERSTE VENSTRE */
.pill-bg-image::before {
  background:
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.46) 0%,
      rgba(15, 23, 42, 0.16) 100%
    );
  border: solid 1px white;
}

/* ØVERSTE HØJRE */
.pill-bg-color::before {
  background:
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.46) 0%,
      rgba(15, 23, 42, 0.16) 100%
    );
  border: solid 1px white;
}

/* hover på de 2 øverste */
.stack-card__pills-top .stack-card__pill-a:hover .stack-card__pill {
  color: #3366FF;
}

/* hover venstre overlay */
.stack-card__pills-top .stack-card__pill-a:hover .pill-bg-image::before {
  background: rgba(205, 255, 78, 0.66);
}

/* hover højre overlay */
.stack-card__pills-top .stack-card__pill-a:hover .pill-bg-color::before {
  background: rgba(205, 255, 78, 0.66);
}

.stack-card__pills-top .stack-card__pill-a:hover .stack-card__pill-label {
  color: #3366FF;
  text-shadow: none;
}

/* valgfri lille scale på hover */
.stack-card__pills-top .stack-card__pill-a:hover .stack-card__pill-img {
  transform: scale(1.08);
}

/* nederste skal være lavere */
.stack-card__pill-full .stack-card__pill {
  padding: 20px 40px;
}

/* nederste */
.stack-card__pill-full {
  display: block;
  width: 100%;
  background-color: #3366ff2b;
}

.stack-card__pill-full .stack-card__pill {
  background: rgba(255, 255, 255, 0.7);
  color: #3366FF;
}

/* hover kun på nederste */
.stack-card__pill-full:hover .stack-card__pill {
  background: #cdff4e;
}

.stack-card__pill-full:hover {
  border: none !important;
}

.stack-card__pill-full .stack-card__pill {
  display: flex;
  align-items: center;
}

.pill-arrow {
  margin-left: auto;
  font-size: 1.4rem;
}

.stack-card__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.stack-card__list li{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(15,23,42,.04);
  color:rgba(15,23,42,.82);
  font-weight:600;
}

.stack-card__visual{
  position:relative;
  isolation:isolate;
  min-height:240px;
  padding:clamp(18px,3vw,30px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.stack-card__gradient,
.stack-card__pattern{
  position:absolute;
  inset:0;
}

.stack-card__gradient{
  z-index:-2;
}

.stack-card__pattern{
  z-index:-1;
  background:
  radial-gradient(circle at 20% 20%, rgba(255,255,255,.32), transparent 18%),
  radial-gradient(circle at 80% 25%, rgba(255,255,255,.24), transparent 22%),
  radial-gradient(circle at 50% 80%, rgba(255,255,255,.16), transparent 18%),
  linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  mix-blend-mode:screen;
}

.stack-card__stat{
  width:min(280px,100%);
  padding:18px 20px;
  border-radius:22px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(16px);
  color:white;
  border:1px solid rgba(255,255,255,.22);
}

.stack-card__stat strong{
  display:block;
  margin-bottom:8px;
  font-size:clamp(2rem,3vw,3rem);
  line-height:.95;
  letter-spacing:-.05em;
}

.stack-card__stat span{
  display:block;
  font-size:1rem;
  line-height:1.45;
}

/* themes */
.stack-card[data-theme="violet"] .stack-card__gradient{
  background: #cdff4e;
}
.stack-card[data-theme="violet"]::before{
  background: #cdff4e;
}

.stack-card[data-theme="teal"] .stack-card__gradient{
  background: #cdff4e;
}
.stack-card[data-theme="teal"]::before{
  background: #cdff4e;
}

.stack-card[data-theme="amber"] .stack-card__gradient{
  background: #cdff4e;
}
.stack-card[data-theme="amber"]::before{
  background: #cdff4e;
}

.stack-card[data-theme="rose"] .stack-card__gradient{
  background: #cdff4e;
}
.stack-card[data-theme="rose"]::before{
  background: #cdff4e;
}

/* tablet */

@media (max-width:1024px){

  :root{
    --sticky-gap:10px;
    --tab-h:64px;
    --card-h: 590px;
  }

  .stack-card::before{
    display:block;
  }

  .stack-card__inner{
    grid-template-columns:1fr;
  }

  .stack-card__visual{
    min-height:200px;
    order:2;
  }

  .stack-card__content{
    order:1;
    min-height: 0;
  }

  .page-intro,
  .page-outro,
  .stack-viewport{
    width: 100%;
    max-width: none;
  }

  .stack-card__visual{
    max-height: 300px;
    padding:14px;
  }

  .stack-card__stat {
    position: absolute;
    top: 40px;
  }

}

/* mobile */

@media (max-width:767px){

  :root{
    --sticky-gap:10px;
    --tab-h:64px;
    --card-h: 547px;
    --shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
  }

  .stack-card__content{
    padding:18px;
    gap:18px;
  }

  .page-intro,
  .page-outro{
    padding-top: 28px;
    padding-bottom: 34px;
  }

  .stack-section{
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: 0;
  }

  .stack-viewport,
  .stack-stage,
  .stack-card{
    width: 100vw;
  }

  .stack-card{
    border-left: 0;
    border-right: 0;
    box-shadow: var(--shadow);
  }

  .stack-card__title{
    will-change: auto;
  }

  .stack-card__gradient,
  .stack-card__pattern{
    display: none;
  }

  .stack-card__visual{
    background: #cdff4e;
  }

  .page-intro p,
  .page-outro p,
  .stack-card__text{
    max-width: none;
  }

  .stack-card__visual{
    max-height:275px;
    padding:14px;
  }

  .stack-card__stat {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
  }

  .stack-card__title{
    font-size:clamp(1.8rem,10vw,3rem);
    width: 100%;
  }

  .stack-card__text,
  .stack-card__stat span,
  .stack-card__list li{
    font-size:.98rem;
    line-height:1.5;
  }


  /* Pills (links til fx projekter inde i cardStacking) styling - så de er stablet på mobil */
  .stack-card__pills-top {
    flex-direction: column;
    gap: 12px;
  }

  .stack-card__pill-a {
    width: 100%;
  }

  .stack-card__pill {
    min-height: 110px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
  }

  .stack-card__pill-label {
    max-width: min(58%, 18ch);
    font-size: 1.1rem;
    line-height: 1.2;
  }

  .stack-card__pill-img {
    width: 42%;
    height: 80%;
    right: 8px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    object-fit: contain;
    object-position: right center;
  }

  .stack-card__pill-full .stack-card__pill {
    min-height: auto;
    padding: 15px 18px;
  }

}

@media (min-width: 1025px) {
  :root {
    --max-width: 1240px;
  }

  .page-intro p,
  .page-outro p {
    max-width: 58ch;
  }

  .stack-card__inner {
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.3fr);
  }

  .stack-card__text {
    max-width: 54ch;
  }
}

@media (min-width: 1600px) {
  :root {
    --max-width: 1320px;
  }
}

@media (hover: none) {
  .stack-card__pills-top .stack-card__pill-a:hover .stack-card__pill-img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-card,
  .stack-card__title,
  .stack-card__pill,
  .stack-card__pill-img,
  .pill-bg-image::before,
  .pill-bg-color::before {
    transition-duration: 0.01ms;
  }
}