:root{
  --bg: #ffffff;
  --text: #0b0f1a;
  --muted: rgba(11, 15, 26, 0.64);
  --faint: rgba(11, 15, 26, 0.40);
  --border: rgba(11, 15, 26, 0.10);
  --shadow: 0 10px 30px rgba(11, 15, 26, 0.08);
  --shadow2: 0 16px 48px rgba(11, 15, 26, 0.12);

  --radius: 18px;
  --radius-lg: 28px;

  --container: 1120px;

  --grad-1: radial-gradient(1200px 800px at 20% 10%, rgba(79, 70, 229, 0.22), transparent 55%);
  --grad-2: radial-gradient(1000px 700px at 75% 15%, rgba(59, 130, 246, 0.18), transparent 55%);
  --grad-3: radial-gradient(900px 650px at 55% 70%, rgba(34, 197, 94, 0.14), transparent 55%);

  --highlight-color: #4F46E5;
  --highlight-color-soft: rgba(79, 70, 229, 0.6);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.4;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-decoration-color: rgba(11, 15, 26, 0.25); }

.container{
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

.section{
  position: relative;
  padding: 96px 0;
}

.section.soft{
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.10), rgba(59, 130, 246, 0.06), rgba(34, 197, 94, 0.08));
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo{
  display: block;
  width: auto;
  margin-top: -2px; /* Fine-tune vertical centering */
}

.nav{
  display: flex;
  gap: 18px;
  font-size: 14px;
  color: var(--muted);
}
.nav a{
  padding: 8px 10px;
  border-radius: 10px;
}
.nav a:hover{
  background: rgba(11, 15, 26, 0.04);
  text-decoration: none;
}

.highlight {
   color: var(--highlight-color);
    font-weight: 500;
}

