/* Kindem Off-Grid Systems – kindemoffgrid.no */
@font-face{font-family:"DM Serif Display";src:url(fonts/dm-serif-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --natt:#0D0F14; --flate:#151A24; --flate2:#1B2233; --linje:#2A3245;
  --krem:#F4EEDF; --lys:#C9C2B0; --dempet:#A9A393;
  --gull:#D4AF5A; --gull-lys:#F0D58C; --gull-mork:#8A6D2B;
  --serif:"DM Serif Display",Georgia,serif;
  --sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--natt);color:var(--krem);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--gull-lys)} a:hover{color:var(--krem)}
:focus-visible{outline:2px solid var(--gull);outline-offset:3px;border-radius:4px}
h1,h2{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(42px,6vw,76px);line-height:1.02}
h2{font-size:clamp(30px,4vw,48px);line-height:1.1}
h3{margin:0;font-size:18px}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.seksjon{padding-top:clamp(64px,9vw,112px)}
.etikett{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dempet);font-weight:800}
.ingress{color:var(--dempet)}
.hode{display:flex;flex-direction:column;gap:10px;max-width:720px;margin-bottom:36px}
.gull{color:var(--gull)}
.kort{background:var(--flate);border:1px solid var(--linje);border-radius:18px;padding:24px}
.knapp{display:inline-block;background:var(--gull);color:var(--natt);text-decoration:none;padding:15px 24px;border-radius:12px;font-weight:800;text-align:center}
.knapp:hover{background:var(--gull-lys);color:var(--natt)}
.knapp.sek{background:transparent;color:var(--krem);border:1px solid var(--linje)}
.knapp.sek:hover{border-color:var(--gull)}

