/* ============================================================
   Kommunefangst landing page
   Cartographic dark-mode design
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --bg-0: #05091a;
  --bg-1: #0b1a40;
  --bg-footer: #02050f;
  --bg-light: #faf7f2;

  --text-light: #ffffff;
  --text-muted-dark: #a8b3cf;
  --text-dark: #1a1a1a;
  --text-muted-light: #555555;

  --brand-red-0: #E21E40;
  --brand-red-1: #BA0C2F;
  --brand-blue-0: #003D99;
  --brand-blue-1: #00205B;
  --accent-ice: #7dd3fc;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --max-w: 1200px;
  --pad-x: clamp(20px, 5vw, 48px);
  --nav-height: 61px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-0);
  color: var(--text-light);
  line-height: 1.5;
  font-size: clamp(15px, 1.05vw + 12px, 17px);
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  line-height: 1.1;
}

h1 { font-size: clamp(36px, 7vw, 72px); font-weight: 900; }
h2 { font-size: clamp(28px, 4vw, 44px); }
h3 { font-size: clamp(20px, 2.2vw, 28px); }

.accent {
  font-style: italic;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-ice);
  margin-bottom: 18px;
}

.subhead {
  color: var(--text-muted-dark);
  max-width: 52ch;
  margin: 0 0 28px;
  font-size: clamp(16px, 1.5vw, 19px);
}

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 9, 26, 0.78);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo {
  width: 32px;
  height: 32px;
}
.nav-wordmark {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-muted-dark);
  transition: color 0.2s, background 0.2s;
}
.nav-social:hover {
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.08);
}
.nav-social svg {
  width: 20px;
  height: 20px;
}
.nav-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.nav-lang-link {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  color: var(--text-muted-dark);
  transition: color 0.2s, background 0.2s;
}
.nav-lang-link:hover {
  color: var(--text-light);
}
.nav-lang-link.is-active {
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.08);
}
.nav-lang-sep {
  color: var(--text-muted-dark);
  opacity: 0.5;
}

/* ---------- Hero ---------- */
/* The hero tries to fill (viewport - sticky nav) so the map, headline, and
   CTAs all fit on one screen on typical phones and desktops. On viewports
   that are too short to fit everything (landscape phones, tiny devices)
   we drop that constraint so the hero sizes to its content and the page
   just scrolls. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 0 24px;
  overflow: hidden;
  isolation: isolate;
}
@media (min-height: 640px) {
  .hero {
    min-height: calc(100svh - var(--nav-height));
  }
}
@media (min-width: 900px) {
  .hero {
    padding: 40px 0;
  }
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(11, 26, 64, 0.9) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(34, 8, 56, 0.6) 0%, transparent 50%),
    var(--bg-0);
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px),
    radial-gradient(circle at 75% 60%, rgba(255, 255, 255, 0.04) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1.5px);
  background-size: 180px 180px, 240px 240px, 300px 300px;
  opacity: 0.7;
  pointer-events: none;
}

.hero-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 24px;
  min-height: 0;
  align-items: stretch;
}
@media (min-width: 900px) {
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) 1fr;
    grid-template-rows: 1fr;
    gap: 64px;
    align-items: stretch;
  }
}

.hero-map-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 0;
}
@media (min-width: 900px) {
  .hero-map-wrap {
    flex: initial;
    min-height: 0;
  }
}
.hero-map {
  max-width: 340px;
  /* Sweden's outline is much taller than it is wide (aspect ~0.46). max-width
     alone would let it tower well past the hero — clamp the height so the
     map fills roughly the same envelope as the Norwegian one. */
  max-height: 440px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 61, 153, 0.35));
  will-change: filter;
}
@media (min-width: 600px) {
  .hero-map {
    max-width: 520px;
    max-height: 600px;
  }
}
@media (min-width: 900px) {
  .hero-map {
    max-width: 680px;
    max-height: 760px;
  }
}

.hero-copy {
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Every kommune draws its outline in a south→north stroke wave. Kommuner
   tagged `.k.v` (visited) additionally fade in a brand-colour fill on the
   same cadence, producing the impression of an in-progress map where ~70%
   of Norway has been checked in. Per-path `style="--fd: Xs"` sets the fill
   delay so the generator can schedule the geographic cascade without 356
   nth-child rules. */
.hero-map .k {
  fill: url(#greenGrad);
  stroke: rgba(125, 211, 252, 0.45);
  stroke-width: 0.7;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  fill-opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation-name: kDraw;
  animation-duration: 1.0s;
  animation-timing-function: var(--ease);
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.hero-map .k.v {
  animation-name: kDraw, kFill;
  animation-duration: 1.0s, 0.6s;
  animation-timing-function: var(--ease), var(--ease);
  animation-fill-mode: forwards, forwards;
  animation-delay: 0s, var(--fd, 0.3s);
}

@keyframes kDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes kFill {
  to { fill-opacity: 1; }
}

/* The Swedish hero map has many more, denser paths than the Norwegian one,
   and the dasharray draw-in animation rendered unreliably across them
   (some borders flickered out shortly after load). Override to skip the
   stroke draw-in: borders stay visible from the first paint, only the
   fill cascade animates. */
.hero-map .k {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation-name: none;
}
.hero-map .k.v {
  animation-name: kFill;
  animation-duration: 0.6s;
  animation-timing-function: var(--ease);
  animation-fill-mode: forwards;
  animation-delay: var(--fd, 0.3s);
}

.hero-copy h1 {
  margin-bottom: 0.25em;
}
.hero-copy .accent {
  color: var(--accent-ice);
}
.hero-copy .subhead {
  margin-bottom: 28px;
}
.cta {
  margin-top: 28px;
}
@media (min-width: 900px) {
  .cta {
    margin-top: 32px;
  }
}
.cta-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted-dark);
  margin-bottom: 12px;
}
.cta-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
}
.badge {
  display: inline-block;
  transition: transform 0.2s var(--ease);
  min-width: 0;
  flex-shrink: 1;
}
.badge:hover {
  transform: translateY(-2px);
}
.badge img {
  height: 48px;
  width: auto;
  max-width: 100%;
  display: block;
}
@media (min-width: 900px) {
  .badge img {
    height: 64px;
  }
}

