/* Storsekk.no — premium design system v2 (Clash Display + General Sans) */
:root{
  --bg:#0B0C0E; --bg2:#101114; --panel:rgba(255,255,255,.035); --panel2:rgba(255,255,255,.06);
  --ink:#ECEAE3; --dim:#8F8D86; --faint:#5A5952;
  --amber:#F5B50A; --amber-soft:rgba(245,181,10,.14); --amber-dim:#C4920E;
  --hair:rgba(255,255,255,.08); --hair2:rgba(255,255,255,.14);
  --disp:"Clash Display",sans-serif; --body:"General Sans",sans-serif; --mono:"IBM Plex Mono",monospace;
  --ease:cubic-bezier(.32,.72,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;overflow-x:hidden}
::selection{background:var(--amber);color:#141517}
a{color:inherit}
img,video{max-width:100%;height:auto;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}

[data-r]{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
[data-r].in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-r]{opacity:1;transform:none;filter:none;transition:none}
  .marquee-track{animation:none!important}
  *{transition-duration:.01ms!important}
}

.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);background:var(--panel);border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--amber);display:inline-block}

/* island-nav */
.nav-shell{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;padding-top:22px;pointer-events:none}
.island{pointer-events:auto;display:flex;align-items:center;gap:24px;background:rgba(14,15,17,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.45);border-radius:999px;padding:10px 12px 10px 22px}
.brand{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.brand b{color:var(--amber);font-weight:600}
.island nav{display:flex;gap:22px;font-size:14px;color:var(--dim);align-items:center}
.island nav > a, .idrop > a{text-decoration:none;transition:color .3s var(--ease)}
.island nav > a:hover, .idrop > a:hover{color:var(--ink)}
.idrop{position:relative}
.idrop > a::after{content:" ▾";font-size:10px}
.idrop-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);background:rgba(14,15,17,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--hair);border-radius:20px;padding:12px;display:none;grid-template-columns:1fr 1fr;gap:2px 14px;min-width:380px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.idrop:hover .idrop-menu,.idrop:focus-within .idrop-menu{display:grid}
.idrop-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.idrop-menu a{text-decoration:none;padding:7px 12px;border-radius:10px;font-size:13.5px;color:var(--dim);transition:background .25s var(--ease),color .25s var(--ease)}
.idrop-menu a:hover{background:var(--panel2);color:var(--ink)}
.pill-cta{display:inline-flex;align-items:center;gap:10px;background:var(--amber);color:#151310;text-decoration:none;font-weight:600;font-size:14px;border-radius:999px;padding:9px 8px 9px 18px;transition:transform .4s var(--ease);white-space:nowrap}
.pill-cta .ico{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.16);display:grid;place-items:center;transition:transform .4s var(--ease)}
.pill-cta:hover .ico{transform:translate(2px,-1px) scale(1.06)}
.pill-cta:active{transform:scale(.97)}
.burger{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.6px;background:var(--ink);transition:transform .45s var(--ease),top .45s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:23px}
.menu-open .burger span:nth-child(1){top:19px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:19px;transform:rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:55;background:rgba(8,9,10,.85);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;overflow-y:auto;padding:110px 28px 40px}
.menu-open .overlay{opacity:1;visibility:visible}
.overlay .ov-main{display:flex;flex-direction:column;gap:6px;text-align:center;margin-bottom:34px}
.overlay .ov-main a{font-family:var(--disp);font-weight:600;font-size:clamp(28px,6.5vw,40px);text-decoration:none;opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.overlay .ov-main a:hover{color:var(--amber)}
.menu-open .overlay .ov-main a{opacity:1;transform:none}
.menu-open .overlay .ov-main a:nth-child(1){transition-delay:.06s}.menu-open .overlay .ov-main a:nth-child(2){transition-delay:.11s}
.menu-open .overlay .ov-main a:nth-child(3){transition-delay:.16s}.menu-open .overlay .ov-main a:nth-child(4){transition-delay:.21s}
.menu-open .overlay .ov-main a:nth-child(5){transition-delay:.26s}
.overlay .ov-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);text-align:center;margin-bottom:14px}
.overlay .ov-prods{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px;margin:0 auto}
.overlay .ov-prods a{border:1px solid var(--hair2);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--dim);text-decoration:none}
.overlay .ov-prods a:hover{border-color:var(--amber);color:var(--ink)}
@media(max-width:960px){.island nav,.island .pill-cta{display:none}.burger{display:block}.island{gap:14px;padding:8px 10px 8px 18px}}