/* Background orbs */
.bg-orb{
  position: fixed;
  inset: auto auto auto auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(30px);
  z-index: -1;
  opacity: 0.9;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.orb-1{
  left: -180px;
  top: -200px;
  background: rgba(79, 70, 229, 0.32);
}
.orb-2{
  right: -220px;
  top: -180px;
  background: rgba(59, 130, 246, 0.26);
}
.orb-3{
  left: 40%;
  bottom: -260px;
  background: rgba(34, 197, 94, 0.20);
}

/* HERO */
.hero{
  padding-top: 110px;
  background:
    var(--grad-1),
    var(--grad-2),
    var(--grad-3);
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.eyebrow{
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

h1{
  margin: 0 0 14px;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.subhead{
  margin: 0 0 10px;
  font-size: 18px;
  color: rgba(11, 15, 26, 0.78);
  max-width: 52ch;
}

.micro{
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--faint);
  max-width: 70ch;
}

.hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.badge{
  font-size: 12px;
  color: rgba(11, 15, 26, 0.72);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
}

/* Phone mock */
.hero-mock{
  justify-self: end;
  width: 100%;
  max-width: 420px;
}

.phone{
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 40px;
  border: 1px solid rgba(11, 15, 26, 0.12);
  background: rgba(255,255,255,0.80);
  box-shadow: var(--shadow2);
  position: relative;
  overflow: hidden;
}

.phone-notch{
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 22px;
  border-radius: 999px;
  background: rgba(11, 15, 26, 0.10);
}

.phone-screen{
  height: 100%;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    radial-gradient(700px 500px at 20% 0%, rgba(79, 70, 229, 0.20), transparent 55%),
    radial-gradient(700px 500px at 80% 10%, rgba(59, 130, 246, 0.14), transparent 55%),
    radial-gradient(700px 500px at 50% 80%, rgba(34, 197, 94, 0.12), transparent 55%);
}

.screen-top{
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pill{
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  color: rgba(11, 15, 26, 0.74);
}

.tiny{
  font-size: 12px;
  color: rgba(11, 15, 26, 0.54);
}

.feedback-card{
  margin-top: 6px;
  padding: 16px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 10px 24px rgba(11,15,26,0.06);
}

.feedback-title{
  margin: 0 0 8px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.feedback-sub{
  margin: 0;
  color: rgba(11, 15, 26, 0.64);
  font-size: 13px;
}

.score-card{
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
}

.score-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.score-label{
  font-size: 12px;
  color: rgba(11, 15, 26, 0.60);
  letter-spacing: 0.2px;
}

.score-value{
  font-size: 12px;
  color: rgba(11, 15, 26, 0.78);
}

.progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(11, 15, 26, 0.08);
  overflow: hidden;
}

.progress-bar{
  height: 100%;
  width: 74%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.9), rgba(59, 130, 246, 0.85), rgba(34, 197, 94, 0.8));
  transition: width 900ms ease;
}

.score-foot{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.screen-bottom{
  margin-top: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip{
  font-size: 11px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  color: rgba(11,15,26,0.68);
}

.mock-caption{
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(11,15,26,0.55);
  text-align: center;
}

/* Sections */
h2{
  margin: 0 0 12px;
  font-size: clamp(24px, 2.3vw, 36px);
  letter-spacing: -0.01em;
}

.lead{
  margin: 0 0 24px;
  font-size: 16px;
  color: rgba(11, 15, 26, 0.72);
  max-width: 68ch;
}

.bullets{
  margin-top: 18px;
  display: grid;
  gap: 18px;
  max-width: 720px;
}

.bullet{
  padding: 18px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 10px 26px rgba(11,15,26,0.05);
}

.bullet-title{
  font-weight: 650;
  margin-bottom: 6px;
}

.bullet-text{
  color: rgba(11, 15, 26, 0.65);
  font-size: 14px;
}

.note{
  margin: 18px 0 0;
  font-size: 12px;
  color: rgba(11, 15, 26, 0.52);
}

/* Cards */
.card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.card{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.card h3{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--highlight-color);
}

.card p{
  margin: 0;
  color: rgba(11, 15, 26, 0.65);
  font-size: 14px;
}

.lift:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
  border-color: rgba(11, 15, 26, 0.18);
}

.card-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  border-color: var(--highlight-color-soft);
  background: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.icon-line{
  width: 6px;
  height: 18px;
  border-radius: 999px;
  background: var(--highlight-color-soft);
}
.icon-line.tall{ height: 24px; }
.icon-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--highlight-color-soft);
}

/* Solution section */
.divider-text{
  margin: 34px 0 14px;
  text-align: center;
  color: rgba(11, 15, 26, 0.62);
  font-size: 14px;
}

.tech-lines{
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.tech-line{
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  color: rgba(11, 15, 26, 0.72);
}

.quote{
  margin: 22px 0 0;
  text-align: center;
  font-size: 13px;
  color: rgba(11, 15, 26, 0.58);
  font-style: italic;
}

/* Footer */
.footer{
  border-top: 1px solid var(--border);
  padding: 42px 0;
  background: rgba(255,255,255,0.75);
}

.footer-inner{
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.footer-text{
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(11, 15, 26, 0.62);
}

.footer-muted{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(11, 15, 26, 0.48);
}

/* Reveal animation */
.reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

/* Responsiveness */
@media (max-width: 980px){
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-mock{
    justify-self: start;
    max-width: 380px;
  }
  .nav{ display: none; }
  .card-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .section{ padding: 72px 0; }
  .container{ width: calc(100% - 32px); }
  .phone{ border-radius: 34px; }
}

/* Større score øverst */
.score-row.big-score {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
}

.score-row.big-score .score-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1;
}

.score-row.big-score .celebrate {
  margin-left: 10px;
  font-size: 28px;
  display: inline-block;
  transform-origin: center;
  animation: pop 900ms ease-in-out infinite;
}

@keyframes pop {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(-8deg); }
}

/* Cirkulær progress (donut) */
  /* Minimalistisk donut med hvidt hul + gradient */
.progress-circle {
  --p: 0;                 /* 0-100 */
  --size: 176px;          /* donut størrelse */
  --thickness: 14px;      /* ring tykkelse */

  /* gradientfarver (justér frit) */
  --g1: #00D2FF;          /* start (0%) */
  --g2: #7CFFB2;          /* midt */
  --g3: #4F46E5;          /* slut (ved progress) */

  width: var(--size);
  height: var(--size);
  margin: 0 auto 14px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;

  /* Track (baggrundsringen) */
  background: conic-gradient(
    rgba(0,0,0,0.08) 0 360deg
  );

  /* Lidt clean kant */
  outline: 1px solid rgba(0,0,0,0.06);
}

/* Progress-lag ovenpå track */
.progress-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;

  /* Her laver vi gradient hele vejen rundt,
     men klipper den ved progress med mask */
  background: conic-gradient(
    from -90deg,
    var(--g1),
    var(--g2),
    var(--g3),
    var(--g1)
  );

  /* Vis kun fra 0% til --p% */
  -webkit-mask: conic-gradient(#000 calc(var(--p) * 1%), transparent 0);
          mask: conic-gradient(#000 calc(var(--p) * 1%), transparent 0);
}

/* “Hullet” i midten: hvidt og minimalistisk */
.progress-circle::after {
  content: "";
  position: absolute;
  inset: var(--thickness);
  border-radius: 50%;
  background: #fff;
}

/* Indholdet i midten skal ligge over hullet */
.progress-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - (var(--thickness) * 2));
  height: calc(100% - (var(--thickness) * 2));
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: transparent; /* vigtigt: så hullet forbliver hvidt */
}

