/* showcase.css — fem "världsklass"-layouter för de 10 tjänsterna, live-switchbara. */
.showwrap{max-width:1200px;margin-inline:auto;padding:clamp(1rem,3vw,2rem) clamp(1.2rem,4vw,3rem) 4rem;position:relative;z-index:1}
.showhead{padding:7rem 0 1.5rem}
.showhead .eyebrow{margin-bottom:.8rem}
.showhead h1{font-family:Panchang,sans-serif;font-weight:700;font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.02em;line-height:1;margin:0}
.showhead p{color:var(--dis);max-width:52ch;margin:1rem 0 0}
.showstage{position:relative;min-height:74vh}
.lay{display:none}
.lay.on{display:block}

/* switcher */
.laysw{position:fixed;left:50%;top:calc(clamp(.85rem,2vw,1.3rem) + 3.4rem);transform:translateX(-50%);z-index:1300;display:flex;gap:5px;flex-wrap:wrap;justify-content:center;
  background:rgba(6,12,14,.85);backdrop-filter:blur(14px);border:1px solid rgba(79,227,212,.22);border-radius:99px;padding:6px;font-family:var(--mono)}
.laysw button{border:0;background:none;color:#8fb0ac;font:600 11px/1 var(--mono);letter-spacing:.04em;padding:.6em 1em;border-radius:99px;cursor:pointer;transition:.16s}
.laysw button:hover{color:#e8f4f2}
.laysw button.on{background:var(--teal);color:#04110f;font-weight:700}

/* ── 1. coverflow 3D-däck ── */
.lay-cover{perspective:1700px;height:72vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cf-track{position:relative;transform-style:preserve-3d;width:330px;height:440px}
.cf-card{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#0a1518;border:1px solid rgba(79,227,212,.22);cursor:pointer;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s,box-shadow .6s;box-shadow:0 30px 60px rgba(0,0,0,.55);backface-visibility:hidden}
.cf-card img{width:100%;height:60%;object-fit:cover;opacity:.82;display:block}
.cf-card .cfb{padding:1.1rem 1.3rem}
.cf-card .cfn{font-family:var(--mono);color:var(--teal);font-size:.72rem;letter-spacing:.24em}
.cf-card h3{font-family:Panchang,sans-serif;font-weight:600;font-size:1.35rem;letter-spacing:-.01em;margin:.4rem 0 .3rem}
.cf-card p{color:var(--dis);font-size:.9rem;margin:0}
.cf-card.active{box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 40px rgba(79,227,212,.18)}
.cf-card .brk span{position:absolute;width:16px;height:16px;border:2px solid var(--teal);opacity:0;transition:opacity .4s}
.cf-card.active .brk span{opacity:.95}
.cf-card .brk span:nth-child(1){top:9px;left:9px;border-right:0;border-bottom:0}
.cf-card .brk span:nth-child(2){top:9px;right:9px;border-left:0;border-bottom:0}
.cf-card .brk span:nth-child(3){bottom:9px;left:9px;border-right:0;border-top:0}
.cf-card .brk span:nth-child(4){bottom:9px;right:9px;border-left:0;border-top:0}
.cf-arrows{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;gap:1rem;z-index:5}
.cf-arrows button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(79,227,212,.4);background:rgba(6,12,14,.6);color:var(--teal);cursor:pointer;font-size:1.1rem}
.cf-arrows button:hover{border-color:var(--teal);box-shadow:0 0 18px rgba(79,227,212,.3)}

/* ── 2. orbit ── */
.lay-orbit{height:72vh;display:grid;place-items:center;overflow:hidden}
.orb-ring{position:relative;width:min(66vh,540px);height:min(66vh,540px);border-radius:50%;animation:orbspin 40s linear infinite}
.lay-orbit:hover .orb-ring{animation-play-state:paused}
@keyframes orbspin{to{transform:rotate(360deg)}}
.orb-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.orb-center b{font-family:Panchang,sans-serif;font-size:2.2rem;color:var(--text);display:block}
.orb-center span{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;color:var(--teal)}
.orb-node{position:absolute;top:50%;left:50%;width:130px;margin:-22px 0 0 -65px;padding:.55em .9em;border:1px solid rgba(79,227,212,.28);background:rgba(6,12,14,.6);backdrop-filter:blur(6px);border-radius:12px;text-align:center;
  transform:rotate(var(--a)) translateY(calc(-1*var(--r))) rotate(calc(-1*var(--a)));transition:border-color .2s,transform .3s;cursor:pointer}
.orb-node .on{font-family:var(--mono);color:var(--teal);font-size:.62rem;letter-spacing:.2em}
.orb-node .ot{font-family:Supreme,sans-serif;font-size:.82rem;color:var(--text)}
.orb-node:hover{border-color:var(--teal);box-shadow:0 0 20px rgba(79,227,212,.3);transform:rotate(var(--a)) translateY(calc(-1*var(--r))) rotate(calc(-1*var(--a))) scale(1.12)}

/* ── 3. floating labels över foto ── */
.lay-float{position:relative;height:74vh;border-radius:20px;overflow:hidden;border:1px solid rgba(79,227,212,.14)}
.lay-float .fbg{position:absolute;inset:-4%;background-size:cover;background-position:center;filter:brightness(.5) saturate(.95)}
.lay-float::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,transparent,rgba(5,10,12,.6))}
.fl-cap{position:absolute;left:clamp(1rem,3vw,2.4rem);top:clamp(1rem,3vw,2rem);z-index:3;font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;color:var(--teal)}
.fl-chip{position:absolute;z-index:2;padding:.55em 1em;border:1px solid rgba(79,227,212,.32);background:rgba(6,12,14,.5);backdrop-filter:blur(8px);border-radius:99px;font-family:Supreme,sans-serif;font-size:.86rem;color:var(--text);white-space:nowrap;cursor:default;transition:border-color .2s,box-shadow .2s;will-change:transform}
.fl-chip:hover{border-color:var(--teal);box-shadow:0 0 18px rgba(79,227,212,.3)}
.fl-chip b{color:var(--teal);font-family:var(--mono);font-size:.7rem;margin-right:.5em}

/* ── 4. bento ── */
.lay-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:158px;gap:14px}
.bento-t{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(79,227,212,.15);background:#0a1518;padding:1.2rem;
  opacity:0;transform:translateY(22px) scale(.98)}
.lay-bento.in .bento-t{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*.05s)}
.bento-t:hover{border-color:rgba(79,227,212,.5)}
.bento-t .bimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;transition:opacity .3s}
.bento-t:hover .bimg{opacity:.4}
.bento-t .bc{position:relative}
.bento-t .bn{font-family:var(--mono);color:var(--teal);font-size:.72rem;letter-spacing:.2em}
.bento-t h3{font-family:Panchang,sans-serif;font-weight:600;font-size:1.2rem;margin:.5rem 0 .3rem}
.bento-t p{color:var(--dis);font-size:.85rem;margin:0}
.bento-t.big{grid-column:span 2;grid-row:span 2}
.bento-t.wide{grid-column:span 2}
@media(max-width:820px){.lay-bento{grid-template-columns:repeat(2,1fr)}.bento-t.big,.bento-t.wide{grid-column:span 2;grid-row:auto}}

/* ── 5. draggable-stack ── */
.lay-stack{height:72vh;display:grid;place-items:center}
.stk{position:relative;width:330px;height:430px}
.stk-hint{position:absolute;bottom:-2.4rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--teal-dim)}
.stk-card{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#0a1518;border:1px solid rgba(79,227,212,.22);box-shadow:0 26px 60px rgba(0,0,0,.55);cursor:grab}
.stk-card:active{cursor:grabbing}
.stk-card img{width:100%;height:58%;object-fit:cover;opacity:.82;display:block}
.stk-card .sc{padding:1.1rem 1.3rem}
.stk-card .sn{font-family:var(--mono);color:var(--teal);font-size:.72rem;letter-spacing:.24em}
.stk-card h3{font-family:Panchang,sans-serif;font-weight:600;font-size:1.4rem;margin:.4rem 0 .3rem}
.stk-card p{color:var(--dis);font-size:.9rem;margin:0}