/* Topp */
.topp{border-bottom:1px solid var(--linje);position:sticky;top:0;z-index:10;background:rgba(13,15,20,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.topp .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.topp .logo img{height:48px;width:auto;display:block}
.meny{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:600}
.meny a{color:var(--krem);text-decoration:none}
.meny a:hover{color:var(--gull-lys)}
.meny .knapp{padding:11px 18px;font-size:15px}
.mobilmeny{display:none;position:relative}
.mobilmeny summary{list-style:none;width:44px;height:44px;border:1px solid var(--linje);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mobilmeny summary::-webkit-details-marker{display:none}
.mobilmeny nav{position:absolute;right:0;top:54px;background:var(--flate);border:1px solid var(--linje);border-radius:14px;padding:10px;display:flex;flex-direction:column;min-width:230px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.mobilmeny nav a{padding:12px 14px;color:var(--krem);text-decoration:none;font-weight:600;border-radius:8px}
.mobilmeny nav a:hover{background:var(--flate2)}
.mobilmeny nav a.knapp{color:var(--natt);margin-top:6px}
@media (max-width:860px){.meny{display:none}.mobilmeny{display:block}.topp .logo img{height:40px}}

/* Hero */
.hero{display:flex;flex-wrap:wrap;gap:40px;align-items:center;padding-top:clamp(36px,6vw,72px)}
.hero-tekst{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:22px}
.hero-bilde{flex:1 1 440px;min-width:0}
.merke{align-self:flex-start;border:1px solid var(--gull-mork);color:var(--gull-lys);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:700}
.hero-tekst .ingress{color:var(--lys);font-size:19px;max-width:34em}
.knapper{display:flex;flex-wrap:wrap;gap:12px}
.liten{font-size:14px;color:var(--dempet)}
@media (max-width:560px){.knapper .knapp{flex:1 1 100%}.hero-tekst .ingress{font-size:17px}}

.stripe{border-top:1px solid var(--linje);border-bottom:1px solid var(--linje);background:var(--flate);margin-top:48px}
.stripe .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 32px;padding-top:28px;padding-bottom:28px}
.stripe b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;color:var(--gull)}
.stripe span{color:var(--dempet);font-size:15px}

/* Dag og natt */
.dn-ramme{background:var(--flate);border:1px solid var(--linje);border-radius:24px;padding:10px;overflow:hidden}
.dn-smal{display:none}
@media (max-width:700px){.dn-bred{display:none}.dn-smal{display:block}}

/* Steg */
.rutenett{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.steg{display:flex;flex-direction:column;gap:12px}
.steg svg{width:100%;height:110px;background:var(--natt);border-radius:12px;display:block}
.steg .nr{font-family:var(--serif);font-size:32px;line-height:1;color:var(--gull)}
.steg p,.utstyr p,.illu p{color:var(--dempet);font-size:15px}

/* Diagram */
.todelt{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.todelt>div{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:16px}
.todelt figure{flex:1 1 480px;min-width:0;margin:0;display:flex;flex-direction:column;gap:14px}
.soyler{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:200px;border-bottom:1px solid var(--linje)}
.soyler div{border-radius:4px 4px 0 0;transform-origin:bottom;transform:scaleY(.02);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.soyler.vist div{transform:scaleY(1)}
.mnd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;text-align:center;font-size:12px;color:var(--dempet);font-weight:700}

/* Utstyr */
.utstyr{display:flex;gap:18px;align-items:flex-start}
.utstyr svg{flex:none}
.utstyr h3{margin-bottom:6px}

/* Illustrasjoner */
.illu{display:flex;flex-direction:column;gap:12px;padding:0;overflow:hidden}
.illu svg{display:block;width:100%;height:auto;background:var(--natt)}
.illu div{padding:0 22px 22px;display:flex;flex-direction:column;gap:6px}

/* Montering */
.montering{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;padding:clamp(28px,5vw,48px)}
.montering>div{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:12px}
.montering h2{font-size:clamp(28px,3.4vw,40px)}

/* Spørsmål */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--linje);padding:20px 0}
.faq details:first-of-type{border-top:1px solid var(--linje)}
.faq summary{cursor:pointer;font-weight:700;font-size:18px}
.faq details p{margin-top:12px;color:var(--dempet)}

/* Avslutning */
.cta{position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;padding:clamp(48px,8vw,80px) 20px;border-radius:24px;background:var(--flate);border:1px solid var(--gull-mork)}
.cta>*{position:relative}
.cta .solbakgrunn{position:absolute;width:640px;height:640px;left:50%;top:50%;margin:-320px 0 0 -320px;opacity:.12;pointer-events:none}
.cta p{color:var(--dempet);max-width:32em}

.bunn{border-top:1px solid var(--linje);margin-top:clamp(64px,9vw,112px)}
.bunn .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:32px;padding-bottom:40px;font-size:14px;color:var(--dempet)}
.bunn img{height:40px;width:auto;display:block}
.bunn nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* Personvern */
.tekstside{max-width:760px;padding-top:56px;padding-bottom:24px}
.tekstside h1{font-size:clamp(36px,5vw,56px);margin-bottom:8px}
.tekstside h2{font-size:28px;margin:40px 0 12px}
.tekstside p,.tekstside li{color:var(--lys)}
.tekstside p+p{margin-top:12px}
.tekstside ul{padding-left:20px;margin:12px 0;display:flex;flex-direction:column;gap:6px}

/* ---------- Animasjoner ---------- */
svg *{transform-box:fill-box}
@keyframes kSpin{to{transform:rotate(360deg)}}
@keyframes kGlow{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes kFlow{to{stroke-dashoffset:-40}}
@keyframes kShimmer{0%{transform:translateX(-70px)}55%,100%{transform:translateX(230px)}}
@keyframes kTwinkle{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes kSmoke{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:.45}100%{transform:translate(18px,-70px) scale(1.8);opacity:0}}
@keyframes kFlicker{0%,100%{opacity:1}40%{opacity:.78}60%{opacity:.95}75%{opacity:.85}}
@keyframes kLad{0%,8%{opacity:.12}22%,85%{opacity:1}100%{opacity:.12}}
@keyframes kHak{0%{stroke-dashoffset:20}14%,80%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:20}}
@keyframes kVoks{0%{transform:scaleY(.05)}22%,82%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
@keyframes kBrev{0%,15%{transform:translateY(22px)}45%,75%{transform:translateY(-16px)}100%{transform:translateY(22px)}}
@keyframes kPlugg{0%,20%{transform:translateX(0)}45%,80%{transform:translateX(15px)}100%{transform:translateX(0)}}
@keyframes kGnist{0%,42%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.15)}62%,100%{opacity:0;transform:scale(.4)}}
@keyframes kBolge{to{transform:translateX(-40px)}}
@keyframes kPing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes kRist{0%,100%{transform:translate(0,0)}25%{transform:translate(.8px,-.6px)}50%{transform:translate(-.8px,.4px)}75%{transform:translate(.6px,.6px)}}
@keyframes kFlamme{0%,100%{transform:scale(1,1)}30%{transform:scale(.92,1.08)}60%{transform:scale(1.05,.94)}}
@keyframes kBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes kSno{0%{transform:translateY(-20px);opacity:0}10%{opacity:.9}100%{transform:translateY(260px);opacity:0}}
@keyframes kStrekk{0%{transform:scaleX(.1)}30%,80%{transform:scaleX(1)}100%{transform:scaleX(.1)}}
@keyframes kRing{0%{stroke-dashoffset:251}40%,80%{stroke-dashoffset:70}100%{stroke-dashoffset:251}}
.k-spin{animation:kSpin 50s linear infinite;transform-origin:center}
.k-glow{animation:kGlow 4s ease-in-out infinite}
.k-flow{stroke-dasharray:6 14;animation:kFlow 1.1s linear infinite}
.k-flow-sakte{stroke-dasharray:4 12;animation:kFlow 2s linear infinite}
.k-shimmer{animation:kShimmer 3.8s ease-in-out infinite}
.k-twinkle{animation:kTwinkle 3s ease-in-out infinite}
.k-smoke{animation:kSmoke 4.5s ease-out infinite;transform-origin:center}
.k-flicker{animation:kFlicker 5s ease-in-out infinite}
.k-lad{animation:kLad 3.2s ease-in-out infinite}
.k-hak{stroke-dasharray:20;animation:kHak 4.5s ease-in-out infinite}
.k-voks{animation:kVoks 4.5s ease-in-out infinite;transform-origin:bottom}
.k-brev{animation:kBrev 4s ease-in-out infinite}
.k-plugg{animation:kPlugg 3.6s ease-in-out infinite}
.k-gnist{animation:kGnist 3.6s ease-in-out infinite;transform-origin:center}
.k-bolge{animation:kBolge 1.6s linear infinite}
.k-ping{animation:kPing 2.2s ease-out infinite;transform-origin:center}
.k-rist{animation:kRist .25s linear infinite}
.k-flamme{animation:kFlamme 1.4s ease-in-out infinite;transform-origin:bottom center}
.k-blink{animation:kBlink 1.8s ease-in-out infinite}
.k-sno{animation:kSno 6s linear infinite}
.k-ring{stroke-dasharray:251;animation:kRing 8s ease-in-out infinite}

