/* Nettsiden til HomeSim: papiret og blekket fra programmet, og målsettingen fra plantegninger
   (strek med endemerker og et mål midt på) som den ene tingen siden bygger på. */
:root {
  --papir: #f4efe5;
  --ark: #fffdf8;
  --blekk: #2f2118;
  --svak: #6f5c47;
  --haar: #e3d8c5;
  --vegg: #2b211b;
  --aksent: #c76a1f;
  --aksent-blekk: #fff8ef;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papir: #1a1511;
    --ark: #231d18;
    --blekk: #f0e7d9;
    --svak: #b6a68f;
    --haar: #3a3029;
    --vegg: #e9dfd0;
    --aksent: #ea9445;
    --aksent-blekk: #1a1511;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papir); color: var(--blekk); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--aksent) 60%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--aksent); }
:focus-visible { outline: 3px solid var(--aksent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
.bredde { width: min(1160px, 100% - 32px); margin-inline: auto; }
.tekst { max-width: 62ch; }

/* ── Toppen ─────────────────────────────────────────────────────────────── */
.topp { display: flex; align-items: center; gap: 24px; padding-block: 18px; }
.merke { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 22px; font-weight: 700; }
.merke img { width: 18px; height: 31px; animation: svev 3.4s ease-in-out infinite; }
.merke sup { font: 600 10px var(--sans); }
@keyframes svev { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .merke img { animation: none; } }
.topp nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.topp nav a { text-decoration: none; color: var(--svak); white-space: nowrap; }
.topp nav a:hover { color: var(--blekk); }
.topp nav .sprak { color: var(--blekk); font-weight: 600; }
@media (max-width: 760px) { .topp nav .valgfri { display: none; } .topp nav { gap: 16px; } }

/* ── Målsettingen: strek, endemerker og målet i en luke midt på ────────── */
.mal { display: flex; align-items: center; gap: 10px; color: var(--svak); font: 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.mal::before, .mal::after { content: ''; flex: 1; height: 9px; border-inline: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.mal::before { border-right: 0; }
.mal::after { border-left: 0; }

/* ── Helten: overskriften, så demoen i et rom med tykke vegger ─────────── */
.helt { padding-block: 40px 28px; }
.helt h1 { font-size: clamp(40px, 7.2vw, 88px); max-width: 13ch; }
.helt .ingress { margin-top: 20px; max-width: 56ch; font-size: 19px; color: var(--svak); }
.handling { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.knapp { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1.5px solid var(--blekk); border-radius: 10px; background: transparent; color: var(--blekk); font: 600 16px var(--sans); text-decoration: none; cursor: pointer; }
.knapp.fylt { background: var(--blekk); color: var(--papir); }
.knapp:hover { border-color: var(--aksent); }
.knapp.fylt:hover { background: var(--aksent); border-color: var(--aksent); color: var(--aksent-blekk); }

.rommet { margin-top: 44px; }
.rommet .mal { margin-bottom: 10px; }
.vegger { position: relative; aspect-ratio: 16 / 10; border: 7px solid var(--vegg); border-radius: 2px; background: var(--ark); overflow: hidden; }
/* Døråpningen i veggen nederst til venstre, som på en plantegning. */
.vegger::after { content: ''; position: absolute; left: 9%; bottom: -7px; width: 13%; height: 7px; background: var(--papir); }
.vegger iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plakat { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: var(--ark); cursor: pointer; }
.plakat picture { position: absolute; inset: 0; }
.plakat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.plakat span { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--blekk); color: var(--papir); font: 600 17px var(--sans); box-shadow: 0 10px 30px rgba(40, 25, 10, 0.25); }
.plakat:hover span { background: var(--aksent); color: var(--aksent-blekk); }
.plakat span::before { content: ''; width: 0; height: 0; border-block: 7px solid transparent; border-left: 11px solid currentColor; }
.under-demo { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; margin-top: 12px; color: var(--svak); font-size: 14px; }
@media (max-width: 760px) {
  .vegger { aspect-ratio: 3 / 4; border-width: 5px; }
  .vegger::after { bottom: -5px; height: 5px; }
}

/* ── Seksjonene ─────────────────────────────────────────────────────────── */
.seksjon { padding-block: 72px; border-top: 1px solid var(--haar); }
.seksjon h2 { font-size: clamp(30px, 4.4vw, 48px); max-width: 20ch; }
.seksjon > .bredde > p.tekst { margin-top: 14px; color: var(--svak); font-size: 18px; }

.steg { display: grid; gap: 48px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: steg; }
.steg li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; counter-increment: steg; }
.steg li:nth-child(even) .steg-bilde { order: -1; }
.steg h3 { font-size: 28px; }
.steg h3::before { content: counter(steg); display: block; margin-bottom: 10px; color: var(--aksent); font: 700 15px var(--sans); }
.steg p { margin-top: 10px; color: var(--svak); }
.steg-bilde { border: 1px solid var(--haar); border-radius: 12px; overflow: hidden; background: var(--ark); }
@media (max-width: 860px) {
  .steg li { grid-template-columns: 1fr; gap: 16px; }
  .steg li:nth-child(even) .steg-bilde { order: 0; }
}

.kan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 36px 0 0; }
.kan div { padding: 20px 0; border-top: 1px solid var(--haar); }
.kan dt { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.kan dd { margin: 6px 0 0; color: var(--svak); }
@media (max-width: 760px) { .kan { grid-template-columns: 1fr; } }

.agenter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.agenter > div, .igang > *, .prinsipper > div { min-width: 0; }
.agenter h3 { font-size: 22px; }
.agenter p { margin-top: 8px; color: var(--svak); }
.agenter pre { margin: 14px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 960px) { .agenter { grid-template-columns: 1fr; } }

pre { overflow-x: auto; padding: 14px 16px; border-radius: 10px; background: var(--vegg); color: var(--papir); font: 14px/1.6 var(--mono); }
pre .k { color: color-mix(in srgb, var(--papir) 55%, transparent); }
code { font-family: var(--mono); font-size: 0.92em; }

.prinsipper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.prinsipper h3 { font-size: 22px; }
.prinsipper p { margin-top: 8px; color: var(--svak); }
@media (max-width: 860px) { .prinsipper { grid-template-columns: 1fr; gap: 22px; } }

.sporsmal { margin-top: 32px; max-width: 760px; }
.sporsmal details { border-top: 1px solid var(--haar); }
.sporsmal details:last-child { border-bottom: 1px solid var(--haar); }
.sporsmal summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-family: var(--serif); font-size: 20px; font-weight: 700; cursor: pointer; list-style: none; }
.sporsmal summary::-webkit-details-marker { display: none; }
.sporsmal summary::after { content: '+'; color: var(--aksent); font-family: var(--sans); font-weight: 400; }
.sporsmal details[open] summary::after { content: '−'; }
.sporsmal details p { padding-bottom: 18px; color: var(--svak); max-width: 64ch; }

.igang { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; margin-top: 32px; }
.igang p + p { margin-top: 12px; }
@media (max-width: 860px) { .igang { grid-template-columns: 1fr; gap: 20px; } }

.bunn { padding-block: 40px 56px; border-top: 1px solid var(--haar); color: var(--svak); font-size: 14px; }
.bunn .bredde { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }

/* ── Krystallen: svever, og snur seg mens den tenker (som i programmet) ─── */
.krystall-rad { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.krystall-scene { position: relative; display: grid; place-items: center; min-height: 340px; padding-top: 60px; }
.krystall-stor { width: 92px; height: auto; filter: drop-shadow(0 0 18px rgba(242, 166, 90, 0.45)); animation: tenk 2.6s ease-in-out infinite; }
.krystall-skygge { width: 70px; height: 10px; margin-top: 26px; border-radius: 50%; background: var(--blekk); opacity: 0.12; animation: skygge 2.6s ease-in-out infinite; }
.tanke { position: absolute; top: 0; left: 50%; max-width: 92%; padding: 8px 14px; transform: translateX(-50%); border: 1px solid var(--haar); border-radius: 16px 16px 16px 4px; background: var(--ark); font: italic 17px var(--serif); color: var(--blekk); white-space: nowrap; transition: opacity 0.25s; }
.tanke.bytter { opacity: 0; }
.krystall-tekst p { margin-top: 14px; color: var(--svak); font-size: 18px; }
@keyframes tenk { 0%, 100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-10px) rotateY(180deg); } }
@keyframes skygge { 50% { transform: scaleX(0.8); opacity: 0.07; } }
@media (prefers-reduced-motion: reduce) { .krystall-stor, .krystall-skygge { animation: none; } }
@media (max-width: 860px) { .krystall-rad { grid-template-columns: 1fr; gap: 12px; } .krystall-scene { min-height: 260px; } }