/* ---------- Counter band ---------- */
.counter {
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-0) 100%);
  border-top: 1px solid rgba(125, 211, 252, 0.08);
  border-bottom: 1px solid rgba(125, 211, 252, 0.08);
  padding: clamp(40px, 6vw, 80px) 0;
}
.counter-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
@media (min-width: 700px) {
  .counter-inner {
    flex-direction: row;
    gap: 28px;
    justify-content: center;
  }
}
.counter-value {
  font-size: clamp(72px, 14vw, 160px);
  font-weight: 900;
  line-height: 0.9;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, #a8b3cf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.counter-label {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--text-muted-dark);
  max-width: 28ch;
  font-weight: 500;
}

/* ---------- Features ---------- */
.features {
  background: var(--bg-light);
  color: var(--text-dark);
  padding: clamp(64px, 10vw, 140px) 0;
}
.features-head {
  max-width: 640px;
  margin: 0 auto clamp(48px, 8vw, 96px);
  text-align: center;
}
.features-head h2 {
  color: var(--text-dark);
}
.eyebrow-dark {
  color: var(--brand-red-0);
}

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: clamp(56px, 10vw, 120px);
}
.feature:last-child { margin-bottom: 0; }

@media (min-width: 820px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .feature-reverse .feature-shot { order: 2; }
  .feature-reverse .feature-text { order: 1; }
}

.feature-shot {
  display: flex;
  justify-content: center;
}
.feature-shot img {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 32, 91, 0.18));
}

.feature-text h3 {
  color: var(--text-dark);
  margin-bottom: 12px;
}
.feature-text p {
  color: var(--text-muted-light);
  font-size: clamp(16px, 1.5vw, 19px);
  max-width: 40ch;
  margin: 0;
}

/* Reveal-on-scroll (activated by JS in Task 16) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- How it works ---------- */
.howto {
  background: var(--bg-0);
  padding: clamp(64px, 9vw, 120px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.howto-inner {
  text-align: center;
}
.howto-title {
  margin-bottom: clamp(36px, 5vw, 64px);
}
.howto-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 740px) {
  .howto-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}
.howto-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.howto-num {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(125, 211, 252, 0.3);
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-ice);
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.08), transparent);
}
.howto-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-light);
}

/* ---------- Secondary CTA band ---------- */
.cta-band {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 61, 153, 0.35), transparent 60%),
    var(--bg-0);
  padding: clamp(64px, 9vw, 120px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.cta-band-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.cta-band-title {
  max-width: 18ch;
}
.cta-band .cta-badges {
  justify-content: center;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--bg-footer);
  padding: 48px 0 32px;
  font-size: 14px;
  color: var(--text-muted-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-light);
  font-weight: 700;
  font-size: 16px;
}
.footer-tag {
  margin: 0;
  font-style: italic;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.footer-links a {
  color: var(--text-muted-dark);
  transition: color 0.2s;
}
.footer-links a:hover {
  color: var(--text-light);
}
.footer-links a.is-active {
  color: var(--text-light);
}
.footer-copy {
  margin: 0;
  opacity: 0.6;
  font-size: 13px;
}

/* ---------- Prose (long-form pages like privacy) ---------- */
.prose {
  padding: 64px 0 96px;
}
.prose-inner {
  max-width: 72ch;
  margin: 0 auto;
}
.prose h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 8px;
}
.prose .effective-date {
  color: var(--text-muted-dark);
  font-size: 14px;
  margin: 0 0 40px;
}
.prose h2 {
  font-size: clamp(20px, 2vw, 24px);
  margin-top: 36px;
  margin-bottom: 10px;
  color: var(--text-light);
}
.prose p {
  color: var(--text-muted-dark);
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
}
.prose a {
  color: var(--accent-ice);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover {
  color: var(--text-light);
}
.prose .lead {
  font-size: 18px;
  color: var(--text-muted-dark);
  margin: 0 0 40px;
  line-height: 1.6;
}
.prose .faq {
  margin: 8px 0 40px;
}
.prose details {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.prose details:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.prose details[open] {
  padding-bottom: 20px;
}
.prose summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--text-light);
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
}
.prose summary::-webkit-details-marker {
  display: none;
}
.prose summary::after {
  content: "+";
  font-size: 26px;
  font-weight: 400;
  color: var(--text-muted-dark);
  line-height: 1;
  flex-shrink: 0;
}
.prose details[open] summary::after {
  content: "−";
}
.prose details > p {
  margin-top: 14px;
  margin-bottom: 0;
}
.prose details > p + p {
  margin-top: 10px;
}

/* ---------- Install banner (mobile only) ---------- */
.install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-1);
  color: var(--text-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}
.install-banner[hidden] { display: none; }
.install-banner__close {
  background: none;
  border: 0;
  color: var(--text-muted-dark);
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  flex: 0 0 auto;
}
.install-banner__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  flex: 0 0 38px;
  background: var(--bg-0);
}
.install-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}
.install-banner__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.install-banner__subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted-dark);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.install-banner__cta {
  display: inline-block;
  background: var(--brand-blue-0);
  color: #fff;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (min-width: 900px) {
  .install-banner { display: none !important; }
}