/* hero — startsida */
.hero{position:relative;min-height:92dvh;display:flex;align-items:center;padding:150px 0 80px;overflow:hidden}
.hero .orb1{width:640px;height:640px;background:rgba(245,181,10,.10);top:-160px;right:-120px}
.hero .orb2{width:420px;height:420px;background:rgba(245,181,10,.05);bottom:-140px;left:-140px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;position:relative}
h1{font-family:var(--disp);font-weight:600;font-size:clamp(40px,5.2vw,72px);line-height:1.03;letter-spacing:-.02em;margin:26px 0 22px;text-wrap:balance}
h1 .accent,h1 em{font-style:normal;color:var(--amber)}
.lead{font-size:18px;color:var(--dim);max-width:54ch;margin-bottom:34px}
.cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:52px}
.link-quiet{font-size:15px;color:var(--dim);text-decoration:none;border-bottom:1px solid var(--hair2);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.link-quiet:hover{color:var(--ink);border-color:var(--amber)}
.stats{display:flex;border-top:1px solid var(--hair);max-width:560px;flex-wrap:wrap}
.stat{padding:18px 26px 0 0;margin-right:26px;border-right:1px solid var(--hair)}
.stat:last-child{border-right:none;margin-right:0}
.stat b{font-family:var(--disp);font-weight:600;font-size:28px;display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
@media(max-width:960px){.hero{padding-top:120px;min-height:auto}.hero-grid{grid-template-columns:1fr;gap:44px}}

/* produkt-hero */
.p-hero{position:relative;padding:150px 0 70px;overflow:hidden}
.p-hero .orb1{width:520px;height:520px;background:rgba(245,181,10,.08);top:-140px;right:-100px}
.p-hero .hero-grid{align-items:center}
.p-hero h1{font-size:clamp(36px,4.4vw,58px)}
@media(max-width:960px){.p-hero{padding-top:125px}}

/* double-bezel */
.bezel{background:var(--panel);border:1px solid var(--hair);border-radius:28px;padding:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px rgba(0,0,0,.5)}
.bezel-core{border-radius:19px;overflow:hidden;position:relative;background:#000;box-shadow:inset 0 1px 1px rgba(255,255,255,.1)}
.bezel-core img{width:100%;aspect-ratio:4/3;max-height:480px;object-fit:cover}
.bezel-core video{width:100%;cursor:pointer}
/* Filmruta: tyst loop tills någon trycker. Hela ytan är knapp — inte en ikon. */
.film{position:relative}
.bezel-core .film-hel{display:none}
.bezel-core .film.spelas .film-teaser,.film.spelas .film-teaser{display:none}
.bezel-core .film.spelas .film-hel,.film.spelas .film-hel{display:block}
.film.spelas .film-spill,.film.spelas .imgtag{display:none}
.film-spill{position:absolute;inset:0;width:100%;border:0;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  color:#fff;font:inherit;background:linear-gradient(180deg,rgba(10,10,11,.14) 0%,rgba(10,10,11,.52) 100%);
  transition:background .45s var(--ease)}
.film-spill:hover{background:linear-gradient(180deg,rgba(10,10,11,.06) 0%,rgba(10,10,11,.42) 100%)}
.film-spill:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.film-knapp{display:inline-flex;align-items:center;gap:9px;padding:13px 25px;border-radius:999px;
  background:var(--amber);color:#101012;font-weight:700;font-size:1rem;
  box-shadow:0 14px 32px -14px rgba(0,0,0,.8);transition:transform .45s var(--ease)}
.film-spill:hover .film-knapp{transform:translateY(-2px)}
.film-spill:active .film-knapp{transform:scale(.97)}
.film-knapp svg{width:19px;height:19px;fill:currentColor}
.film-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
@media (max-width:640px){.film-knapp{padding:15px 28px;font-size:1.05rem}.film-meta{font-size:11px}}
@media (prefers-reduced-motion:reduce){.film-spill:hover .film-knapp,.film-spill:active .film-knapp{transform:none}}
.tilt{transform:rotate(1.6deg);transition:transform .8s var(--ease)}
.tilt:hover{transform:rotate(0deg) scale(1.01)}
.tilt-l{transform:rotate(-1.4deg);transition:transform .8s var(--ease)}
.tilt-l:hover{transform:rotate(0deg) scale(1.01)}
.imgtag{position:absolute;left:14px;bottom:14px;background:rgba(10,10,11,.72);backdrop-filter:blur(10px);border:1px solid var(--hair);border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);pointer-events:none}
@media(max-width:960px){.tilt,.tilt-l{transform:none}}

/* marquee */
.marquee{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden;padding:14px 0;background:var(--bg2)}
.marquee-track{display:flex;gap:48px;width:max-content;animation:mq 38s linear infinite;font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.marquee-track b{color:var(--amber-dim);font-weight:500}
@keyframes mq{to{transform:translateX(-50%)}}

/* sektioner */
section{padding:104px 0;position:relative}
.sec-head{margin-bottom:52px;max-width:660px}
.sec-head.right{margin-left:auto;text-align:right}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(29px,3.5vw,46px);line-height:1.06;letter-spacing:-.015em;margin:18px 0 14px;text-wrap:balance}
.sec-head p{color:var(--dim)}
h3{font-family:var(--disp);font-weight:600}

/* breadcrumbs */
.crumbs{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.06em;margin-bottom:8px}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--amber)}
.crumbs span[aria-current]{color:var(--dim)}

