:root{
  --night: #1B211E;
  --night-deep: #121613;
  --amber: #E3A059;
  --amber-soft: #F2C384;
  --paper: #FAF6EE;
  --ink: #262622;
  --ink-soft: #55534B;
  --mist: rgba(250,246,238,0.72);
  --mist-faint: rgba(250,246,238,0.5);
  --line-dark: rgba(250,246,238,0.14);
  --line-light: #E7DFCB;

  --serif: "Lora", Georgia, serif;
  --sans: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --maxw: 980px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height:1.7;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width: var(--maxw); margin:0 auto; padding: 0 30px; }

p{ margin:0 0 1.1em; }

/* ===== NIGHT HERO ===== */
.night{
  background: radial-gradient(ellipse 900px 500px at 70% 10%, #2A3A34 0%, var(--night) 55%, var(--night-deep) 100%);
  color: var(--mist);
  position: relative;
  overflow:hidden;
}
.night-glow{
  position:absolute;
  width:520px; height:520px;
  right:-120px; top:-160px;
  background: radial-gradient(circle, rgba(227,160,89,0.30) 0%, rgba(227,160,89,0) 70%);
  pointer-events:none;
}
.night .container{ position:relative; z-index:1; }

.hero-illustration{
  max-width: 460px;
  margin: 0 auto 10px;
  opacity: 0.92;
}

.brandmark{
  padding: 34px 0 0;
  display:flex; align-items:center; gap:10px;
  font-family: var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color: var(--amber-soft);
}

.hero-moment{
  padding: 90px 0 100px;
  max-width: 720px;
}
.hero-time{
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--amber-soft);
  margin-bottom: 26px;
  display:flex; align-items:center; gap:10px;
}
.hero-time::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background: var(--amber);
  box-shadow: 0 0 10px 2px rgba(227,160,89,0.7);
}
.hero-moment h1{
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height:1.42;
  color: var(--paper);
  margin: 0 0 34px;
}
.hero-moment .sub{
  font-size: 1.08rem;
  color: var(--mist);
  max-width: 54ch;
  margin-bottom: 40px;
}

.reach-box{
  background: rgba(250,246,238,0.06);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 560px;
}
.reach-box textarea{
  width:100%;
  background: transparent;
  border:none;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  resize: none;
  min-height: 64px;
  padding:0;
}
.reach-box textarea::placeholder{ color: var(--mist-faint); }
.reach-box textarea:focus{ outline:none; }
.reach-foot{
  display:flex; justify-content:space-between; align-items:center;
  border-top: 1px solid var(--line-dark);
  margin-top: 14px; padding-top: 14px;
}
.reach-note{ font-size:0.8rem; color: var(--mist-faint); }

/* ===== MØD DAGEN (morning triage) ===== */
.meet-day{
  background: var(--night-deep);
  padding: 0 0 90px;
  color: var(--mist);
}
.meet-card{
  background: rgba(250,246,238,0.05);
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  padding: 34px 36px 30px;
  max-width: 640px;
}
.meet-kicker{
  font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--amber-soft); margin-bottom:14px; display:block;
}
.meet-card h2{
  font-family: var(--serif); font-weight:500; font-size: clamp(1.35rem,2.6vw,1.7rem);
  color: var(--paper); margin: 0 0 10px; line-height:1.4;
}
.meet-card > p{ color: var(--mist); font-size:0.96rem; margin-bottom: 26px; }

.option-grid{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom: 22px;
}
.option-chip{
  background: transparent;
  border: 1.5px solid var(--line-dark);
  color: var(--mist);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
  text-align:left;
}
.option-chip:hover{ border-color: var(--amber); }
.option-chip.selected{
  background: rgba(227,160,89,0.14);
  border-color: var(--amber);
  color: var(--amber-soft);
}
.option-chip.selected::before{ content: "✓ "; }

.meet-note-field{
  width:100%;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.95rem;
  min-height: 64px;
  resize: none;
  margin-bottom: 20px;
}
.meet-note-field::placeholder{ color: var(--mist-faint); }
.meet-note-field:focus{ outline:none; border-color: var(--amber); }

