/* Omgång 7: systemsidorna i startsidans skelett och två hero-idéer för startsidan.
   Appvyerna är startsidans kortstil (vit.css). Bara transform och opacity animeras; minskad rörelse stänger av allt. */
.m7-remotion{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;z-index:6;font:600 11px/1 "Google Sans",system-ui,sans-serif;color:#0f5132;background:#e7f8ef;border-radius:999px;padding:6px 10px}

/* Karusellen: startsidans systemkort, med appens vy där filmen satt */
.sl-bild{position:relative;width:100%;aspect-ratio:960/700;margin-top:auto;border-radius:12px;overflow:hidden;background:#151716;flex:none}
.sl-kort p{margin-bottom:16px}
.sl-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sl-foto--larm{object-fit:contain;padding:0 7%;background:#151716}
.sl-skala{position:absolute;inset:0;--k:.4}
.sl-lys{box-shadow:0 0 0 2.5px #1ed760,0 0 30px 4px rgba(30,215,96,.55)!important}
.sl-lys--cell{padding:4px 10px;border-radius:10px;margin:-4px -10px}

/* Jämför odds, Välj slot och Så spelar du: appens listor */
.ek--jo .ek-inre{padding:26px 26px 22px}
.jo-topp{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:#34d399}
.jo-topp i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}
.jo-titel{font-size:24px;margin-top:8px}
.jo-lista{display:grid;gap:8px;margin-top:16px}
.jo-rad{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:#1d1f21;color:#a1a4a9;font-size:19px}
.jo-rad .ek-logga{width:34px;height:34px}
.jo-rad b{font-size:22px;color:#e5e7eb;font-weight:650}
.jo-rad em{font-style:normal;color:#34d399;font-weight:700;font-size:19px}
.jo-rad--bast{background:#1f2a24;color:#f5f5f7}
.jo-rad--bast b{color:#fff}
.jo-rad:not(.jo-rad--bast){opacity:.5}

/* Boost: boostat odds mot från-odds */
.bo-odds{gap:10px;padding:6px 12px;border-radius:12px;margin:-6px -12px}
.bo-ny{font-size:30px;color:#fff}
.bo-odds s{font-size:20px;color:#8e9196}

/* Bonuskortet och casinokortet: bolagets bonus med villkoren i siffror */
.ek--bk .ek-inre{padding:26px 28px}
.bk-topp{display:flex;align-items:center;gap:14px}
.bk-topp .ek-logga{width:52px;height:52px;border-radius:12px}
.bk-namn{display:grid;flex:1}
.bk-namn b{font-size:24px}
.bk-namn small{font-size:15px;color:#8e9196}
.bk-alder{font-size:14px;font-weight:650;color:#e5e7eb;border:1px solid #3a3d41;border-radius:8px;padding:4px 8px}
.bk-villkor{display:grid;margin-top:20px;padding:8px 16px;border-radius:16px;border:2px solid #1ed760}
.bk-rad{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid #26282b;font-size:17px;color:#8e9196}
.bk-rad:last-child{border-bottom:0}
.bk-rad b{color:#f5f5f7;font-size:19px;font-weight:650;text-align:right}
.ck-bonus{display:grid;gap:6px;margin-top:18px;padding:16px 18px;border-radius:16px;border:2px solid #1ed760}
.ck-bonus b{font-size:24px;line-height:1.25;color:#fff}
.ck-bonus small{font-size:14px;color:#8e9196}
.ck-rad{margin-top:8px;border-bottom:0}
.ek-panel--tyst{border-color:#2a2c2f!important;box-shadow:none!important}
.cs-lista{display:grid;gap:10px;margin-top:16px}
.cs-rad{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#1d1f21;font-size:18px;color:#a1a4a9}
.cs-rad i{color:#6f7378;display:grid}
.cs-rad svg{width:40px;height:12px}
.cs-rad b{color:#34d399;font-size:20px}
.cs-rad--vald{background:#1f2a24;color:#fff}
.cs-rad--vald i{color:#34d399}
.cs-rad:not(.cs-rad--vald){opacity:.55}
.st-lista{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:14px}
.st-lista li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.st-lista span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1f2a24;color:#34d399;font-weight:700;font-size:16px}
.st-lista p{margin:5px 0 0;font-size:18px;line-height:1.4;color:#e5e7eb}

/* Startsidans hero: samma plats som den svarta rutan, egen behållare (startsidans regler för rutan sträcker bilder och nollar höjden) */
.lp-1a .sh{position:relative;margin:28px auto 0;max-width:420px}
.sh .sl-skala{position:absolute;inset:0}
.sh .sl-lys{box-shadow:none!important;position:relative}
.sh .sl-lys::after{content:"";position:absolute;inset:-6px;border-radius:16px;pointer-events:none;box-shadow:0 0 0 2.5px #1ed760,0 0 30px 4px rgba(30,215,96,.6);opacity:0}
.sh .jo-rad.sl-lys::after,.sh .cs-rad.sl-lys::after{border-radius:18px}

/* A: Systemen på vitt. Fem kort i en båge, ljuset hoppar från kort till kort (dator: film, telefon: bild) */
.sha-scen{position:relative;height:330px;perspective:1200px}
.sha-kort{position:absolute;left:50%;top:50%;width:80%;aspect-ratio:600/360}
.sha-kort .ek{box-shadow:0 40px 70px -36px rgba(3,30,16,.55),0 14px 28px -20px rgba(0,0,0,.35)}
.sha-kort--2{transform:translate(-50%,-44%);z-index:3}
.sha-kort--0{transform:translate(-50%,-50%) translate(-24%,-20%) rotate(-6deg) scale(.86);z-index:1;opacity:.92}
.sha-kort--1{transform:translate(-50%,-50%) translate(24%,-24%) rotate(6deg) scale(.86);z-index:2;opacity:.92}
.sha-kort--3,.sha-kort--4{display:none}
.sha-kort--2 .sl-lys::after{opacity:1}
@media (min-width:900px){
  .lp-1a .sh{max-width:1120px;margin-top:48px}
  .sha-scen{height:520px;perspective:1400px}
  .sha-kort{width:40%;transform-style:preserve-3d;animation:sha-lyft 10s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i) * 2s - 10s)}
  .sha-kort--3,.sha-kort--4{display:block}
  .sha-kort--0{transform:translate(-50%,-50%) translate(-112%,14%) rotateY(28deg) scale(.78);opacity:1}
  .sha-kort--1{transform:translate(-50%,-50%) translate(-62%,0%) rotateY(16deg) scale(.88);opacity:1}
  .sha-kort--2{transform:translate(-50%,-50%) translateY(-6%) scale(1.06)}
  .sha-kort--3{transform:translate(-50%,-50%) translate(62%,0%) rotateY(-16deg) scale(.88);z-index:2}
  .sha-kort--4{transform:translate(-50%,-50%) translate(112%,14%) rotateY(-28deg) scale(.78);z-index:1}
  .sha-kort .sl-lys::after{opacity:0;animation:sha-lys 10s infinite;animation-delay:calc(var(--i) * 2s - 10s)}
  @keyframes sha-lys{0%,2%{opacity:0}6%,17%{opacity:1}22%,100%{opacity:0}}
  @keyframes sha-lyft{0%,2%{translate:0 0}6%,17%{translate:0 -14px}22%,100%{translate:0 0}}
}

/* B: Flödet på vitt. Value-signalerna glider uppåt, ramen i mitten lyser */
.sh--b{height:360px;overflow:hidden}
.sh--b::before,.sh--b::after{content:"";position:absolute;left:0;right:0;height:70px;z-index:3;pointer-events:none}
.sh--b::before{top:0;background:linear-gradient(#fff,rgba(255,255,255,0))}
.sh--b::after{bottom:0;background:linear-gradient(rgba(255,255,255,0),#fff)}
.shb-spar{position:absolute;left:0;right:0;top:0;display:block;transform:translate3d(0,-227px,0)}   /* telefon: tredje kortet mitt i ramen */
.shb-kort{position:relative;width:300px;aspect-ratio:600/300;margin:0 auto 16px}
.shb-ram{position:absolute;left:50%;top:50%;width:312px;aspect-ratio:624/312;transform:translate(-50%,-50%);border-radius:18px;z-index:2;pointer-events:none;
  box-shadow:0 0 0 2.5px #1ed760,0 0 34px 6px rgba(30,215,96,.5)}
@media (min-width:900px){
  .lp-1a .sh--b{height:520px;max-width:720px}
  .shb-kort{width:440px}
  .shb-ram{width:454px}
  .shb-spar{animation:shb 16s linear infinite}
  @keyframes shb{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
}
@media (prefers-reduced-motion:reduce){
  .sha-kort,.sha-kort .sl-lys::after,.shb-spar{animation:none!important}
  .sha-kort--2 .sl-lys::after{opacity:1}
}

/* appens kort är vänsterställda även inne i startsidans centrerade hero */
.sh .ek{text-align:left}