/* USP */
.usp-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px}
.usp{background:var(--panel);border:1px solid var(--hair);border-radius:24px;padding:8px}
.usp-core{background:var(--bg2);border-radius:17px;padding:30px 28px;height:100%;box-shadow:inset 0 1px 1px rgba(255,255,255,.05);transition:transform .5s var(--ease)}
.usp:hover .usp-core{transform:translateY(-3px)}
.usp svg{width:34px;height:34px;stroke:var(--amber);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.usp h3{font-size:21px;margin-bottom:8px}
.usp p{font-size:14.5px;color:var(--dim)}
@media(max-width:960px){.usp-grid{grid-template-columns:1fr}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.b-card{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--hair);background:var(--bg2);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;isolation:isolate}
.b-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform 1s var(--ease),opacity .6s var(--ease);z-index:-1}
.b-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,14,.05) 30%,rgba(11,12,14,.88));z-index:-1}
.b-card:hover img{transform:scale(1.05);opacity:.7}
.b-body{padding:24px}
.b-body h3{font-size:24px}
.b-body .pris{font-family:var(--mono);font-size:12px;color:var(--amber);letter-spacing:.06em;margin-top:4px;display:block;font-variant-numeric:tabular-nums}
.b-lg{grid-column:span 6;min-height:320px}
.b-md{grid-column:span 3}
.b-sm{grid-column:span 3;min-height:180px}
.b-list{grid-column:span 6;background:var(--panel);border:1px solid var(--hair);border-radius:24px;padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.b-list p{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.chiprow a,.chiprow span{border:1px solid var(--hair2);border-radius:999px;padding:7px 15px;font-size:13.5px;color:var(--dim);text-decoration:none;transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.chiprow a:hover{border-color:var(--amber);color:var(--ink);transform:translateY(-1px)}
@media(max-width:960px){.b-lg,.b-md,.b-sm,.b-list{grid-column:span 12}}

/* steg — z-kaskad */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1050px;margin:0 auto}
.stepc{background:var(--panel);border:1px solid var(--hair);border-radius:24px;padding:8px;position:relative}
.stepc-core{background:var(--bg2);border-radius:17px;padding:30px 26px;height:100%;box-shadow:inset 0 1px 1px rgba(255,255,255,.05)}
.stepc:nth-child(1){transform:rotate(-1.4deg) translateY(8px)}
.stepc:nth-child(2){transform:translateY(-6px);z-index:2}
.stepc:nth-child(3){transform:rotate(1.4deg) translateY(8px)}
.stepc .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--amber);display:block;margin-bottom:14px}
.stepc h3{font-size:20px;margin-bottom:8px}
.stepc p{font-size:14.5px;color:var(--dim)}
@media(max-width:960px){.steps{grid-template-columns:1fr;gap:14px}.stepc{transform:none!important}}

/* diagram-panel */
.diagram{margin-top:56px;background:var(--panel);border:1px solid var(--hair);border-radius:28px;padding:10px}
.diagram-core{background:var(--bg2);border-radius:19px;padding:34px;box-shadow:inset 0 1px 1px rgba(255,255,255,.05)}
.diagram svg{width:100%;height:auto;display:block}
.diagram figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:14px}

