/* ============ Nisso — syntes v9, committed night ============ */
:root{
  color-scheme:dark;
  --natt-0:#0F1322; --natt-1:#171C2B; --natt-2:#1B2130;
  --papper:#FBFAF5; --paper-ink:#26282F; --paper-dim:#6C6F78; --paper-line:#E0DED3;
  --falu:#7E362B; --falu-lift:#C75B44; --lykta:#E8B25C; --markering:#F5D76E;
  --mossa:#4A6B58; --ockra:#B98A3C; --gron:#7FB48B;
  --ink:#D9DCE6; --dim:#8B92A6; --line:#2B3149;
  --mono:Consolas,"Cascadia Mono",ui-monospace,Menlo,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
/* deliberate single-world commitment: the page is night, always — no light variant */
body{background:linear-gradient(180deg,var(--natt-0) 0%, var(--natt-1) 30%, var(--natt-2) 100%);
     color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; margin:0}
h1,h2,h3{margin:0; line-height:1.16; text-wrap:balance; font-family:var(--mono); font-weight:700}
p{margin:0}
a{color:inherit}
.wrap{max-width:1140px; margin:0 auto; padding:0 32px; position:relative; z-index:1}
.label{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
       text-transform:uppercase; color:var(--dim)}

/* the sky sits behind everything, all the way down */
#sky{position:fixed; inset:0; pointer-events:none; z-index:0}
#sky b{position:absolute; width:2px; height:2px; border-radius:50%; background:#4A5372;
    box-shadow:6vw 12vh 0 0 #39415C, 13vw 32vh 0 0 #2E3550, 21vw 7vh 0 0 #4A5372,
    28vw 48vh 0 0 #2E3550, 34vw 18vh 0 0 #39415C, 42vw 62vh 0 0 #2E3550,
    49vw 9vh 0 0 #4A5372, 55vw 38vh 0 0 #39415C, 63vw 74vh 0 0 #2E3550,
    69vw 21vh 0 0 #39415C, 76vw 52vh 0 0 #2E3550, 83vw 12vh 0 0 #4A5372,
    89vw 41vh 0 0 #39415C, 95vw 27vh 0 0 #2E3550, 17vw 82vh 0 0 #2E3550,
    58vw 88vh 0 0 #39415C, 91vw 79vh 0 0 #2E3550, 38vw 92vh 0 0 #2E3550;
    animation:twinkle 7s ease-in-out infinite}
#sky i{position:absolute; width:3px; height:3px; border-radius:50%; background:#C7A76B;
    box-shadow:24vw 24vh 0 0 #A98D5B, 72vw 15vh 0 0 #C7A76B, 47vw 55vh 0 0 #8A7550}
@keyframes twinkle{0%,100%{opacity:.85} 50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){#sky b{animation:none}}

/* documents on the desk */
.doc{background:var(--papper); color:var(--paper-ink); border-radius:2px;
     box-shadow:0 18px 44px rgba(4,6,14,.55); font-family:var(--mono)}
.mark{background:var(--lykta); color:#141828; padding:1px 7px 2px; border-radius:2px;
    box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* scroll reveal */
.js .reveal{opacity:0; transform:translateY(14px);
    transition:opacity .55s ease, transform .55s ease}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1; transform:none; transition:none}}

/* ---------- hero ---------- */
.hero{padding:112px 0 128px; position:relative;
    background:radial-gradient(680px 440px at 74% 30%, rgba(232,178,92,.13), transparent 62%)}
.hero .wrap{display:grid; gap:84px; align-items:center;
    grid-template-columns:minmax(320px,1.08fr) minmax(300px,.92fr)}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr; gap:44px}}
.wordmark{position:relative; display:inline-block; font-family:var(--mono); font-weight:700;
    font-size:clamp(50px,7vw,68px); letter-spacing:.03em; line-height:1; color:#F0EDE5;
    margin-bottom:22px}
.wordmark .i{position:relative; display:inline-block}
.wordmark svg{position:absolute; left:50%; transform:translateX(-52%) rotate(-6deg);
    top:-.32em; width:.5em; color:var(--falu-lift);
    animation:hatDrop .7s cubic-bezier(.2,.9,.3,1.2) .5s backwards}