/* Dag og natt – 16 s syklus */
@keyframes dnDag{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes dnNatt{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
@keyframes dnSol{0%,38%{transform:translateY(0);opacity:1}50%,90%{transform:translateY(150px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes dnSolS{0%,38%{transform:translateY(0);opacity:1}50%,90%{transform:translateY(90px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes dnMane{0%,46%{opacity:0}56%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes dnDagflyt{0%,40%{opacity:1}47%,94%{opacity:0}100%{opacity:1}}
@keyframes dnAgg{0%,66%{opacity:0}70%,88%{opacity:1}92%,100%{opacity:0}}
@keyframes dnNiva{0%{transform:scaleY(.45)}40%{transform:scaleY(1)}67%{transform:scaleY(.2)}70%{transform:scaleY(.2)}88%{transform:scaleY(.7)}100%{transform:scaleY(.45)}}
@keyframes dnVindu{0%,40%{opacity:.45}50%,90%{opacity:1}100%{opacity:.45}}
@keyframes dnT1{0%,40%{opacity:1}45%,95%{opacity:0}100%{opacity:1}}
@keyframes dnT2{0%,46%{opacity:0}50%,64%{opacity:1}68%,100%{opacity:0}}
@keyframes dnT3{0%,66%{opacity:0}70%,88%{opacity:1}92%,100%{opacity:0}}
@keyframes dnFrem{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.dn-dag{animation:dnDag 16s ease-in-out infinite}
.dn-natt{animation:dnNatt 16s ease-in-out infinite}
.dn-sol{animation:dnSol 16s ease-in-out infinite}
.dn-sol-s{animation:dnSolS 16s ease-in-out infinite}
.dn-mane{animation:dnMane 16s ease-in-out infinite}
.dn-dagflyt{animation:dnDagflyt 16s ease-in-out infinite}
.dn-agg{animation:dnAgg 16s ease-in-out infinite}
.dn-niva{animation:dnNiva 16s ease-in-out infinite;transform-origin:bottom}
.dn-vindu{animation:dnVindu 16s ease-in-out infinite}
.dn-t1{animation:dnT1 16s ease-in-out infinite}
.dn-t2{animation:dnT2 16s ease-in-out infinite}
.dn-t3{animation:dnT3 16s ease-in-out infinite}
.dn-frem{animation:dnFrem 16s linear infinite;transform-origin:left}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .soyler div{transform:none}
  html{scroll-behavior:auto}
}