.progress-percent {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  color: rgba(0,0,0,0.88);
}

.progress-sub {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
}

.progress-percent {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.progress-sub {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}


/* =========================
   HumanKind App Mockups
   ========================= */

:root{
  /* Match your existing site vibe here */
  --hk-bg: #ffffff;
  --hk-surface: rgba(255,255,255,0.78);
  --hk-border: rgba(15, 23, 42, 0.10);   /* slate-ish */
  --hk-shadow: 0 14px 40px rgba(15, 23, 42, 0.10);
  --hk-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.08);
  --hk-text: #0f172a;
  --hk-muted: rgba(15, 23, 42, 0.65);
  --hk-faint: rgba(15, 23, 42, 0.48);

  /* Accent should align with your existing CTA blue */
  --hk-accent: #4F46E5; /* HumanKind purple */
  --hk-accent-soft: rgba(79, 70, 229, 0.10);

  --hk-radius-phone: 32px;
  --hk-radius-card: 18px;
  --hk-radius-pill: 999px;

  --hk-font: Inter, Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Phone shell */
.hk-phone{
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.64));
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius-phone);
  box-shadow: var(--hk-shadow);
  overflow: hidden;
  position: relative;
}

.hk-phone::before{
  /* subtle “glass” highlight */
  content: "";
  position: absolute;
  inset: -30% -30% auto auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), transparent 55%);
  pointer-events: none;
  opacity: 0.65;
}

.hk-phone__inner{
  font-family: var(--hk-font);
  background:
    radial-gradient(800px 600px at 20% 0%, rgba(79, 70, 229, 0.10), transparent 55%),
    radial-gradient(800px 600px at 80% 10%, rgba(37, 99, 235, 0.10), transparent 55%),
    radial-gradient(800px 600px at 50% 90%, rgba(16, 185, 129, 0.08), transparent 55%),
    var(--hk-bg);
  padding: 14px;
}

.hk-phone--small .hk-phone__inner{ padding: 12px; }

/* Keep consistent aspect ratio across screens */
.hk-phone{
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
}

.hk-phone--small{
  max-width: 360px;
  aspect-ratio: 9 / 16;
  margin-inline: auto;
}

/* App top bar (shared) */
.hk-appbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 8px;
}

.hk-appbar__title{
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.80);
}

.hk-status-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hk-accent);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.10);
}


.hk-appbar--congrats{
  display: flex;
  flex-direction: column;
  /* valgfrit */
  align-items: center;
  padding: 2em;
}

.hk-appbar--congrats .hk-emoji{
  margin-top: 2em;
  font-size: 2rem;
  line-height: 1;
}

.hk-appbar--congrats .hk-score__label::after{
  content: "🎉";
  display: block;
  margin-top: .5em;
  font-size: 2rem;
  line-height: 1;
  text-align: center;

  animation: hk-pulse 1.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes hk-pulse{
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.12); opacity: .85; }
}



/* Screen container */
.hk-screen{
  padding: 10px;
}

.hk-screen__title{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--highlight-color);
  margin: 6px 2px 10px;
}

/* Card system (shared) */
.hk-card{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius-card);
  box-shadow: var(--hk-shadow-soft);
  padding: 14px 14px;
}

.hk-card + .hk-card{ margin-top: 12px; }

.hk-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* Simple uppercase tag */
.hk-tag{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(79, 70, 229, 0.85);
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.16);
  padding: 6px 10px;
  border-radius: var(--hk-radius-pill);
}

.hk-tag--muted{
  color: rgba(15, 23, 42, 0.62);
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.10);
}

.hk-card__title{
  font-size: 14px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: rgba(15, 23, 42, 0.92);
  font-weight: 650;
}

.hk-card__text{
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(15, 23, 42, 0.68);
}

/* Notes (micro satirical) */
.hk-note{
  margin: 0;
  font-size: 11.5px;
  color: rgba(15, 23, 42, 0.50);
}

/* Suggestion cards: small hover micro-interaction */
.hk-card--suggestion{
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.hk-card--suggestion:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
  border-color: rgba(79, 70, 229, 0.20);
}