.meet-submit-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.meet-to{
  display:flex; align-items:center; gap:10px;
  font-size:0.86rem; color: var(--mist-faint);
}
.meet-to .avatar{
  width:30px; height:30px; border-radius:50%;
  background: var(--amber); color:#2A1B08;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-weight:600; font-size:0.85rem;
}

.meet-confirm{
  display:none;
  text-align:center;
  padding: 10px 4px 4px;
}
.meet-confirm.show{ display:block; }
.meet-confirm .check{
  width:44px; height:44px; border-radius:50%;
  background: rgba(227,160,89,0.16); border: 1.5px solid var(--amber);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 16px;
  color: var(--amber-soft); font-size:1.3rem;
}
.meet-confirm p{ color: var(--mist); font-size:0.95rem; max-width:38ch; margin: 0 auto; }
.meet-confirm strong{ color: var(--paper); }

/* ===== VEJEN ER LANG (long road overview) ===== */
.road{ background: var(--paper); padding: 84px 0 70px; }
.road-intro{ max-width: 640px; margin: 0 auto 54px; text-align:center; }
.road-intro .kicker{ font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#B87333; margin-bottom:14px; display:block; }
.road-intro h2{ font-family: var(--serif); font-weight:500; font-size: clamp(1.6rem,3vw,2.2rem); color:#1F2420; margin:0 0 16px; line-height:1.35; }
.road-intro p{ color: var(--ink-soft); font-size:1.02rem; }

.timeline{
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding-left: 36px;
}
.timeline::before{
  content:"";
  position:absolute; left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #D99B54 0, #D99B54 6px, transparent 6px, transparent 14px);
}
.tl-stop{ position:relative; padding-bottom: 40px; }
.tl-stop:last-child{ padding-bottom: 0; }
.tl-stop::before{
  content:"";
  position:absolute; left:-36px; top:3px;
  width:20px; height:20px; border-radius:50%;
  background: var(--paper);
  border: 2.5px solid #B87333;
}
.tl-stop h3{ font-family: var(--serif); font-weight:600; font-size:1.12rem; margin:0 0 8px; color:#1F2420; }
.tl-stop p{ color: var(--ink-soft); font-size:0.96rem; margin:0; max-width:52ch; }

/* ===== IMENS I VENTER (while you wait) ===== */
.while-waiting{ background: #F1EAD9; padding: 80px 0; }
.ww-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  max-width: 960px; margin: 0 auto;
}
.ww-card{
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px;
  border: 1px solid var(--line-light);
}
.ww-icon{
  width:42px; height:42px; border-radius:50%;
  background: var(--paper);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 16px;
}
.ww-card h3{ font-family: var(--serif); font-weight:600; font-size:1.05rem; margin:0 0 10px; color:#1F2420; }
.ww-card p{ font-size:0.92rem; color: var(--ink-soft); margin:0; }

.permission-note{
  max-width: 640px; margin: 46px auto 0; text-align:center;
  font-family: var(--serif); font-style:italic; font-size:1.15rem;
  color:#1F2420; line-height:1.6;
}

/* ===== HVEM ER DER (credibility / who's on the other side) ===== */
.who{ background: var(--paper); padding: 90px 0; }
.who-grid{
  display:grid; grid-template-columns: 0.62fr 1fr; gap: 56px; align-items:center;
  max-width: 940px; margin:0 auto;
}
.who-photo{
  border-radius: 20px;
  overflow:hidden;
  aspect-ratio: 4/5;
  background: #EADFC7;
}
.who-photo img{ width:100%; height:100%; object-fit:cover; }
.who-copy .kicker{ font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#B87333; margin-bottom:14px; display:block; }
.who-copy h2{ font-family: var(--serif); font-weight:500; font-size: clamp(1.5rem,2.6vw,1.95rem); color:#1F2420; margin:0 0 18px; line-height:1.4; }
.who-copy p{ color: var(--ink-soft); font-size:1.01rem; }
.who-copy .signoff{ font-family: var(--serif); font-style:italic; color:#1F2420; margin-top: 22px; }

/* ===== DET I FÅR (the concrete product layer) ===== */
.deliver{ background: #F1EAD9; padding: 86px 0; }
.deliver-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 26px;
  max-width: 980px; margin: 0 auto;
}
.deliver-card{
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  border: 1.5px solid var(--line-light);
  position: relative;
}
.deliver-step{
  font-family: var(--serif); font-style:italic; color:#B87333;
  font-size:0.95rem; margin-bottom:16px; display:block;
}
.deliver-icon{
  width:48px; height:48px; border-radius:50%;
  background: var(--paper);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
}
.deliver-card h3{ font-family: var(--serif); font-weight:600; font-size:1.15rem; margin:0 0 10px; color:#1F2420; }
.deliver-card p{ font-size:0.95rem; color: var(--ink-soft); margin:0; }
.deliver-arrow{
  display:none;
}
@media (min-width: 901px){
  .deliver-card:not(:last-child)::after{
    content:"→";
    position:absolute; right:-24px; top:50%; transform:translateY(-50%);
    color: #C9AD82; font-size:1.4rem;
  }
}

.meet-day-intro{
  max-width: 640px; margin: 0 auto 26px; text-align:center;
}
.meet-day-intro .kicker{ font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--amber-soft); }
.meet-day-intro p{ color: var(--mist); font-size:0.92rem; margin-top:10px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight:700;
  font-size:0.95rem;
  border: none;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease;
}
.btn-amber{ background: var(--amber); color: #2A1B08; }
.btn-amber:hover{ background: var(--amber-soft); transform: translateY(-1px); }
.btn-outline-dark{ background:transparent; border:1.5px solid var(--line-dark); color: var(--mist); }
.btn-outline-dark:hover{ border-color: var(--amber); color: var(--amber-soft); }

/* ===== DOORS (recognition) ===== */
.doors{
  background: var(--paper);
  padding: 76px 0 60px;
}
.doors-intro{ max-width: 620px; margin: 0 auto 40px; text-align:center; }
.doors-intro .kicker{ font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#B87333; margin-bottom:14px; display:block; }
.doors-intro h2{ font-family: var(--serif); font-weight:500; font-size: clamp(1.5rem,2.6vw,2rem); color:#1F2420; margin:0 0 6px; }

.door-tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  max-width: 720px; margin: 0 auto;
}
.door-tag{
  background: #fff;
  border: 1.5px solid var(--line-light);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

/* ===== DIFFERENCE ===== */
.difference{ padding: 80px 0; background: #F1EAD9; }
.diff-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 30px;
  max-width: 940px; margin: 0 auto;
}
.diff-item{ text-align:left; }
.diff-item .num{ font-family:var(--serif); font-style:italic; font-size:1.6rem; color:#B87333; margin-bottom:10px; display:block; }
.diff-icon{
  width:44px; height:44px; border-radius:50%;
  background: #fff; border: 1.5px solid #E4D6BC;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 16px;
}
.diff-item h3{ font-family: var(--serif); font-weight:600; font-size:1.15rem; margin:0 0 10px; color:#1F2420; }
.diff-item p{ font-size:0.95rem; color: var(--ink-soft); margin:0; }

/* ===== CLOSING ===== */
.closing{
  padding: 90px 0 80px;
  text-align:center;
  background: var(--night-deep);
  color: var(--mist);
}
.closing h2{
  font-family: var(--serif); font-style:italic; font-weight:500;
  font-size: clamp(1.5rem,3vw,2.1rem);
  color: var(--paper);
  max-width: 620px; margin: 0 auto 30px;
  line-height:1.5;
}
.closing .btn{ margin: 0 6px; }

footer{
  padding: 30px 0;
  text-align:center;
  font-size:0.8rem;
  color: var(--ink-soft);
  background: var(--paper);
}

.demo-tag{
  position: fixed; bottom:18px; right:18px;
  background: #1F2420; color: var(--paper);
  font-size:0.74rem; padding:8px 15px; border-radius:999px;
  z-index:99; box-shadow:0 8px 20px -8px rgba(0,0,0,0.5);
}

@media (max-width: 900px){
  .deliver-grid{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width: 720px){
  .diff-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-moment{ padding: 60px 0 70px; }
  .who-grid{ grid-template-columns: 1fr; gap:32px; }
  .who-photo{ max-width:300px; margin:0 auto; }
  .ww-grid{ grid-template-columns:1fr; }
  .timeline{ padding-left:30px; }
}