/* 01. Grundstruktur og komponenter */
@font-face {
  font-family:Inter;
  src:url("../Content/fonts/InterVariable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root {
  --navy:#052f3d;
  --deep:#03242f;
  --ink:#0c2630;
  --cyan:#09aee8;
  --ice:#eef8fa;
  --line:#dce8eb;
  --muted:#60747b;
  --white:#fff;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}

body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

p,h1,h2,h3 {
  margin-top:0;
}

.skip-link {
  position:fixed;
  z-index:100;
  left:16px;
  top:12px;
  padding:12px 16px;
  border-radius:5px;
  background:#fff;
  color:var(--navy);
  font-weight:850;
  transform:translateY(-160%);
  transition:transform .2s ease;
}

.skip-link:focus {
  transform:translateY(0);
}

:is(a,button,summary,input,select,textarea):focus-visible {
  outline:3px solid #18b8e6;
  outline-offset:3px;
}

html.site-loading {
  overflow-y:hidden;
  scrollbar-gutter:stable;
}

.page-loader {
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .42s ease,visibility .42s step-end;
}

.site-loading .page-loader {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:none;
}

@media(prefers-reduced-motion:reduce) {
  .page-loader {
    transition:none;
  }
}

:is(#loesninger,#cases,#fordele,#kontakt) {
  scroll-margin-top:102px;
}

.header {
  height:78px;
  padding:0 clamp(24px,5vw,80px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:40px;
  background:var(--navy);
  color:#fff;
  position:sticky;
  top:0;
  z-index:20;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:24px;
  font-weight:750;
  letter-spacing:-.04em;
}

.nav {
  display:flex;
  gap:clamp(24px,3vw,48px);
}

.nav a {
  font-size:14px;
  color:rgba(255,255,255,.7);
}

.nav a:hover {
  color:#fff;
}

.header-cta {
  justify-self:end;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  padding:11px 18px;
  font-size:14px;
  font-weight:700;
}

.header-cta:hover {
  background:#fff;
  color:var(--navy);
}

.hero {
  min-height:710px;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  background:linear-gradient(135deg,#f8fcfd,#eef8fa);
  overflow:hidden;
}

.hero-copy {
  padding:clamp(72px,8vw,126px) 5vw 72px;
  max-width:820px;
  margin-left:auto;
}

.eyebrow,.kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  font-weight:800;
}

.eyebrow:before {
  content:"";
  width:26px;
  height:2px;
  background:var(--cyan);
}

.hero h1 {
  margin:24px 0 26px;
  font-size:clamp(54px,6.2vw,96px);
  line-height:.98;
  letter-spacing:-.065em;
  font-weight:680;
  color:var(--navy);
}

.hero h1 .hero-emphasis {
  color:var(--cyan);
  font-weight:520;
}

.lead {
  max-width:610px;
  font-size:clamp(18px,1.55vw,23px);
  line-height:1.55;
  color:#47626b;
}

.actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:36px;
  flex-wrap:wrap;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:54px;
  padding:0 24px;
  border-radius:999px;
  font-size:14px;
  font-weight:750;
  transition:transform .2s,background .2s;
}

.button:hover {
  transform:translateY(-2px);
}

.primary {
  background:var(--cyan);
  color:#fff;
  box-shadow:0 14px 36px rgba(9,174,232,.2);
}

.text-link {
  font-size:14px;
  font-weight:750;
}

.trust {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding-top:52px;
  margin-top:50px;
  border-top:1px solid var(--line);
}

.trust div {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.trust strong {
  font-size:16px;
}

.trust span {
  font-size:12px;
  color:var(--muted);
}

.hero-visual {
  position:relative;
  min-height:710px;
  background:var(--navy);
  isolation:isolate;
}

.hero-visual:before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.28) .8px,transparent .8px);
  background-size:26px 26px;
  mask-image:linear-gradient(#000,transparent 92%);
}

.glow {
  position:absolute;
  width:330px;
  height:330px;
  right:-90px;
  top:80px;
  border-radius:50%;
  background:rgba(12,184,232,.17);
  z-index:-1;
}

.dashboard {
  position:absolute;
  width:min(74%,520px);
  left:12%;
  top:17%;
  padding:30px;
  border-radius:25px;
  color:var(--navy);
  background:rgba(255,255,255,.98);
  box-shadow:0 36px 80px rgba(0,0,0,.28);
  transform:rotate(-2deg);
}

.mini {
  display:block;
  font-size:11px;
  color:#779098;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:750;
  margin-bottom:6px;
}

.event-pass {
  position:absolute;
  z-index:1;
  left:9%;
  bottom:8%;
  width:min(50%,350px);
  min-height:190px;
  padding:22px;
  color:#fff;
  background:linear-gradient(145deg,#0ab5e8,#0878c9);
  border:1px solid rgba(255,255,255,.35);
  border-radius:22px;
  box-shadow:0 26px 60px rgba(0,0,0,.25);
  transform:rotate(4deg);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.pass-top {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.18em;
  font-weight:800;
}

.event-pass small {
  display:block;
  font-size:11px;
  opacity:.7;
  margin-bottom:5px;
}

.event-pass strong {
  font-size:25px;
}

.bars {
  display:flex;
  gap:4px;
  align-items:end;
  height:23px;
}

.bars i {
  width:3px;
  height:100%;
  background:rgba(255,255,255,.8);
}

.bars i:nth-child(2n) {
  height:60%;
}

.bars i:nth-child(3n) {
  width:8px;
}

.clients {
  min-height:112px;
  display:flex;
  align-items:center;
  gap:48px;
  padding:24px 5vw;
  border-bottom:1px solid var(--line);
}

.clients>span {
  white-space:nowrap;
  color:#7b9097;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:750;
}

.section {
  padding:130px 5vw;
}

.section-head {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  align-items:end;
  gap:60px;
  margin-bottom:72px;
}

.section h2,.cta h2 {
  margin:16px 0 0;
  color:var(--navy);
  font-size:clamp(43px,5vw,72px);
  line-height:1.04;
  letter-spacing:-.055em;
  font-weight:640;
}

.section-head>p {
  max-width:490px;
  margin-bottom:6px;
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
}

.cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.card {
  min-height:510px;
  display:flex;
  flex-direction:column;
  padding:26px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  transition:transform .25s,box-shadow .25s;
}

.card:hover {
  transform:translateY(-7px);
  box-shadow:0 24px 60px rgba(6,55,70,.1);
}

.card-meta {
  display:flex;
  justify-content:space-between;
  color:#7e949b;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  font-weight:800;
}

.mark {
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  margin:52px 0 36px;
  border-radius:50%;
  background:var(--ice);
  color:var(--cyan);
  font-size:29px;
}

.card h3 {
  font-size:23px;
  line-height:1.2;
  letter-spacing:-.03em;
  margin-bottom:16px;
}

.card p {
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
}

.detail {
  font-size:10px;
  line-height:1.5;
  color:#81959c;
  padding-top:20px;
  margin-top:auto;
  border-top:1px solid var(--line);
}

.card a {
  margin-top:24px;
  display:flex;
  justify-content:space-between;
  color:var(--cyan);
  font-size:13px;
  font-weight:750;
}

.why {
  background:#fff;
}

.feature-list {
  border-top:1px solid var(--line);
}

.feature {
  display:grid;
  grid-template-columns:70px 100px 1fr 1fr;
  gap:30px;
  align-items:start;
  padding:38px 0;
  border-bottom:1px solid var(--line);
}

.feature>span {
  color:var(--cyan);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  padding-top:6px;
}

.feature h3 {
  margin:0;
  font-size:clamp(22px,2.2vw,34px);
  letter-spacing:-.035em;
}

.feature p {
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:15px;
  max-width:520px;
}

.cta {
  padding:120px 7vw;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:70px;
  align-items:end;
  background:var(--cyan);
  color:#fff;
}

.cta .kicker {
  color:rgba(255,255,255,.65);
}

.cta h2 {
  color:#fff;
  font-size:clamp(48px,6.4vw,94px);
}

.cta p {
  max-width:480px;
  color:rgba(255,255,255,.82);
  font-size:17px;
  line-height:1.7;
}

footer {
  padding:78px 5vw 30px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:50px;
  background:var(--deep);
  color:#fff;
}

.footer-logo {
  display:block;
  width:clamp(150px,14vw,205px);
  height:auto;
}

.footer-brand p {
  margin-top:28px;
  color:rgba(255,255,255,.55);
  font-size:15px;
  line-height:1.65;
}

.footer-col {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
}

.footer-col>span {
  margin-bottom:8px;
  color:rgba(255,255,255,.4);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:750;
}

.footer-col a,.footer-col p {
  color:rgba(255,255,255,.75);
  font-size:13px;
  line-height:1.7;
  margin:0;
}

.footer-hours {
  margin-top:14px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
}

.footer-hours strong {
  display:block;
  margin-bottom:6px;
  color:rgba(255,255,255,.4);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.15em;
}

.footer-bottom {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  padding-top:32px;
  margin-top:34px;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);
  font-size:11px;
}

@media(max-width:980px) {
  .header {
    grid-template-columns:1fr auto;
  }
  .nav {
    display:none;
  }
  .hero {
    grid-template-columns:1fr;
  }
  .hero-copy {
    margin:0;
    max-width:none;
    padding-left:7vw;
    padding-right:7vw;
  }
  .hero-visual {
    min-height:620px;
  }
  .cards {
    grid-template-columns:1fr 1fr;
  }
  .card {
    min-height:470px;
  }
  .mark {
    margin:38px 0 28px;
  }
  .section-head {
    grid-template-columns:1fr;
    align-items:start;
  }
  .feature {
    grid-template-columns:50px 80px 1fr;
  }
  .feature p {
    grid-column:3;
  }
  .cta {
    grid-template-columns:1fr;
  }
  footer {
    grid-template-columns:2fr 1fr 1fr;
  }
}

@media(max-width:640px) {
  .header {
    height:68px;
    padding:0 20px;
  }
  .brand {
    font-size:21px;
  }
  .header-cta {
    font-size:12px;
    padding:9px 14px;
  }
  .hero-copy {
    padding:70px 22px 54px;
  }
  .hero h1 {
    font-size:clamp(48px,15vw,70px);
  }
  .lead {
    font-size:17px;
  }
  .trust {
    grid-template-columns:1fr 1fr;
  }
  .trust div:last-child {
    display:none;
  }
  .hero-visual {
    min-height:510px;
  }
  .dashboard {
    left:7%;
    width:86%;
    top:12%;
    padding:22px;
  }
  .event-pass {
    left:6%;
    bottom:5%;
    width:60%;
    min-height:150px;
  }
  .clients {
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
    padding:28px 22px;
  }
  .section {
    padding:90px 22px;
  }
  .section-head {
    margin-bottom:50px;
  }
  .section h2 {
    font-size:43px;
  }
  .cards {
    grid-template-columns:1fr;
  }
  .card {
    padding:25px;
    min-height:auto;
  }
  .feature {
    grid-template-columns:40px 1fr;
    gap:18px;
  }
  .feature>span:nth-child(2) {
    display:none;
  }
  .feature h3,.feature p {
    grid-column:2;
  }
  .cta {
    padding:85px 22px;
  }
  .cta h2 {
    font-size:49px;
  }
  footer {
    grid-template-columns:1fr 1fr;
    padding:64px 22px 28px;
  }
  .footer-brand {
    grid-column:1/-1;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}

/* 02. Pay4it-design, responsive layouts og tilgængelighed */
/* Ny, mere markant fintech-retning – inspireret af principper, ikke layout */
:root {
  --cream:#f5f4ef;
  --acid:#ebe8e1;
  --cyan:#6f6a61;
  --cyan-bright:#d9d2c6;
  --ice:#f1efe9;
  --line:#dedcd4;
  --muted:#66665f;
  --site-gutter:max(5vw,calc((100vw - 1600px)/2));
}

body {
  background:var(--cream);
}

.header {
  height:82px;
  padding:0 max(4vw,calc((100vw - 1600px)/2));
  background:#fff;
  color:var(--navy);
  border-bottom:1px solid #dfe5e5;
  grid-template-columns:1fr auto 1fr;
}

.header .brand {
  width:max-content;
  line-height:0;
}

.header-logo {
  display:block;
  width:clamp(96px,9vw,131px);
  height:auto;
}

.header-actions {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-contact {
  display:none;
}

.menu-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  padding:10px 13px;
  border:1px solid var(--navy);
  border-radius:5px;
  background:#fff;
  color:var(--navy);
  font:inherit;
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-align:center;
  cursor:pointer;
}

.menu-backdrop {
  display:none;
}

.nav a {
  color:#53666c;
  font-weight:650;
}

.nav a:hover {
  color:var(--navy);
}

.header-cta {
  border:0;
  background:var(--navy);
  color:#fff;
  border-radius:5px;
  padding:14px 22px;
}

.header-cta:hover {
  background:var(--cyan);
  color:var(--navy);
}

.hero {
  min-height:750px;
  background:var(--navy);
  color:#fff;
  position:relative;
}

.hero-copy {
  padding-top:clamp(82px,8vw,128px);
  padding-bottom:74px;
  position:relative;
  z-index:2;
}

.eyebrow {
  color:var(--cyan-bright);
  font-size:13px;
}

.eyebrow:before {
  background:var(--cyan-bright);
  width:42px;
}

.hero h1 {
  color:#fff;
  font-size:clamp(62px,6.7vw,100px);
  line-height:.9;
  letter-spacing:-.068em;
  font-weight:850;
  margin:32px 0;
}

.hero h1 .hero-emphasis {
  display:block;
  color:#fff;
  font-weight:850;
}

.hero h1.hero-title-long {
  font-size:clamp(48px,5.4vw,82px);
  line-height:.94;
  letter-spacing:-.06em;
}

.hero h1 .hero-title-line {
  display:block;
  white-space:nowrap;
}

.lead {
  color:rgba(255,255,255,.76);
  font-size:clamp(18px,1.45vw,22px);
  max-width:620px;
}

.primary {
  background:var(--cyan-bright);
  color:var(--navy);
  box-shadow:none;
  border-radius:5px;
  min-height:58px;
  padding:0 27px;
}

.primary:hover {
  background:#fff;
}

.hero .text-link {
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:4px;
}

.trust {
  grid-template-columns:repeat(4,1fr);
  border-color:rgba(255,255,255,.18);
  margin-top:58px;
  padding-top:30px;
}

.trust strong {
  color:#fff;
  font-size:18px;
}

.trust span {
  color:rgba(255,255,255,.5);
}

.hero-visual {
  min-height:750px;
  background:transparent;
}

.hero-visual:before {
  opacity:.11;
  background-size:30px 30px;
}

.hero-visual:after {
  content:"";
  position:absolute;
  width:540px;
  height:540px;
  border-radius:50%;
  left:calc(7% + min(55%,390px) - 162px);
  right:auto;
  bottom:-170px;
  background:var(--cyan-bright);
  opacity:.95;
}

.glow {
  width:480px;
  height:480px;
  left:calc(5% + min(78%,560px) - 120px);
  right:auto;
  top:calc(80px - 5%);
  background:var(--cyan);
  opacity:.14;
}

.dashboard {
  z-index:3;
  width:min(78%,560px);
  left:8%;
  top:14%;
  border-radius:10px;
  transform:none;
  box-shadow:18px 22px 0 rgba(217,210,198,.95),0 38px 80px rgba(0,0,0,.3);
}

.platform-overview {
  padding:32px;
  transform:none;
}

.platform-title {
  display:block;
  max-width:440px;
  margin:10px 0 26px;
  font-size:clamp(25px,2.4vw,38px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.payment-methods {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.payment-methods span {
  padding:9px 11px;
  border:1px solid #ccd7d9;
  border-radius:4px;
  background:var(--cream);
  color:#42575e;
  font-size:11px;
  font-weight:750;
}

.platform-flow {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:15px;
  align-items:center;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.flow-mark {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:5px;
  background:var(--navy);
  color:#fff;
  font-size:18px;
}

.platform-flow div {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.platform-flow span {
  color:#566970;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:800;
}

.platform-flow strong {
  font-size:15px;
}

.event-pass {
  z-index:4;
  left:7%;
  bottom:8%;
  width:min(55%,390px);
  min-height:185px;
  border-radius:8px;
  background:#fff;
  color:var(--navy);
  border:2px solid var(--navy);
  box-shadow:12px 12px 0 var(--cyan-bright);
  transform:none;
}

.event-pass small {
  color:#6f6a61;
  opacity:1;
}

.event-pass .pass-top {
  color:var(--cyan);
  font-weight:900;
}

.event-pass .bars i {
  background:var(--navy);
}

.clients {
  padding-left:var(--site-gutter);
  padding-right:var(--site-gutter);
  background:#fff;
  border:0;
  min-height:126px;
}

.clients>span {
  color:var(--navy);
  font-weight:900;
}

.client-marquee {
  min-width:0;
  flex:1;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}

.client-track {
  display:flex;
  width:max-content;
  animation:client-scroll 42s linear infinite;
}

.client-group {
  display:flex;
  align-items:center;
  gap:clamp(42px,5vw,86px);
  padding-right:clamp(42px,5vw,86px);
}

.client-group strong {
  white-space:nowrap;
  font-size:clamp(13px,1.1vw,17px);
}

@keyframes client-scroll {
  to {
    transform:translateX(-50%);
  }
}

.section {
  padding-left:var(--site-gutter);
  padding-right:var(--site-gutter);
  background:var(--cream);
  padding-top:145px;
  padding-bottom:145px;
}

.section-head {
  align-items:end;
}

.section h2,.cta h2 {
  font-size:clamp(58px,6.2vw,94px);
  line-height:.88;
  letter-spacing:-.068em;
  font-weight:850;
}

.section-head>p {
  font-size:20px;
  color:#42575e;
}

.cards {
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}

.solution-group-head {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:18px;
  margin:36px 0 2px;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.solution-group-head:first-child {
  margin-top:0;
}

.solution-group-head:after {
  content:"";
  height:1px;
  flex:1;
  background:#b9c4c4;
}

.solutions-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:54px;
  padding-top:34px;
  border-top:1px solid #b9c4c4;
}

.solutions-cta p {
  max-width:620px;
  margin:0;
  color:#405158;
  font-size:18px;
  line-height:1.55;
}

.solutions-cta .primary {
  flex:0 0 auto;
  border:1px solid #c4bbaa;
  background:var(--cyan-bright);
  color:var(--navy);
}

.solutions-cta .primary:hover {
  background:#c7beb0;
  color:var(--navy);
}

.card {
  position:relative;
  height:430px;
  min-height:430px;
  padding:34px;
  border:2px solid var(--navy);
  border-radius:10px;
  box-shadow:none;
}

.card:has(.solution-details[open]) {
  height:auto;
}

.card:hover {
  transform:translateY(-5px);
  box-shadow:8px 8px 0 var(--navy);
}

.card:nth-of-type(1),.card:nth-of-type(6) {
  background:var(--navy);
  color:#fff;
}

:is(.card:nth-of-type(1),.card:nth-of-type(6)) p,:is(.card:nth-of-type(1),.card:nth-of-type(6)) .detail,:is(.card:nth-of-type(1),.card:nth-of-type(6)) .card-meta {
  color:rgba(255,255,255,.68);
}

:is(.card:nth-of-type(1),.card:nth-of-type(6)) .detail {
  border-color:rgba(255,255,255,.2);
}

.card:nth-of-type(2) {
  background:#fff;
}

.card:nth-of-type(3),.card:nth-of-type(8) {
  background:var(--cyan-bright);
}

:is(.card:nth-of-type(3),.card:nth-of-type(8)) .mark {
  background:var(--navy);
  color:#fff;
}

.card:nth-of-type(4) {
  background:#fff;
}

.card-meta {
  min-height:34px;
  align-items:center;
  padding-left:48px;
}

.mark {
  position:absolute;
  top:24px;
  left:34px;
  margin:0;
  width:34px;
  height:34px;
  border-radius:5px;
  font-size:18px;
}

.mark svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.card h3 {
  margin-top:30px;
  font-size:clamp(30px,3vw,47px);
  line-height:.98;
  font-weight:850;
  max-width:560px;
}

.card p {
  font-size:16px;
  max-width:560px;
}

.detail {
  font-size:11px;
}

.card a {
  font-size:14px;
}

.solution-details {
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.solution-details summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:var(--navy);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
}

.solution-details summary::-webkit-details-marker {
  display:none;
}

.solution-details summary:after {
  content:"";
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border:1px solid currentColor;
  border-radius:50%;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-position:center;
  background-repeat:no-repeat;
  background-size:10px 2px,2px 10px;
  transform-origin:center;
  transition:transform .25s ease;
}

.solution-details[open] summary:after {
  transform:rotate(45deg);
}

.solution-details-content {
  padding:24px 0 2px;
}

.solution-details-content p {
  margin-bottom:18px;
  font-size:15px;
  line-height:1.65;
}

.solution-details-content ul {
  display:grid;
  gap:10px;
  margin:0 0 24px;
  padding:0;
  list-style:none;
}

.solution-details-content li {
  position:relative;
  padding-left:18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.solution-details-content li:before {
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
}

.solution-actions {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.solution-details-content .solution-contact,.solution-details-content .solution-download {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
  color:var(--navy);
  font-weight:800;
}

.solution-details-content .solution-download {
  padding:11px 14px;
  border:1px solid currentColor;
  border-radius:5px;
}

.solution-details-content .solution-download:hover {
  background:var(--navy);
  color:#fff;
}

:is(.card:nth-of-type(1),.card:nth-of-type(6)) .solution-details {
  border-color:rgba(255,255,255,.2);
}

:is(.card:nth-of-type(1),.card:nth-of-type(6)) .solution-details summary,:is(.card:nth-of-type(1),.card:nth-of-type(6)) .solution-details-content .solution-contact,:is(.card:nth-of-type(1),.card:nth-of-type(6)) .solution-details-content .solution-download {
  color:#fff;
}

:is(.card:nth-of-type(1),.card:nth-of-type(6)) .solution-details-content .solution-download:hover {
  background:#fff;
  color:var(--navy);
}

:is(.card:nth-of-type(1),.card:nth-of-type(6)) .solution-details-content li {
  color:rgba(255,255,255,.68);
}

.cases-section {
  padding:140px var(--site-gutter);
  background:#fff;
}

.cases-head {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:end;
  margin-bottom:64px;
}

.cases-head h2 {
  margin:16px 0 0;
  color:var(--navy);
  font-size:clamp(58px,6.2vw,94px);
  line-height:.88;
  letter-spacing:-.068em;
  font-weight:850;
}

.cases-head>p {
  max-width:560px;
  margin:0;
  color:#53676e;
  font-size:20px;
  line-height:1.65;
}

.case-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:start;
}

.case-card {
  height:440px;
  min-height:440px;
  display:flex;
  flex-direction:column;
  padding:32px;
  border:2px solid var(--navy);
  border-radius:10px;
  background:var(--cream);
}

.case-card:has(.case-details[open]) {
  height:auto;
}

.case-card:nth-child(2) {
  background:var(--navy);
  color:#fff;
}

.case-card:nth-child(3) {
  background:var(--cyan-bright);
}

.case-meta {
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.case-card:nth-child(2) .case-meta {
  color:rgba(255,255,255,.55);
}

.case-card h3 {
  margin:54px 0 20px;
  font-size:clamp(28px,2.5vw,42px);
  line-height:1;
  letter-spacing:-.045em;
}

.case-stat {
  display:block;
  margin-bottom:16px;
  font-size:18px;
  font-weight:850;
}

.case-card p {
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}

.case-card:nth-child(2) p {
  color:rgba(255,255,255,.68);
}

.case-details {
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid currentColor;
}

.case-details summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
  list-style:none;
}

.case-details summary::-webkit-details-marker {
  display:none;
}

.case-details summary:after {
  content:"";
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border:1px solid currentColor;
  border-radius:50%;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-position:center;
  background-repeat:no-repeat;
  background-size:10px 2px,2px 10px;
  transform-origin:center;
  transition:transform .25s ease;
}

.case-details[open] summary:after {
  transform:rotate(45deg);
}

.case-details-content {
  padding-top:24px;
}

.case-details-content ul {
  display:grid;
  gap:10px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}

.case-details-content li {
  position:relative;
  padding-left:17px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.case-details-content li:before {
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}

.case-card:nth-child(2) .case-details-content li {
  color:rgba(255,255,255,.68);
}

.why {
  background:var(--cream);
}

.feature-list {
  border-color:var(--navy);
}

.feature {
  padding:50px 0;
  border-color:#b9c4c4;
}

.feature>span {
  font-size:12px;
}

.feature h3 {
  font-size:clamp(28px,3vw,48px);
  line-height:1;
  font-weight:850;
}

.feature p {
  font-size:16px;
}

.cta {
  padding-left:var(--site-gutter);
  padding-right:var(--site-gutter);
  grid-template-columns:.8fr 1.2fr;
  align-items:start;
  background:var(--navy);
  min-height:570px;
}

.cta .kicker {
  color:var(--cyan-bright);
}

.cta h2 {
  font-size:clamp(58px,6vw,88px);
  line-height:.9;
}

.contact-panel {
  align-self:start;
  padding:32px;
  border-radius:10px;
  background:#fff;
  color:var(--navy);
  box-shadow:12px 12px 0 var(--cyan-bright);
}

.contact-panel>p {
  margin-bottom:24px;
  color:#53676e;
  font-size:16px;
  line-height:1.6;
}

.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:max-content;
  align-content:start;
  gap:16px;
}

.contact-field {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.contact-field.full {
  grid-column:1/-1;
}

.contact-field label {
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.contact-field input,.contact-field select,.contact-field textarea {
  width:100%;
  padding:13px 14px;
  border:1px solid #bac8cb;
  border-radius:5px;
  background:#fff;
  color:var(--navy);
  font:inherit;
  font-size:14px;
}

.contact-field textarea {
  min-height:112px;
  resize:vertical;
}

.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus {
  outline:2px solid var(--cyan-bright);
  outline-offset:1px;
  border-color:var(--navy);
}

.contact-actions {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}

.contact-submit {
  min-height:54px;
  border:0;
  border-radius:5px;
  background:var(--navy);
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:850;
  cursor:pointer;
  transition:background-color .2s ease,transform .2s ease;
}

.contact-submit:hover {
  background:#174958;
  transform:translateY(-1px);
}

.contact-submit:active {
  transform:translateY(0);
}

.contact-direct {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.contact-direct a {
  font-size:13px;
  font-weight:800;
}

footer {
  padding-left:var(--site-gutter);
  padding-right:var(--site-gutter);
  background:#020f14;
}

@media(max-width:980px) {
  body.menu-open {
    overflow:hidden;
  }
  .menu-backdrop {
    position:fixed;
    inset:0;
    z-index:90;
    display:block;
    visibility:hidden;
    opacity:0;
    background:rgba(2,15,20,.52);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    transition:opacity .2s ease,visibility .2s ease;
    pointer-events:none;
  }
  body.menu-open .menu-backdrop {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  .header {
    grid-template-columns:1fr auto;
  }
  .header-cta {
    display:none;
  }
  .menu-toggle {
    display:inline-flex;
  }
  .nav {
    position:fixed;
    top:82px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    gap:0;
    padding:12px 4vw 22px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(3,36,47,.12);
  }
  .nav.is-open {
    display:flex;
  }
  .nav a,.nav .nav-contact {
    display:block;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    color:var(--navy);
    font-size:15px;
  }
  .hero {
    grid-template-columns:1fr;
  }
  .hero-visual {
    min-height:630px;
  }
  .trust {
    grid-template-columns:1fr 1fr;
  }
  .cards {
    grid-template-columns:1fr 1fr;
  }
  .card {
    height:410px;
    min-height:410px;
  }
  .card:has(.solution-details[open]) {
    height:auto;
  }
  .cases-head {
    grid-template-columns:1fr;
  }
  .case-grid {
    grid-template-columns:1fr 1fr;
  }
  .case-card:last-child {
    grid-column:1/-1;
  }
}

@media(max-width:640px) {
  .header {
    height:70px;
    gap:12px;
  }
  .header-logo {
    width:88px;
  }
  .nav {
    top:70px;
  }
  .hero-copy {
    padding-top:72px;
  }
  .hero h1 {
    font-size:clamp(54px,16vw,76px);
  }
  .trust div:last-child {
    display:flex;
  }
  .hero-visual {
    min-height:520px;
  }
  .dashboard {
    left:7%;
    width:85%;
  }
  .event-pass {
    width:68%;
    left:5%;
    bottom:4%;
  }
  .section {
    padding:90px 22px;
  }
  .cards {
    grid-template-columns:1fr;
  }
  .solution-group-head {
    margin-top:28px;
  }
  .card,.card:has(.solution-details[open]) {
    height:auto;
    min-height:0;
    padding:28px;
  }
  .mark {
    top:20px;
    left:28px;
  }
  .card h3 {
    margin-top:26px;
    font-size:36px;
  }
  .cases-section {
    padding:90px 22px;
  }
  .cases-head h2 {
    font-size:54px;
  }
  .cases-head>p {
    font-size:17px;
  }
  .case-grid {
    grid-template-columns:1fr;
  }
  .case-card,.case-card:last-child,.case-card:has(.case-details[open]) {
    grid-column:auto;
    height:auto;
    min-height:380px;
  }
  .section h2 {
    font-size:54px;
  }
  .cta h2 {
    font-size:58px;
  }
  .contact-panel {
    padding:24px;
    box-shadow:7px 7px 0 var(--cyan-bright);
  }
  .contact-form {
    grid-template-columns:1fr;
  }
  .contact-field.full,.contact-submit {
    grid-column:auto;
  }
}

/* Begræns designet på ultrabrede skærme og hold mobile elementer inden for viewporten. */
body {
  overflow-x:clip;
}

.platform-overview .mini {
  color:#566970;
}

.footer-col>span,.footer-hours strong,.footer-bottom {
  color:rgba(255,255,255,.62);
}

.hero .primary {
  background:#18b8e6;
  color:var(--navy);
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

.hero .primary:hover {
  background:#fff;
  color:var(--navy);
}

#loesninger {
  background-color:var(--cream);
  background-image: radial-gradient(circle at 87% 12%,transparent 0 118px,rgba(5,47,61,.08) 119px 121px,transparent 122px), radial-gradient(circle at 13% 78%,rgba(217,210,198,.42) 0 82px,transparent 83px);
}

.cases-section {
  background-color:#fff;
  background-image: radial-gradient(circle at 15% 18%,transparent 0 72px,rgba(5,47,61,.07) 73px 75px,transparent 76px), radial-gradient(circle at 86% 84%,rgba(217,210,198,.34) 0 104px,transparent 105px);
}

#fordele {
  background-color:var(--cream);
  background-image:radial-gradient(circle at 86% 24%,transparent 0 92px,rgba(5,47,61,.08) 93px 95px,transparent 96px);
}

.cta {
  background-color:var(--navy);
  background-image: radial-gradient(circle at 15% 88%,transparent 0 102px,rgba(255,255,255,.09) 103px 105px,transparent 106px), radial-gradient(circle at 87% 14%,rgba(217,210,198,.08) 0 74px,transparent 75px);
}

main,footer {
  width:100%;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

.hero,.clients,.card-showcase {
  width:100%;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

.clients {
  overflow:hidden;
}

.client-marquee {
  width:100%;
  max-width:100%;
  min-width:0;
}

.contact-panel {
  width:100%;
  max-width:100%;
  min-width:0;
}

.contact-form {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

.contact-field,.contact-field input,.contact-field select,.contact-field textarea {
  min-width:0;
}

.card {
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
}

.cards>.card:hover {
  transform:none!important;
  box-shadow:none;
}

.cards>.card:has(.solution-details[open]) {
  box-shadow:8px 8px 0 var(--navy);
}

.card>.card-meta {
  grid-row:1;
}

.card>h3 {
  grid-row:2;
}

.card>p {
  grid-row:3;
}

.card>.detail {
  grid-row:5;
  margin-top:0;
}

.card>.solution-details {
  grid-row:6;
  margin-top:24px;
}

.card p, .card .detail, .card .card-meta, .card .solution-details-content li {
  color:#566068;
}

:is(.card:nth-of-type(1),.card:nth-of-type(6)) p, :is(.card:nth-of-type(1),.card:nth-of-type(6)) .detail, :is(.card:nth-of-type(1),.card:nth-of-type(6)) .card-meta, :is(.card:nth-of-type(1),.card:nth-of-type(6)) .solution-details-content li {
  color:rgba(255,255,255,.72);
}

:is(.card:nth-of-type(3),.card:nth-of-type(8)) p, :is(.card:nth-of-type(3),.card:nth-of-type(8)) .detail, :is(.card:nth-of-type(3),.card:nth-of-type(8)) .card-meta, :is(.card:nth-of-type(3),.card:nth-of-type(8)) .solution-details-content li, .case-card:nth-child(3) p, .case-card:nth-child(3) .case-details-content li {
  color:#405158;
}

.solution-picker {
  position:relative;
}

.solution-picker select {
  position:absolute;
  width:1px!important;
  height:1px;
  padding:0!important;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.solution-picker-button {
  position:relative;
  width:100%;
  min-height:52px;
  padding:13px 18% 13px 14px;
  border:1px solid #bac8cb;
  border-radius:5px;
  background:#fff;
  color:var(--navy);
  font:inherit;
  font-size:14px;
  text-align:left;
  cursor:pointer;
}

.solution-picker-button:after {
  content:"";
  position:absolute;
  right:24px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}

.solution-picker-button[aria-expanded="true"]:after {
  transform:translateY(-20%) rotate(225deg);
}

.solution-picker-button:focus-visible {
  outline:2px solid var(--cyan-bright);
  outline-offset:2px;
}

.solution-picker-menu {
  position:absolute;
  z-index:30;
  top:100%;
  left:0;
  right:0;
  display:none;
  max-height:330px;
  margin-top:7px;
  padding:7px;
  overflow-y:auto;
  border:1px solid #bac8cb;
  border-radius:7px;
  background:#fff;
  box-shadow:0 18px 40px rgba(3,36,47,.2);
}

.solution-picker-menu.is-open {
  display:grid;
}

.solution-picker-option {
  width:100%;
  padding:13px 12px;
  border:0;
  border-radius:4px;
  background:#fff;
  color:var(--navy);
  font:inherit;
  font-size:15px;
  text-align:left;
  cursor:pointer;
}

.solution-picker-option:hover,.solution-picker-option.is-selected {
  background:var(--ice);
}

.solution-picker-option:focus-visible {
  background:var(--ice);
  outline:2px solid #18b8e6;
  outline-offset:-2px;
}

@media(max-width:980px) {
  .cta {
    grid-template-columns:minmax(0,1fr);
  }
}

@media(min-width:981px) and (max-width:1800px) {
  .hero-copy {
    padding-left:clamp(32px,4vw,60px);
    padding-right:clamp(24px,3vw,44px);
  }
  .hero h1.hero-title-long {
    font-size:clamp(42px,4.4vw,68px);
  }
}

@media(min-width:761px) {
  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }
  .card:not(:has(.solution-details[open])) {
    width:100%;
    height:clamp(430px,calc(700px - 25vw),520px);
    min-height:clamp(430px,calc(700px - 25vw),520px);
  }
  .card:not(:has(.solution-details[open]))>.detail {
    position:absolute;
    left:34px;
    right:34px;
    width:auto;
    bottom:89px;
    height:37px;
    margin:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    border-top:0;
  }
  .card:not(:has(.solution-details[open]))>.solution-details {
    position:absolute;
    left:34px;
    right:34px;
    width:auto;
    bottom:34px;
    margin:0;
  }
  .card:not(:has(.solution-details[open]))>.solution-details:before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-37px;
    height:1px;
    background:var(--line);
  }
  :is(.card:nth-of-type(1),.card:nth-of-type(6)):not(:has(.solution-details[open]))>.solution-details:before {
    background:rgba(255,255,255,.2);
  }
}

@media(max-width:760px) {
  .cards {
    grid-template-columns:minmax(0,1fr);
  }
  .card,.card:has(.solution-details[open]) {
    height:auto;
    min-height:0;
  }
  .case-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .case-card,.case-card:last-child,.case-card:has(.case-details[open]) {
    grid-column:auto;
    height:auto;
    min-height:380px;
  }
}

@media(max-width:640px) {
  .hero h1.hero-title-long {
    font-size:clamp(26px,8.7vw,52px);
    hyphens:none;
  }
  .hero-visual:after {
    left:calc(73% - 162px);
  }
  .hero-visual .glow {
    left:calc(89% - 120px);
  }
  .clients {
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    padding:28px 22px;
  }
  .client-marquee {
    grid-column:1/-1;
    flex:none;
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  .solutions-cta {
    align-items:flex-start;
    flex-direction:column;
  }
  .solutions-cta .primary {
    width:100%;
  }
  .cta {
    width:100%;
    max-width:100%;
    padding:80px 22px;
    gap:44px;
    overflow:hidden;
  }
  .cta>div {
    min-width:0;
  }
  .cta h2 {
    font-size:clamp(43px,13vw,54px);
    overflow-wrap:normal;
    word-break:normal;
    hyphens:auto;
  }
  .contact-panel {
    padding:22px 18px;
    box-shadow:6px 6px 0 var(--cyan-bright);
  }
  .contact-form {
    grid-template-columns:minmax(0,1fr);
  }
  .contact-field.full,.contact-actions {
    grid-column:auto;
  }
  .contact-actions {
    grid-template-columns:minmax(0,1fr);
  }
  .solution-picker-button {
    min-height:56px;
    font-size:16px;
  }
  .solution-picker-menu {
    position:absolute;
    top:100%;
    max-height:min(300px,45vh);
    margin-top:7px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .solution-picker-option {
    padding:15px 13px;
    font-size:16px;
  }
}

@media(max-width:420px) {
  .hero-visual {
    min-height:790px;
  }
  .dashboard {
    top:38px;
    left:16px;
    width:calc(100% - 32px);
    padding:24px;
    transform:none;
  }
  .platform-title {
    font-size:27px;
  }
  .payment-methods span {
    padding:8px 9px;
    font-size:10px;
  }
  .event-pass {
    top:475px;
    bottom:auto;
    left:24px;
    width:calc(100% - 48px);
    min-height:178px;
  }
  .hero-visual:after {
    left:calc(73% - 162px);
    bottom:-145px;
  }
  footer {
    grid-template-columns:1fr;
    gap:36px;
  }
  .footer-brand {
    grid-column:auto;
  }
  .footer-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
}

/* Hold hero-cirklerne hele ved skiftende bredder; kun bundcirklen beskæres bevidst mod sektionskanten. */
.hero-visual:after {
  width:min(540px,90%);
  height:auto;
  aspect-ratio:1;
  left:auto;
  right:clamp(22px,3vw,46px);
}

.hero-visual .glow {
  width:min(480px,86%);
  height:auto;
  aspect-ratio:1;
  left:auto;
  right:clamp(24px,4vw,56px);
}

@media(max-width:420px) {
  .hero-visual:after {
    width:82%;
  }
  .hero-visual .glow {
    width:78%;
  }
}

@media(prefers-reduced-motion:reduce) {
  .client-track {
    width:auto;
    animation:none;
  }
  .client-group {
    flex-wrap:wrap;
  }
  .client-group[aria-hidden="true"] {
    display:none;
  }
}

/* 03. Kortunivers */
/* Roligt kortunivers: virkelige kundekort som stemningslag, ikke som reklamekarrusel */
.card-showcase {
  position:relative;
  min-height:640px;
  display:grid;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--deep);
  color:#fff;
}

.card-showcase:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(2,15,20,.94) 0%,rgba(2,15,20,.84) 38%,rgba(2,15,20,.44) 68%,rgba(2,15,20,.68) 100%);
}

.card-showcase:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -1px rgba(255,255,255,.08);
}

.card-slideshow {
  position:absolute;
  inset:-18% -5%;
  display:grid;
  grid-template-columns:repeat(3,minmax(260px,1fr));
  grid-auto-rows:max-content;
  gap:clamp(18px,2.3vw,38px);
  transform:rotate(-5deg) scale(1.05);
  opacity:.54;
  filter:saturate(.82);
}

.card-frame {
  position:relative;
  aspect-ratio:1.535/1;
  margin:0;
  overflow:hidden;
  border-radius:11px;
  background:#08f;
  box-shadow:0 28px 70px rgba(0,0,0,.33);
}

.card-frame:nth-child(2),.card-frame:nth-child(5) {
  transform:translateY(54px);
}

.card-frame:nth-child(3),.card-frame:nth-child(6) {
  transform:translateY(-24px);
}

.card-frame img {
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  margin:-6px;
  max-width:none;
  display:block;
  object-fit:cover;
  opacity:1;
  transform:scale(1);
  transition:opacity .9s ease,transform 6s ease;
}

.card-frame.is-changing img {
  opacity:0;
  transform:scale(1.035);
}

.card-showcase-copy {
  position:relative;
  z-index:3;
  width:min(670px,calc(100% - 10vw));
  margin-left:var(--site-gutter);
  padding:46px 48px 42px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:11px;
  background:rgba(3,36,47,.76);
  box-shadow:0 28px 80px rgba(0,0,0,.24);
  backdrop-filter:blur(15px);
}

.card-showcase .kicker {
  color:var(--cyan-bright);
}

.card-showcase h2 {
  margin:18px 0 24px;
  max-width:620px;
  font-size:clamp(54px,6vw,88px);
  line-height:.89;
  letter-spacing:-.065em;
  font-weight:850;
}

.card-showcase p {
  max-width:580px;
  margin:0;
  color:rgba(255,255,255,.76);
  font-size:18px;
  line-height:1.68;
}

@media(max-width:980px) {
  .card-showcase {
    min-height:610px;
  }
  .card-slideshow {
    inset:-5% -25%;
    grid-template-columns:repeat(3,minmax(280px,1fr));
    opacity:.42;
  }
  .card-showcase:before {
    background:rgba(2,15,20,.72);
  }
  .card-showcase-copy {
    width:min(680px,calc(100% - 14vw));
    margin:0 auto;
  }
}

@media(max-width:640px) {
  .card-showcase {
    min-height:0;
    padding:300px 0 34px;
    align-items:end;
  }
  .card-showcase:before {
    background:linear-gradient(180deg,rgba(2,15,20,.18) 0%,rgba(2,15,20,.58) 34%,rgba(2,15,20,.96) 52%,rgba(2,15,20,.98) 100%);
  }
  .card-slideshow {
    inset:-24px -150px auto;
    height:350px;
    grid-template-columns:repeat(3,240px);
    gap:16px;
    transform:rotate(-5deg) scale(1.02);
    opacity:.62;
  }
  .card-frame:nth-child(2),.card-frame:nth-child(5) {
    transform:translateY(28px);
  }
  .card-showcase-copy {
    width:calc(100% - 32px);
    margin:0 auto;
    padding:30px 22px;
    background:rgba(3,36,47,.9);
  }
  .card-showcase h2 {
    font-size:clamp(42px,13vw,49px);
  }
  .card-showcase p {
    font-size:16px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .card-frame img {
    transition:none;
  }
}

/* 04. Hero-animationer og diskret baggrundsbevægelse */
/* Diskrete animation beats – kun i denne separate prototype. */
@media (prefers-reduced-motion:no-preference) {
  .motion-pending .hero-copy>:is(.eyebrow,h1,.lead,.actions,.trust), .motion-pending .hero-visual :is(.glow,.dashboard,.event-pass), .motion-pending .hero-visual:after {
    opacity:0;
  }
  .motion-ready .hero-copy>:is(.eyebrow,h1) {
    opacity:0;
    animation:hero-copy-arrive .62s .02s cubic-bezier(.45,0,.55,1) forwards;
  }
  .motion-ready .hero-copy>.lead {
    opacity:0;
    animation:hero-copy-arrive .46s .3s cubic-bezier(.4,0,.2,1) forwards;
  }
  .motion-ready .hero-copy>:is(.actions,.trust) {
    opacity:0;
    animation:hero-copy-arrive .46s .56s cubic-bezier(.4,0,.2,1) forwards;
  }
  .motion-ready .hero-visual .glow {
    opacity:0;
    will-change:opacity,transform;
    transform-origin:calc(50% + 16px) calc(50% + 10px);
    animation: glow-arrive 1.05s .82s linear forwards, glow-drift 14s 2.4s linear infinite;
  }
  .motion-ready .hero-visual:after {
    opacity:0;
    will-change:opacity,transform;
    transform-origin:calc(50% - 14px) calc(50% + 11px);
    animation: circle-arrive 1.05s .88s linear forwards, circle-drift 17s 2.5s linear infinite;
  }
  .motion-ready .hero-visual .dashboard {
    opacity:0;
    animation:visual-arrive 1.6s 1.46s cubic-bezier(.4,0,.2,1) forwards;
  }
  .motion-ready .hero-visual .event-pass {
    opacity:0;
    animation:pass-arrive 1.6s 1.6s cubic-bezier(.4,0,.2,1) forwards;
  }
  .motion-ready :is(#loesninger,.cta) {
    position:relative;
    overflow:hidden;
    background-image:none;
  }
  .motion-ready :is(#loesninger,.cta)>* {
    position:relative;
    z-index:1;
  }
  .motion-ready :is(#loesninger,.cta):before, .motion-ready :is(#loesninger,.cta):after {
    content:"";
    position:absolute;
    z-index:0;
    display:block;
    border-radius:50%;
    pointer-events:none;
    will-change:transform;
  }
  .motion-ready #loesninger:before {
    width:240px;
    height:240px;
    right:clamp(24px,5vw,80px);
    top:145px;
    bottom:auto;
    border:2px solid rgba(5,47,61,.08);
    transform-origin:calc(50% + 20px) calc(50% + 13px);
    animation:ambient-orbit 21s -7s linear infinite;
    animation-play-state:paused;
  }
  .motion-ready #loesninger:after {
    width:164px;
    height:164px;
    left:7%;
    top:clamp(780px,58vw,1120px);
    bottom:auto;
    background:rgba(217,210,198,.42);
    transform-origin:calc(50% - 15px) calc(50% + 12px);
    animation:ambient-orbit-reverse 24s -13s linear infinite;
    animation-play-state:paused;
  }
  .motion-ready .cta:before {
    width:210px;
    height:210px;
    left:8%;
    bottom:4%;
    border:2px solid rgba(255,255,255,.09);
    transform-origin:calc(50% + 18px) calc(50% - 13px);
    animation:ambient-orbit 26s -18s linear infinite;
    animation-play-state:paused;
  }
  .motion-ready .cta:after {
    width:148px;
    height:148px;
    right:6%;
    top:6%;
    background:rgba(217,210,198,.08);
    transform-origin:calc(50% - 15px) calc(50% - 11px);
    animation:ambient-orbit-reverse 24s -9s linear infinite;
    animation-play-state:paused;
  }
  .motion-ready :is(#loesninger,.cta).motion-active:before, .motion-ready :is(#loesninger,.cta).motion-active:after {
    animation-play-state:running;
  }
  .motion-ready .hero.motion-paused :is(.glow,.event-pass,.dashboard), .motion-ready .hero.motion-paused .hero-visual:after {
    animation-play-state:paused;
  }
  @keyframes hero-copy-arrive {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  @keyframes visual-arrive {
    to {
      opacity:1;
    }
  }
  @keyframes pass-arrive {
    to {
      opacity:1;
    }
  }
  @keyframes glow-arrive {
    to {
      opacity:.14;
    }
  }
  @keyframes circle-arrive {
    to {
      opacity:.95;
    }
  }
  @keyframes glow-drift {
    to {
      transform:rotate(1turn);
    }
  }
  @keyframes circle-drift {
    to {
      transform:rotate(-1turn);
    }
  }
  @keyframes ambient-orbit {
    to {
      transform:rotate(1turn);
    }
  }
  @keyframes ambient-orbit-reverse {
    to {
      transform:rotate(-1turn);
    }
  }
}

/* 05. Afsluttende typografisk og responsiv polering */
/* Afsluttende designpolering: roligere typografi og et mere ensartet hierarki. */
html,body {
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

:is(.header,main,.hero,.hero-copy,.hero-visual,.clients,.section,.cases-section,.card-showcase,.cta,footer) {
  min-width:0;
}

.hero-copy,.hero-visual {
  width:100%;
}

:is(h1,h2,h3,.platform-title,.event-pass strong) {
  text-wrap:balance;
}

p {
  text-wrap:pretty;
}

.header {
  box-shadow:0 1px 0 rgba(5,47,61,.04);
}

.nav a {
  position:relative;
  transition:color .2s ease;
}

.nav a:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:1px;
  background:var(--navy);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .22s ease;
}

.nav a:hover:after,.nav a:focus-visible:after {
  transform:scaleX(1);
  transform-origin:left;
}

.header-cta,.button,.solution-details summary,.case-details summary,.footer-col a {
  transition:color .2s ease,background-color .2s ease,border-color .2s ease,opacity .2s ease,transform .2s ease;
}

.section,.cases-section {
  padding-top:clamp(104px,8vw,132px);
  padding-bottom:clamp(104px,8vw,132px);
}

.section h2,.cases-head h2 {
  font-size:clamp(52px,5.4vw,82px);
  font-weight:790;
  line-height:.94;
  letter-spacing:-.055em;
}

.card-showcase h2 {
  font-size:clamp(50px,5.2vw,76px);
  font-weight:790;
  line-height:.94;
  letter-spacing:-.055em;
}

.cta h2 {
  font-size:clamp(54px,5.4vw,82px);
  font-weight:790;
  line-height:.94;
  letter-spacing:-.055em;
}

.section-head>p,.cases-head>p {
  max-width:560px;
  line-height:1.62;
}

.card,.case-card {
  border-radius:8px;
}

.card h3 {
  font-size:clamp(29px,2.65vw,42px);
  font-weight:790;
  line-height:1.04;
  letter-spacing:-.04em;
}

.card p,.case-card p,.feature p {
  line-height:1.62;
}

.card-meta,.case-meta,.kicker,.eyebrow {
  letter-spacing:.13em;
}

.solution-details summary:hover,.case-details summary:hover {
  opacity:.72;
}

.solution-details summary:after,.case-details summary:after {
  transition:transform .25s ease,background-color .2s ease,color .2s ease;
}

.solution-details summary:hover:after,.case-details summary:hover:after {
  background-color:var(--navy);
  color:#fff;
}

:is(.card:nth-of-type(1),.card:nth-of-type(6)) .solution-details summary:hover:after, .case-card:nth-child(2) .case-details summary:hover:after {
  background-color:#fff;
  color:var(--navy);
}

.feature {
  padding-top:42px;
  padding-bottom:42px;
}

.feature h3 {
  font-weight:790;
  line-height:1.05;
}

.contact-panel {
  border:1px solid rgba(5,47,61,.08);
}

.contact-field input,.contact-field textarea,.solution-picker-button {
  background:#fdfdfc;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}

.contact-field input:hover,.contact-field textarea:hover,.solution-picker-button:hover {
  border-color:#82979d;
  background:#fff;
}

.contact-submit {
  letter-spacing:.01em;
}

.contact-submit:disabled,.contact-submit[aria-busy="true"] {
  cursor:wait;
  opacity:.68;
  transform:none;
}

.contact-privacy {
  grid-column:1/-1;
  margin:0;
  color:#65787e;
  font-size:12px;
  line-height:1.5;
}

.contact-status {
  grid-column:1/-1;
  margin:0;
  padding:12px 14px;
  border:1px solid #b9c8cb;
  border-radius:5px;
  background:#f4f7f7;
  color:var(--navy);
  font-size:13px;
  line-height:1.5;
}

.contact-status[data-state="success"] {
  border-color:#7ca88b;
  background:#eef7f1;
  color:#184d2b;
}

.contact-status[data-state="error"] {
  border-color:#bf8179;
  background:#fff2f0;
  color:#7a2118;
}

.footer-col a:hover {
  color:#fff;
}

@media(max-width:980px) {
  .hero {
    grid-template-columns:minmax(0,1fr);
  }
  .nav a:after {
    display:none;
  }
}

@media(max-width:640px) {
  .section,.cases-section {
    padding-top:84px;
    padding-bottom:84px;
  }
  .section h2,.cases-head h2 {
    font-size:clamp(42px,11vw,49px);
    line-height:.98;
  }
  .card-showcase h2 {
    font-size:clamp(40px,11vw,46px);
  }
  .cta h2 {
    font-size:clamp(44px,12vw,50px);
  }
  .solution-group-head {
    margin-bottom:0;
  }
  .card,.card:has(.solution-details[open]) {
    padding:24px;
  }
  .card-meta {
    min-height:30px;
    padding-left:42px;
  }
  .mark {
    top:18px;
    left:24px;
    width:32px;
    height:32px;
  }
  .card h3 {
    margin:22px 0 12px;
    font-size:clamp(29px,8vw,34px);
    line-height:1.03;
  }
  .card p {
    margin-bottom:14px;
    font-size:15px;
    line-height:1.55;
  }
  .card>.detail {
    padding-top:14px;
  }
  .card>.solution-details {
    margin-top:14px;
    padding-top:16px;
  }
  .solution-details summary:after,
  .case-details summary:after {
    width:28px;
    height:28px;
    flex:0 0 28px;
    box-sizing:border-box;
    background-position:50% 50%;
    background-size:10px 2px,2px 10px;
    transform-origin:50% 50%;
  }
  .hero .eyebrow {
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    width:100%;
    max-width:100%;
    line-height:1.45;
  }
  .hero h1,.hero .lead {
    width:100%;
    max-width:100%;
  }
}

/* 06. Mobilhero og klassisk bevægelse */
/* Mobilversionen er komponeret som sin egen scene frem for en stablet desktophero. */
.header-logo-mobile {
  display:none;
}

/* Mobilheaderen skjules ved scroll ned og vender tilbage ved scroll op. */
@media(max-width:980px) {
  .header {
    width:auto;
    height:58px;
    top:12px;
    left:12px;
    right:12px;
    padding-inline:14px 10px;
    position:fixed;
    border:1px solid rgba(255,255,255,.14);
    border-radius:9px;
    background:rgba(5,47,61,.92);
    box-shadow:0 12px 30px rgba(3,36,47,.2);
    color:#fff;
    z-index:100;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .44s ease,box-shadow .3s ease;
  }
  .header.is-scroll-hidden {
    opacity:0;
    transform:translate3d(0,calc(-100% - 24px),0);
    pointer-events:none;
  }
  body.menu-open .header {
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .header-logo-mobile {
    display:block;
    width:102px;
  }
  .header-logo:not(.header-logo-mobile) {
    display:none;
  }
  .nav {
    top:80px;
    left:12px;
    right:12px;
    border:1px solid rgba(5,47,61,.1);
    border-radius:9px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 64px rgba(2,15,20,.3);
  }
  .menu-toggle {
    min-width:60px;
    min-height:38px;
    padding:8px 12px;
    border-radius:9px;
    border-color:rgba(255,255,255,.6);
    background:transparent;
    color:#fff;
    font-size:13px;
  }
  .hero-copy {
    padding-top:max(104px,8vw);
  }
}

@media(max-width:640px) {
  .hero {
    display:block;
    min-height:0;
    overflow:hidden;
    isolation:isolate;
  }
  .hero:before,.hero:after,.hero-copy:before {
    content:"";
    position:absolute;
    display:block;
    border-radius:50%;
    pointer-events:none;
  }
  .hero:before {
    z-index:0;
    width:230px;
    height:230px;
    top:80px;
    right:-92px;
    background:rgba(33,105,122,.26);
    transform-origin:calc(50% - 18px) calc(50% + 12px);
  }
  .hero:after {
    z-index:0;
    width:260px;
    height:260px;
    right:-128px;
    bottom:190px;
    background:rgba(217,210,198,.1);
    transform-origin:calc(50% + 16px) calc(50% - 12px);
  }
  .hero-copy {
    min-height:min(680px,calc(100svh - 96px));
    margin:0;
    padding:104px 22px 22px;
    position:relative;
    display:flex;
    flex-direction:column;
    z-index:1;
  }
  .hero-copy:before {
    z-index:0;
    width:118px;
    height:118px;
    left:-58px;
    bottom:116px;
    border:1px solid rgba(255,255,255,.12);
    transform-origin:calc(50% + 14px) calc(50% - 10px);
  }
  .hero-copy>* {
    position:relative;
    z-index:1;
  }
  .hero .eyebrow {
    display:block;
    font-size:11px;
    line-height:1.45;
    letter-spacing:.14em;
  }
  .hero .eyebrow:before {
    display:none;
  }
  .hero h1.hero-title-long {
    margin:clamp(52px,7svh,72px) 0 20px;
    font-size:clamp(28px,9vw,38px);
    line-height:.98;
    letter-spacing:-.052em;
  }
  .hero h1 .hero-title-line {
    white-space:nowrap;
  }
  .hero .lead {
    margin-bottom:0;
    font-size:16px;
    line-height:1.55;
    color:rgba(255,255,255,.76);
  }
  .hero .actions {
    margin-top:24px;
    gap:18px;
    flex-direction:column;
    align-items:stretch;
  }
  .hero .actions .primary {
    width:100%;
    min-height:56px;
    padding-inline:14px;
    font-size:13px;
    text-align:center;
  }
  .hero .actions .text-link {
    align-self:center;
    font-size:14px;
  }
  .hero .trust {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 24px;
    margin-top:32px;
    padding-top:22px;
  }
  .hero .trust strong {
    font-size:16px;
  }
  .hero .trust span {
    font-size:11px;
    line-height:1.4;
  }
  .hero-visual {
    display:none;
  }
  .clients {
    min-height:96px;
    gap:12px;
    padding:18px 22px;
  }
}

@media(max-width:350px) {
  .hero-copy {
    padding-left:18px;
    padding-right:18px;
  }
  .header {
    left:8px;
    right:8px;
  }
  .hero h1.hero-title-long {
    font-size:27px;
  }
  .hero .eyebrow {
    font-size:11px;
    letter-spacing:.11em;
    white-space:nowrap;
  }
  .hero .actions .primary {
    font-size:12px;
  }
}

/* Løsningskortets intro beholder præcis samme højde, når detaljerne åbnes. */
.card-overview {
  display:contents;
}

@media(min-width:761px) {
  .card {
    --card-closed-size:clamp(430px,calc(700px - 25vw),520px);
    display:flex;
    flex-direction:column;
  }
  .card:not(:has(.solution-details[open])) {
    height:var(--card-closed-size);
    min-height:var(--card-closed-size);
  }
  .card:has(.solution-details[open]) {
    height:auto;
    min-height:var(--card-closed-size);
  }
  .card-overview {
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) 37px;
    flex:0 0 calc(var(--card-closed-size) - 127px);
    min-height:0;
  }
  .card-overview>.card-meta {
    grid-row:1;
  }
  .card-overview>h3 {
    grid-row:2;
  }
  .card-overview>p {
    grid-row:3;
  }
  .card-overview>.detail {
    grid-row:4;
    position:static;
    display:flex;
    align-items:center;
    width:auto;
    height:37px;
    margin:0;
    padding-top:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .card:not(:has(.solution-details[open]))>.solution-details,.card:has(.solution-details[open])>.solution-details {
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    width:auto;
    margin:0;
  }
  .card:not(:has(.solution-details[open]))>.solution-details:before {
    content:none;
  }
}

@media(max-width:760px) {
  .card-overview>.detail {
    padding-top:14px;
  }
}

/* Kort, samlet hero-reveal med ét fokus og begrænset stagger. */
@media(prefers-reduced-motion:no-preference) {
  .motion-pending .hero:before,.motion-pending .hero:after,.motion-pending .hero-copy:before {
    opacity:0;
  }
  .motion-ready .hero-copy>:is(.eyebrow,h1) {
    animation:hero-left-swoosh .46s .02s cubic-bezier(.22,1,.36,1) forwards;
  }
  .motion-ready .hero-copy>.lead {
    animation:hero-left-swoosh .42s .13s cubic-bezier(.22,1,.36,1) forwards;
  }
  .motion-ready .hero-copy>.actions {
    animation:hero-left-swoosh .42s .21s cubic-bezier(.22,1,.36,1) forwards;
  }
  .motion-ready .hero-copy>.trust {
    animation:hero-left-swoosh .42s .27s cubic-bezier(.22,1,.36,1) forwards;
  }
  .motion-ready .hero-visual .glow {
    animation:glow-arrive .34s .34s cubic-bezier(0,0,.2,1) forwards,glow-drift 16s .68s linear infinite;
  }
  .motion-ready .hero-visual:after {
    animation:circle-arrive .34s .38s cubic-bezier(0,0,.2,1) forwards,circle-drift 19s .72s linear infinite;
  }
  .motion-ready .hero-visual .dashboard {
    opacity:0;
    transform-origin:54% 58%;
    backface-visibility:hidden;
    will-change:opacity,transform;
    animation:visual-arrive .72s .24s cubic-bezier(.19,1,.22,1) forwards;
  }
  .motion-ready .hero-visual .event-pass {
    opacity:0;
    transform-origin:42% 62%;
    backface-visibility:hidden;
    will-change:opacity,transform;
    animation:pass-arrive .72s .34s cubic-bezier(.19,1,.22,1) forwards;
  }
  .motion-ready .hero.motion-intro-skipped .hero-visual .glow {
    opacity:.14;
    animation:glow-drift 16s linear infinite;
  }
  .motion-ready .hero.motion-intro-skipped .hero-visual:after {
    opacity:.95;
    animation:circle-drift 19s linear infinite;
  }
  .motion-ready .hero.motion-intro-skipped .hero-visual :is(.dashboard,.event-pass) {
    opacity:1;
    transform:none;
    animation:none;
  }
  .motion-ready .hero.motion-intro-skipped.motion-paused .hero-visual .glow,
  .motion-ready .hero.motion-intro-skipped.motion-paused .hero-visual:after {
    animation-play-state:paused;
  }
  @media(max-width:640px) {
    .motion-ready .hero.motion-paused:before,.motion-ready .hero.motion-paused:after,.motion-ready .hero.motion-paused .hero-copy:before {
      animation-play-state:paused;
    }
    .motion-ready .hero:before {
      opacity:0;
      animation:mobile-blue-bubble-arrive .36s .42s cubic-bezier(0,0,.2,1) forwards,mobile-bubble-drift 16s .84s ease-in-out infinite alternate;
    }
    .motion-ready .hero:after {
      opacity:0;
      animation:mobile-sand-bubble-arrive .36s .46s cubic-bezier(0,0,.2,1) forwards,mobile-bubble-drift-reverse 19s .88s ease-in-out infinite alternate;
    }
    .motion-ready .hero-copy:before {
      opacity:0;
      animation:mobile-ring-arrive .34s .5s cubic-bezier(0,0,.2,1) forwards,mobile-bubble-drift 18s .9s ease-in-out infinite alternate;
    }
    .motion-ready .hero.motion-intro-skipped:before {
      opacity:1;
      animation:mobile-bubble-drift 16s ease-in-out infinite alternate;
    }
    .motion-ready .hero.motion-intro-skipped:after {
      opacity:1;
      animation:mobile-bubble-drift-reverse 19s ease-in-out infinite alternate;
    }
    .motion-ready .hero.motion-intro-skipped .hero-copy:before {
      opacity:1;
      animation:mobile-bubble-drift 18s ease-in-out infinite alternate;
    }
    .motion-ready .hero.motion-intro-skipped.motion-paused:before,
    .motion-ready .hero.motion-intro-skipped.motion-paused:after,
    .motion-ready .hero.motion-intro-skipped.motion-paused .hero-copy:before {
      animation-play-state:paused;
    }
  }
  @keyframes hero-title-reveal {
    from {
      opacity:0;
      clip-path:inset(0 -6% 100% -2%);
    }
    to {
      opacity:1;
      clip-path:inset(-8% -6% -8% -2%);
    }
  }
  @keyframes hero-left-swoosh {
    from {
      opacity:0;
      transform:translate3d(0,-14px,0);
    }
    to {
      opacity:1;
      transform:none;
    }
  }
  @keyframes hero-support-arrive {
    from {
      opacity:0;
      transform:translate3d(0,6px,0);
    }
    to {
      opacity:1;
      transform:none;
    }
  }
  @keyframes visual-arrive {
    0% {
      opacity:0;
      transform:translate3d(0,16px,0) scale3d(.96,.96,1);
    }
    100% {
      opacity:1;
      transform:none;
    }
  }
  @keyframes pass-arrive {
    0% {
      opacity:0;
      transform:translate3d(0,18px,0) scale3d(.955,.955,1);
    }
    100% {
      opacity:1;
      transform:none;
    }
  }
  @keyframes mobile-blue-bubble-arrive {
    from {
      opacity:0;
      transform:translate3d(5px,4px,0);
    }
    to {
      opacity:1;
      transform:none;
    }
  }
  @keyframes mobile-sand-bubble-arrive {
    from {
      opacity:0;
      transform:translate3d(5px,4px,0);
    }
    to {
      opacity:1;
      transform:none;
    }
  }
  @keyframes mobile-ring-arrive {
    from {
      opacity:0;
      transform:translate3d(-4px,4px,0);
    }
    to {
      opacity:1;
      transform:none;
    }
  }
  @keyframes mobile-bubble-drift {
    to {
      transform:translate3d(10px,-9px,0) rotate(3deg);
    }
  }
  @keyframes mobile-bubble-drift-reverse {
    to {
      transform:translate3d(-9px,10px,0) rotate(-3deg);
    }
  }
}