.hk-card--secondary{
  background: rgba(255,255,255,0.62);
}

.hk-card--primary{
  background: rgba(79, 70, 229, 0.06);
  border-color: rgba(79, 70, 229, 0.12);
}

/* Screen 1: score dominance */
.hk-screen--hero{ padding-top: 18px; }

.hk-card--hero{
  padding: 22px 18px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
}

.hk-scoreblock{
  text-align: center;
  padding: 12px 8px 8px;
}

.hk-scoreblock__label{
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  margin-bottom: 10px;
}

.hk-scoreblock__value{
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 720;
  color: rgba(15, 23, 42, 0.94);
  margin-bottom: 14px;
}

.hk-scoreblock__meta{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.hk-meta{
  font-size: 12px;
  color: rgba(15, 23, 42, 0.56);
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 6px 10px;
  border-radius: var(--hk-radius-pill);
}

.hk-meta--delta{
  color: rgba(16, 185, 129, 0.92);
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.16);
}

.hk-scoreblock__system{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(15, 23, 42, 0.62);
  max-width: 24ch;
  margin-inline: auto;
}

/* Screen 3: signals list */
.hk-signal-list{
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.hk-signal{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.hk-signal__name{
  font-size: 13px;
  color: rgba(15, 23, 42, 0.80);
  font-weight: 600;
}

.hk-badge{
  font-size: 11px;
  color: rgba(15, 23, 42, 0.62);
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.10);
  padding: 6px 10px;
  border-radius: var(--hk-radius-pill);
}

.hk-badge--muted{
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.54);
}

/* Trend graph */
.hk-trend{
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 10px;
  margin-bottom: 10px;
}

.hk-trend__svg{
  width: 100%;
  height: auto;
  display: block;
}

.hk-trend__grid{
  stroke: rgba(15, 23, 42, 0.08);
  stroke-width: 1;
  fill: none;
}

.hk-trend__line{
  stroke: rgba(79, 70, 229, 0.55);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgba(79, 70, 229, 0.12));
}

/* Section copy styling (optional, matches calm site tone) */
.hk-mockups__copy .hk-kicker{
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.52);
  margin-bottom: 8px;
}

.hk-h3{
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.hk-lead{
  color: rgba(15, 23, 42, 0.68);
  margin: 0 0 10px;
  max-width: 42ch;
}

.hk-micro{
  color: rgba(15, 23, 42, 0.48);
  margin: 0;
  font-size: 12.5px;
}

/* Mobile tweaks */
@media (max-width: 575.98px){
  .hk-scoreblock__value{ font-size: 58px; }
}

/* Screen 2: scroll-cutoff inside the phone (no JS) */
.hk-screen--scroll{
  /* Adjust if your phone inner padding differs */
  max-height: calc(100% - 52px); /* subtract appbar height-ish */
  overflow: auto;
  padding-bottom: 26px;
  position: relative;

  /* smoother scroll on iOS */
  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar (Chrome/Edge/Safari) */
  scrollbar-width: none; /* Firefox */

  /* Always show a soft fade at the bottom so it’s clear there’s more content */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
}
.hk-screen--scroll::-webkit-scrollbar{ display: none; }

/* Soft fade at the bottom to hint “more below” */
/* Previous bottom-overlay approach disabled in favor of mask-image for reliability */
.hk-screen--scroll::after{ content: none; }

/* Make secondary cards slightly tighter so more fits before cutoff */
.hk-card--secondary{
  padding: 12px 14px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}
.hk-card--secondary .hk-card__text{
  margin-bottom: 8px;
}

/* ===== Screen 1: Dashboard content inside existing phone mock ===== */

.hk-screen--dashboard{
  /* Give score ~55% of height by design: use spacing not hard heights */
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: inherit;
}

/* Score block (dominant, lots of air) */
.hk-score{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 10px 12px;
  text-align: center;
}

.hk-score__label{
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hk-muted, rgba(15, 23, 42, 0.55));
  margin-bottom: 10px;
}

.hk-score__value{
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 720;
  color: var(--hk-text, rgba(15, 23, 42, 0.92));
  margin-bottom: 14px;
}

/* Meta pills */
.hk-score__meta{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.hk-meta{
  font-size: 12px;
  color: var(--hk-muted, rgba(15, 23, 42, 0.58));
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.10);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.hk-meta--delta{
  /* keep it subtle; if you have a "success" variable, use it */
  color: rgba(16, 185, 129, 0.85);
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.14);
}