@keyframes hatDrop{from{transform:translateX(-52%) translateY(-12px) rotate(-14deg); opacity:0}}
.hero h1{font-size:clamp(27px,3.8vw,41px); margin-bottom:20px; color:#EDEAE2}
.hero .sub{color:var(--dim); max-width:30em; margin-bottom:38px; font-size:18px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; padding:13px 26px; font-weight:700; font-size:15.5px;
     font-family:var(--mono); text-decoration:none; border:1.5px solid transparent;
     border-radius:2px}
.btn-solid{background:var(--falu-lift); color:#1A0E0A}
.btn-solid:hover{background:#D2694F}
.btn-line{color:var(--ink); border-color:var(--line)}
.btn-line:hover{border-color:var(--dim)}
.honest{font-size:13.5px; color:var(--dim); margin-top:26px; max-width:32em}
.honest b{color:var(--ink)}

/* veckokvitto */
.kvitto{position:relative; padding:34px 32px 46px; font-size:14.5px; transform:rotate(1deg);
    clip-path:polygon(0 0, 100% 0, 100.00% calc(100% - 9px), 96.88% 100%, 93.75% calc(100% - 9px), 90.62% 100%, 87.50% calc(100% - 9px), 84.38% 100%, 81.25% calc(100% - 9px), 78.12% 100%, 75.00% calc(100% - 9px), 71.88% 100%, 68.75% calc(100% - 9px), 65.62% 100%, 62.50% calc(100% - 9px), 59.38% 100%, 56.25% calc(100% - 9px), 53.12% 100%, 50.00% calc(100% - 9px), 46.88% 100%, 43.75% calc(100% - 9px), 40.62% 100%, 37.50% calc(100% - 9px), 34.38% 100%, 31.25% calc(100% - 9px), 28.12% 100%, 25.00% calc(100% - 9px), 21.88% 100%, 18.75% calc(100% - 9px), 15.62% 100%, 12.50% calc(100% - 9px), 9.38% 100%, 6.25% calc(100% - 9px), 3.12% 100%, 0% calc(100% - 9px))}
.kvitto .kh{text-align:center; letter-spacing:.18em; text-transform:uppercase;
    font-size:10.5px; color:var(--paper-dim); margin-bottom:6px}
.kvitto .kt{text-align:center; font-weight:700; font-size:14.5px; margin-bottom:16px}
.kvitto table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.kvitto td{padding:5px 0; vertical-align:top}
.kvitto td:last-child{text-align:right; white-space:nowrap}
.kvitto tr.rule td{border-top:1px dashed var(--paper-line); padding-top:10px}
.kvitto tr.total td{font-weight:700; border-top:1.5px solid var(--paper-ink); padding-top:10px}

.stamp{position:absolute; right:14px; top:38px; transform:rotate(-10deg);
    font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:.18em;
    color:#B3372C; border:3px double #B3372C; border-radius:5px; padding:5px 12px;
    opacity:.9; animation:stampIn .45s cubic-bezier(.2,1.6,.4,1) .9s backwards}
@keyframes stampIn{from{transform:rotate(-10deg) scale(2); opacity:0}}
@media (prefers-reduced-motion: reduce){
  .wordmark svg{animation:none} .stamp{animation:none} .kvitto{transform:none}}

section{padding:112px 0}

/* ---------- the desk: sky above, work surface below ---------- */
.desk{position:relative; z-index:1; width:min(1240px,96vw); margin:0 auto;
    border-radius:14px;
    background:linear-gradient(180deg,#2E241D 0%, #281F19 55%, #241C17 100%);
    box-shadow:inset 0 20px 34px -18px rgba(6,4,2,.85),
               inset 1px 0 0 rgba(232,178,92,.07), inset -1px 0 0 rgba(232,178,92,.07),
               inset 0 -1px 0 rgba(232,178,92,.10),
               0 30px 90px rgba(0,0,0,.5);
    --dim:#A6988B; --line:#3D332B; --ink:#E5DFD6}
.desk::before{content:""; position:absolute; top:0; left:14px; right:14px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(232,178,92,.55) 26%,
               rgba(232,178,92,.55) 74%, transparent)}
.desk::after{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:min(980px,92%); height:240px; pointer-events:none;
    background:radial-gradient(62% 100% at 50% 0%, rgba(232,178,92,.13), transparent 72%)}
.desk .doc{box-shadow:0 16px 36px rgba(12,8,4,.6)}
.sec-head{max-width:680px; margin-bottom:56px}
.sec-head h2{font-size:clamp(24px,3.2vw,32px); margin:12px 0 12px; color:#EDEAE2}
.sec-head p{color:var(--dim)}

/* ---------- att-göra-lapp + app window ---------- */
.desk-pair{display:grid; gap:40px; grid-template-columns:minmax(290px,.85fr) minmax(340px,1.15fr);
    align-items:start}
@media (max-width:860px){.desk-pair{grid-template-columns:1fr}}
.slip{padding:32px 34px; transform:rotate(-.6deg); font-size:15.5px}
.slip .sh{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--paper-dim); margin-bottom:16px}
.slip ol{list-style:none; margin:0; padding:0; counter-reset:steg}
.slip li{counter-increment:steg; padding:12px 0; border-top:1px dashed var(--paper-line);
    display:flex; gap:14px; align-items:baseline}
.slip li::before{content:counter(steg) "."; font-weight:700; font-size:19px;
    color:var(--falu); min-width:26px}
.slip li:first-child{border-top:none; padding-top:0}
.slip li span{color:var(--paper-dim); font-size:13.5px; display:block}
.slip li:last-child::before{color:var(--ockra)}
.slip .under{margin-top:14px; font-size:12.5px; color:var(--paper-dim);
    border-top:1.5px solid var(--paper-ink); padding-top:10px}

/* the app window — echoes the real product UI */
.appwin{background:var(--natt-2); border:1px solid #333B52; border-radius:10px;
    box-shadow:0 24px 60px rgba(4,6,14,.6); overflow:hidden}
.appbar{display:flex; align-items:center; gap:6px; padding:11px 14px;
    border-bottom:1px solid #2B3149; background:#181D2C}
.appbar span{width:9px; height:9px; border-radius:50%; background:#3A4160}
.appbar .t{flex:1; text-align:center; font-family:var(--mono); font-size:11px;
    color:var(--dim); letter-spacing:.1em}
.appbody{padding:26px 28px}
.ok-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--dim); margin-bottom:14px;
    display:flex; justify-content:space-between; gap:10px}
#demo-status.ok{color:var(--gron)}
.prop{border:1px solid #2B3149; border-radius:8px; padding:20px 22px; background:#1A2030}
.prop .who{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.prop .who .av{width:32px; height:32px; border-radius:50%; background:#242B40;
    display:grid; place-items:center}
.prop .who .av svg{width:15px}
.prop .who b{font-size:14px; color:var(--ink)}
.prop .who small{display:block; font-size:11.5px; color:var(--dim)}
.prop dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0 0 12px;
    font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums}
.prop dt{color:var(--dim)} .prop dd{margin:0; color:var(--ink); min-height:1.2em}
.prop dd.typing::after{content:"▌"; color:var(--lykta); animation:blink .8s step-end infinite}
@keyframes blink{50%{opacity:0}}
.prop .notis{font-size:12.5px; color:var(--gron); opacity:0; transition:opacity .4s;
    margin-bottom:14px}
.prop .notis.show{opacity:1}
.demo-actions{display:flex; gap:10px; flex-wrap:wrap; opacity:.35; transition:opacity .4s;
    pointer-events:none}
.demo-actions.ready{opacity:1; pointer-events:auto}
.abtn{padding:9px 20px; font-size:13.5px; font-weight:700; font-family:var(--mono);
    border:1.5px solid #333B52; background:none; color:var(--ink); border-radius:5px;
    cursor:default}
#btn-godkann{background:var(--falu-lift); color:#1A0E0A; border-color:var(--falu-lift);
    cursor:pointer}
#btn-godkann:hover{background:#D2694F}
.appwin.done #btn-godkann{background:#2E4638; color:var(--gron); border-color:#2E4638;
    cursor:default}
.demo-after{font-size:13px; color:var(--gron); margin-top:12px; opacity:0; transition:opacity .5s}
.demo-after.show{opacity:1}
.try-hint{font-family:var(--mono); font-size:12px; color:var(--lykta); margin-top:10px}

/* ---------- löftet ---------- */
.loftet{text-align:center; max-width:760px; margin:0 auto}
.loftet .rad{font-family:var(--mono); font-weight:700; color:#EDE6DA;
    font-size:clamp(20px,2.9vw,30px); line-height:1.5}
.loftet .rad b{color:var(--falu-lift); font-weight:700}
.loftet .tail{margin-top:26px; color:var(--dim); font-size:15.5px; max-width:36em;
    margin-left:auto; margin-right:auto}
.loftet .tail em{font-style:normal; color:var(--lykta)}

/* ---------- ansökningar ---------- */
.board{display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:28px}
.cv{padding:30px 28px 26px; display:flex; flex-direction:column; font-size:14px}
.cv:nth-child(1){transform:rotate(-.5deg)} .cv:nth-child(2){transform:rotate(.4deg)}
.cv:nth-child(3){transform:rotate(-.3deg)} .cv:nth-child(4){transform:rotate(.5deg)}
@media (prefers-reduced-motion: reduce){.cv{transform:none !important}}
.cv .ch{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--paper-dim); margin-bottom:14px; display:flex; justify-content:space-between}
.cv .hatrow{display:flex; align-items:center; gap:10px; margin-bottom:2px}
.cv .hatrow svg{width:22px}
.cv h3{font-size:19px}
.cv .soker{font-size:12px; color:var(--falu); margin:2px 0 14px; text-transform:uppercase;
    letter-spacing:.06em}
.cv ul{list-style:none; margin:0 0 14px; padding:0; color:var(--paper-dim); flex:1;
    font-family:var(--sans); font-size:13.5px}
.cv li{padding:5px 0; border-top:1px dashed var(--paper-line); display:flex; gap:8px}
.cv li::before{content:"·"; font-weight:900; color:var(--falu)}
.cv .begar{font-size:12.5px; border:1px solid var(--paper-line); border-radius:2px;
    padding:9px 12px; margin-bottom:16px; color:var(--paper-dim)}
.cv .begar b{color:var(--paper-ink)}
.cv .hire{display:block; text-align:center; padding:13px 0; font-weight:700; font-size:14px;
    text-decoration:none; background:var(--paper-ink); color:var(--papper); border-radius:2px}
/* the empty application — a real paper, faded */
.cv.ghost-paper{opacity:.82}
.cv.ghost-paper .blank{border-top:1px dashed var(--paper-line); height:22px}
.cv.ghost-paper .blank:first-of-type{margin-top:4px}
.cv.ghost-paper .gh-note{color:var(--paper-dim); font-size:13.5px; font-family:var(--sans);
    margin:10px 0 14px; flex:1}

/* ---------- anställningsvillkor ---------- */
.villkor{max-width:640px; margin:0 auto; padding:34px 38px 28px; font-size:14px;
    transform:rotate(.4deg)}
.villkor .vh{text-align:center; font-size:10.5px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--paper-dim); margin-bottom:18px}
.villkor .p{display:flex; gap:14px; padding:11px 0; border-top:1px dashed var(--paper-line)}
.villkor .p:first-of-type{border-top:none; padding-top:0}
.villkor .p b{min-width:30px; color:var(--falu); font-size:15px}
.villkor .p div{line-height:1.55}
.villkor .p div em{font-style:normal; font-weight:700}
.villkor .p div span{color:var(--paper-dim); display:block; font-size:12.5px}
.villkor .fine{margin-top:16px; border-top:1.5px solid var(--paper-ink); padding-top:10px;
    font-size:11.5px; color:var(--paper-dim); font-style:italic; font-family:Georgia,serif}

/* ---------- pilot: the main CTA ---------- */
.pilot{text-align:center; padding-block:48px 24px}
.pilot h2{font-size:clamp(32px,5vw,52px); color:#EDEAE2; margin:18px 0 18px}
.pilot p{color:var(--dim); max-width:34em; margin:0 auto 42px; font-size:clamp(16px,1.9vw,18px)}
.pilot .btn-big{display:inline-block; background:var(--falu-lift); color:#1A0E0A;
    font-family:var(--mono); font-weight:700; font-size:clamp(16px,2vw,19px);
    padding:17px 40px; border-radius:3px; text-decoration:none;
    box-shadow:0 10px 34px rgba(199,91,68,.35)}
.pilot .btn-big:hover{background:#D2694F}
.pilot .under{font-size:13px; color:var(--dim); margin-top:16px}

footer{padding:34px 0 52px; font-size:13px; color:var(--dim); font-family:var(--mono);
    position:relative; z-index:1}
footer .wrap{border-top:1px solid var(--line); padding-top:20px; display:flex;
    flex-wrap:wrap; gap:8px 28px; justify-content:space-between}
:focus-visible{outline:2px solid var(--falu-lift); outline-offset:2px}

/* ---------- demo page (standalone, same-origin) ---------- */
.demo-top{padding:96px 0 48px; text-align:center; position:relative;
    background:radial-gradient(640px 400px at 50% 10%, rgba(232,178,92,.13), transparent 62%)}
.demo-top .wordmark-link{text-decoration:none; display:inline-block}
.demo-lead{color:var(--dim); max-width:34em; margin:0 auto; font-size:16.5px}
.demo-wrap{max-width:640px; margin:0 auto; padding:0 24px 8px}
.demo-back{text-align:center; padding:56px 0 96px}
.demo-back p{color:var(--dim); font-size:14.5px; margin-bottom:18px}