/* Kynningarkerfi Púls. Litir og letur úr puls-admin (lib/styles.dart og docs/design/design_system_bundle).
   Dökkt fyrst, eins og umsjónarkerfið. Stærðir eru viewport-hlutfallslegar (clamp á vw/vh) svo kynning er óháð upplausn. */

@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* Fletir, dökkt */
  --bg: #141618;
  --card: #1d1e20;
  --border: #232528;
  --hair: #2c2e30;
  --hover: #3f3f40;
  /* Texti, dökkt */
  --text: #fffffe;
  --text2: #e8e8e8;
  --text3: #b9baba;
  --text4: #a1a2a2;
  --dim: #8a8e91;
  /* Fletir og texti, ljóst */
  --l-page: #f4f5f6;
  --l-card: #ffffff;
  --l-tile: #eceef0;
  --l-hair: #e2e4e6;
  --l-text: #24292f;
  --l-text2: #464d55;
  --l-text3: #676767;
  --l-text4: #8a8e91;
  /* Brand */
  --pink: #e33174;
  --pink-hover: #e76093;
  --pink-soft: #f06ba0;
  --purple: #7b3ff2;
  --orange: #f58b00;
  --green: #12ac8f;
  --blue: #5aa6e0;
  --amber: #e0a23c;
  --grad: linear-gradient(90deg, #e33174, #7b3ff2);
  --grad-diag: linear-gradient(135deg, #e33174 0%, #7b3ff2 100%);
  --display: "Gabarito", "Helvetica Neue", Arial, sans-serif;
  --body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.6, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }

/* ---- Skel ---- */
.deck {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
.track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 480ms var(--ease);
  transform: translateX(0);
  will-change: transform;
}

/* ---- Glæra ---- */
.slide {
  position: relative;
  overflow: hidden;
  flex: 0 0 100%;
  height: 100%;
  padding: clamp(96px, 13vh, 140px) 7vw 8vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4vh;
  background: var(--bg);
  color: var(--text);
}
.tone-dark { background: var(--bg); color: var(--text); }
.tone-card { background: var(--card); color: var(--text); }
.tone-light { background: var(--l-page); color: var(--l-text); }
.tone-pink { background: var(--pink); color: #fff; }
.tone-grad { background: var(--grad-diag); color: #fff; }
.align-end { justify-content: flex-end; }
.align-start { justify-content: flex-start; }
.align-row { flex-direction: row; align-items: center; }
.gap-3 { gap: 3vh; }
.gap-5 { gap: 5vh; }

/* ---- Merki ---- */
.logo {
  position: absolute;
  top: clamp(30px, 4vh, 48px);
  left: clamp(36px, 5vw, 80px);
  height: clamp(22px, 2.2vw, 32px);
  width: auto;
  z-index: 5;
}
.tone-pink .logo, .tone-grad .logo { filter: brightness(0) invert(1); }

/* ---- Glóð: mjúkir litblettir sem blæða út fyrir brúnir. Púls-svar við búbblunum. ---- */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(clamp(40px, 6vw, 110px));
  opacity: 0.6;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 13s;
}
.glow-pink { background: var(--pink); }
.glow-purple { background: var(--purple); }
.glow-orange { background: var(--orange); }
.glow-green { background: var(--green); }
.glow-blue { background: var(--blue); }
.glow-white { background: #fff; opacity: 0.35; }
.tone-light .glow { opacity: 0.28; }
.anim-a { animation-name: glowA; }
.anim-b { animation-name: glowB; animation-duration: 17s; }
.anim-c { animation-name: glowC; animation-duration: 9s; }
@keyframes glowA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -2.6vh, 0) scale(1.06); }
}
@keyframes glowB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(1.5vw, -4vh, 0) scale(0.94); }
}
@keyframes glowC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  30% { transform: translate3d(-1.2vw, -2vh, 0) scale(1.08); }
  65% { transform: translate3d(0.9vw, -3.4vh, 0) scale(0.96); }
}
/* Púlslína: þunn lárétt lína í brandhalla, sem skraut eða skil. */
.pulse-line {
  height: 3px;
  border-radius: 999px;
  background: var(--grad);
  width: clamp(64px, 8vw, 140px);
}