/* varianter */
.vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.var{background:var(--panel);border:1px solid var(--hair);border-radius:20px;padding:26px 24px;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.var:hover{border-color:var(--hair2);transform:translateY(-2px)}
.var .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--amber);display:block;margin-bottom:10px}
.var h3{font-size:19px;margin-bottom:8px}
.var p{font-size:14.5px;color:var(--dim)}

/* pris-panel */
.price-panel{background:var(--panel);border:1px solid var(--hair);border-radius:30px;padding:10px}
.price-core{background:var(--bg2);border-radius:22px;padding:52px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;box-shadow:inset 0 1px 1px rgba(255,255,255,.05);position:relative;overflow:hidden}
.price-core .orb3{width:380px;height:380px;background:rgba(245,181,10,.08);top:-140px;right:-100px}
.price-core h2{margin-top:14px}
.price-core > div > p{color:var(--dim);margin-bottom:26px}
.price-list{display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.price-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px dashed var(--hair)}
.price-row:last-child{border-bottom:none}
.price-row span{color:var(--dim);font-size:15px}
.price-row b{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink);text-align:right}
.price-row b i{color:var(--amber);font-style:normal}
@media(max-width:960px){.price-core{grid-template-columns:1fr;padding:34px 26px;gap:34px}}

/* prosa 2-kolumn */
.prose2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.prose2 h3{font-size:22px;margin-bottom:14px}
.prose2 p{color:var(--dim);margin-bottom:14px;font-size:15.5px}
.prose2 a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-soft)}
.prose2 a:hover{border-color:var(--amber)}
.prose2 ul{list-style:none;margin:6px 0 18px}
.prose2 li{padding:9px 0 9px 22px;position:relative;border-bottom:1px dashed var(--hair);font-size:15px;color:var(--dim)}
.prose2 li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:2px;background:var(--amber)}
.prose2 li strong{color:var(--ink);font-weight:500}
@media(max-width:820px){.prose2{grid-template-columns:1fr}}

/* FAQ två spalter */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 60px}
.faq-item{padding-left:20px;border-left:1px solid var(--hair2);transition:border-color .4s var(--ease)}
.faq-item:hover{border-left-color:var(--amber)}
.faq-item h3{font-size:19px;margin-bottom:8px}
.faq-item p{font-size:14.5px;color:var(--dim)}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr}}

/* video-sektion (kompakt) */
.v-compact{max-width:880px;margin:56px auto 0}

/* slut-CTA */
.endcta{padding:120px 0}
.endcta .inner{text-align:center;max-width:680px;margin:0 auto;position:relative}
.endcta .orb4{width:520px;height:520px;background:rgba(245,181,10,.09);top:-160px;left:50%;transform:translateX(-50%)}
.endcta h2{font-size:clamp(34px,4.4vw,56px)}
.endcta .tel{font-family:var(--disp);font-weight:600;font-size:clamp(25px,3vw,34px);color:var(--amber);text-decoration:none;display:inline-block;margin:10px 0 26px}
.endcta p.small{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.endcta p.small a{color:var(--dim)}

/* footer */
footer{border-top:1px solid var(--hair);padding:60px 0 40px;color:var(--faint);font-size:13.5px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.fcols h3{font-size:15px;color:var(--dim);margin-bottom:14px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.fcols a{display:block;color:var(--faint);text-decoration:none;padding:3px 0;font-size:13.5px;transition:color .3s var(--ease)}
.fcols a:hover{color:var(--ink)}
.fcols p{color:var(--faint);font-size:13.5px;max-width:36ch}
.fcols a.fsocial{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:9px 15px 9px 12px;border:1px solid var(--hair);border-radius:999px;color:var(--dim);transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.fcols a.fsocial:hover{color:var(--ink);border-color:var(--amber);transform:translateY(-1px)}
.fcols a.fsocial svg{flex:none}
.fcols a.fsocial:active{transform:scale(.97)}
footer .fine{border-top:1px solid var(--hair);padding-top:22px;font-family:var(--mono);font-size:11px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer .fine a{color:var(--faint)}
@media(max-width:820px){.fcols{grid-template-columns:1fr 1fr}}

/* variantbilder */
.var{padding:16px 16px 24px}
.var-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--hair);margin-bottom:16px}
.var .tag,.var h3,.var p{padding:0 8px}