/* Entries block */
.hk-entries{
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

/* Looks like navigation rows (not CTAs) */
.hk-entry{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--hk-border, rgba(15, 23, 42, 0.10));
  background: rgba(255, 255, 255, 0.70);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.hk-entry__title{
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--hk-text, rgba(15, 23, 42, 0.88));
  margin-bottom: 2px;
}

.hk-entry__sub{
  font-size: 12.5px;
  color: var(--hk-muted, rgba(15, 23, 42, 0.62));
  line-height: 1.25;
  max-width: 26ch;
}

/* Chevron */
.hk-entry__chev{
  font-size: 18px;
  line-height: 1;
  color: rgba(79, 70, 229, 0.65); /* aligns with your blue links */
  margin-left: auto;
}

/* Optional hover: subtle */
.hk-entry:hover{
  background: rgba(79, 70, 229, 0.06);
  border-color: rgba(79, 70, 229, 0.18);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
    text-decoration: none !important;
}

/* Make focus visible but calm */
.hk-entry:focus-visible{
  outline: 2px solid rgba(79, 70, 229, 0.35);
  outline-offset: 2px;
}

/* System note (very discreet) */
.hk-system-note{
  margin: 10px 2px 0;
  font-size: 11.5px;
  color: var(--hk-faint, rgba(15, 23, 42, 0.48));
  text-align: center;
}

/* Small screens inside phone */
@media (max-width: 575.98px){
  .hk-score__value{ font-size: 58px; }
  .hk-entry__sub{ max-width: 30ch; }
}

/* Ensure the app background fills the entire phone mock (no empty bottom) */
.hk-phone,
.hk-phone__inner{
  height: 100%;
}

/* If your phone component uses an aspect-ratio, keep it and still fill inner */
.hk-phone{
  display: flex;
}

.hk-phone__inner{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Make the content/screen area take remaining height under the appbar */
.hk-screen--dashboard{
  flex: 1 1 auto;
  min-height: 0;          /* important for flex children */
  height: auto;           /* avoid collapsing */
}

/* Layout for Screen 2 + 3 phone mockups */
.hk-phones-grid{
  display: grid;
  grid-template-columns: 1fr;   /* default = stacked (mobile) */
  gap: 18px;                    /* margin between stacked items */
    padding-top: 28px;
    padding-bottom: 100px;
}

/* Tablet+ / Desktop: side-by-side */
@media (min-width: 768px){
  .hk-phones-grid{
    grid-template-columns: 1fr 1fr;
    gap: 20px;                  /* spacing between phones on desktop */
    align-items: start;
  }
}

/* On mobile, keep phones at their intrinsic max-width and center them */
@media (max-width: 767.98px){
  .hk-phones-grid .hk-phone{
    width: 100%;
    max-width: 360px; /* keep small, avoid growing too big */
    margin-inline: auto;
  }
  .hk-phones-grid .hk-phone--small{
    max-width: 340px; /* slightly smaller variant */
  }
}


@media (min-width: 768px){
  /* On tablet/desktop, allow phones to fill the grid cell width */
  .hk-phones-grid .hk-phone{
    width: 100%;
    max-width: none;              /* fill the grid cell */
    margin: 0;                    /* no centering inside grid */
  }
  .hk-phones-grid .hk-phone--small{
    max-width: 360px;   /* valgfrit: begræns bredden */
    justify-self: center;
  }
}


/* Reviews / Social proof (self-contained) */
.hk-reviews-lead {
  color: var(--muted, rgba(0, 0, 0, 0.62));
  max-width: 56ch;
}

.hk-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.hk-review-card {
  border-radius: 18px;
  padding: 1.05rem 1.05rem 0.95rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.hk-review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

.hk-review-quote {
  margin: 0;
  color: var(--text, rgba(0, 0, 0, 0.86));
  font-size: 0.98rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.hk-review-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0.85rem 0 0;
  color: var(--muted, rgba(0, 0, 0, 0.6));
  font-size: 0.88rem;
}

.hk-review-name {
  font-weight: 600;
  color: var(--highlight-color); /*var(--text, rgba(0, 0, 0, 0.78));*/
}

.hk-review-handle {
  font-weight: 500;
  color: var(--highlight-color-soft); /* var(--muted, rgba(0, 0, 0, 0.5));*/
}

.hk-reviews-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--muted, rgba(0, 0, 0, 0.55));
}

/* Responsive: 1 column on mobile */
@media (max-width: 720px) {
  .hk-reviews-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .hk-review-card {
    border-radius: 16px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hk-review-card {
    transition: none;
  }
  .hk-review-card:hover {
    transform: none;
  }
}