/* ---- Innihald ---- */
.content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4vh;
}
.content-centered { margin-top: auto; margin-bottom: auto; }
.above { position: relative; z-index: 3; }
.two-col {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  width: 100%;
}
.two-col-even { grid-template-columns: 1fr 1fr; }
.grid { display: grid; gap: clamp(16px, 1.8vw, 28px); position: relative; z-index: 3; }
.grid-tight { gap: clamp(14px, 1.6vw, 24px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: flex; flex-direction: column; gap: 18px; }

/* ---- Kort: eitt kort, dökkt með hárlínu. Ljóst kort á ljósum glærum. ---- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(24px, 2.6vw, 40px);
  color: var(--text);
}
.tone-light .card, .card-light {
  background: var(--l-card);
  border-color: var(--l-hair);
  color: var(--l-text);
  box-shadow: 0 10px 34px rgba(36, 41, 47, 0.07);
}
.tone-pink .card, .tone-grad .card {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.card-tight { padding: clamp(20px, 2.2vw, 32px); }
.card-feature { padding: clamp(28px, 3vw, 48px); }
.dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-bottom: 20px;
  background: var(--pink);
}
.dot-inline { display: inline-block; margin: 0 10px 0 0; vertical-align: middle; }
.dot-orange { background: var(--orange); }
.dot-purple { background: var(--purple); }
.dot-green { background: var(--green); }
.dot-blue { background: var(--blue); }
.dot-grad { background: var(--grad); }

/* ---- Letur ---- */
.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.text {
  font-family: var(--body);
  font-weight: 400;
  margin: 0;
}
.num { font-variant-numeric: tabular-nums; }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero { font-size: clamp(38px, 5.4vw, 78px); line-height: 1.02; }
.hero-close { font-size: clamp(48px, 8vw, 120px); line-height: 0.95; letter-spacing: -0.03em; }
.chapter { font-size: clamp(56px, 9vw, 132px); line-height: 0.95; letter-spacing: -0.03em; }
.title { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.1; }
.title-2col { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; }
.stat-huge { font-size: clamp(72px, 11vw, 160px); line-height: 0.9; letter-spacing: -0.03em; }
.stat { font-size: clamp(36px, 4.4vw, 62px); line-height: 1; }
.card-head { font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; letter-spacing: 0; }
.value { font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.2; letter-spacing: 0; }

.deck-text { font-size: clamp(19px, 1.8vw, 27px); line-height: 1.45; }
.lead { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.55; }
.body { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; }
.body-sm { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
.footnote { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5; }
.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* Textalitir eftir fleti */
.muted { color: var(--text3); }
.dimmed { color: var(--dim); }
.tone-light .muted { color: var(--l-text2); }
.tone-light .dimmed { color: var(--l-text4); }
.tone-pink .muted, .tone-grad .muted { color: rgba(255, 255, 255, 0.85); }
.tone-pink .dimmed, .tone-grad .dimmed { color: rgba(255, 255, 255, 0.7); }
.pink { color: var(--pink); }
.orange { color: var(--orange); }
.purple { color: var(--purple); }
.green { color: var(--green); }
.blue { color: var(--blue); }

/* ---- Raðir í kortum ---- */
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.row-top { border-top: 1px solid var(--hair); padding-top: 14px; }
.tone-light .row-top { border-top-color: var(--l-hair); }
.rule { border-top: 1px solid var(--hair); padding-top: 5vh; }
.tone-light .rule { border-top-color: var(--l-hair); }

/* ---- Stýringar ---- */
.progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 10;
}
.progress-fill {
  height: 100%;
  background: var(--grad);
  transition: width 480ms var(--ease);
}
.nav {
  position: fixed;
  right: clamp(20px, 2.5vw, 40px);
  bottom: clamp(24px, 3vh, 40px);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 20;
}
.counter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--text3);
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 12px 16px;
  font-variant-numeric: tabular-nums;
}
.btn {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--hair);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background-color 140ms ease-out, border-color 140ms ease-out;
  padding: 0;
}
.btn svg { width: 22px; height: 22px; display: block; }
.btn:hover { border-color: var(--text3); }
.btn-next { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn-next:hover { background: var(--pink-hover); border-color: var(--pink-hover); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(227, 49, 116, 0.45); }

/* Hreyfingar keyra bara á glærunni sem sést. */
.slide:not([data-active]) .glow { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .glow { animation: none !important; }
  .track, .progress-fill { transition: none !important; }
}

/* Mjór skjár: kynningar eru hannaðar fyrir breiðan skjá, en á síma fellur allt í einn dálk svo ekkert skerist. */
@media (max-width: 700px) {
  .slide { padding: clamp(72px, 12vh, 100px) 6vw 12vh; }
  .cols-2, .cols-3, .cols-4, .two-col, .two-col-even { grid-template-columns: 1fr; }
  .align-row { flex-direction: column; align-items: stretch; }
  .content, .grid { overflow-y: auto; }
}