:root{
  --w-bg: #ffffff;
  --w-ink: #0f0f12;
  --w-muted: rgba(15,15,18,.64);
  --w-border: rgba(15,15,18,.10);
  --w-shadow: 0 20px 70px rgba(0,0,0,.12);
  --w-radius: 22px;
  --w-max: 1180px;

  --navy-1: #0b1633;
  --navy-2: #0f2a66;
  --navy-3: #1d4ed8;

  --acc: #2ec5b6;
  --acc2: #7ed5ff;

  --ease: cubic-bezier(.2,.8,.2,1);
  --ms-fast: 80ms;
  --ms-med: 160ms;
  --ms-slow: 260ms;

  /* NYTT: subtila “frostade” färger för kortet */
  --card-ice-1: rgba(15, 23, 42, .10);
  --card-ice-2: rgba(15, 23, 42, .06);
  --card-ice-3: rgba(148, 163, 184, .16);
  --card-ice-4: rgba(226, 232, 240, .65);
}

*{ box-sizing:border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: var(--w-bg);
  color: var(--w-ink);
  overflow-x: hidden;
}
a, button { transition: transform var(--ms-fast) var(--ease), filter var(--ms-med) var(--ease), opacity var(--ms-med) var(--ease); }
a:active, button:active { transform: translateY(1px); }
.soft-hover:hover { transform: translateY(-1px); }

.shell{
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 18px;
}
@media (max-width: 520px){
  .shell{ padding: 0 14px; }
}

/* =========================
   TOP ROW
   ========================= */
.top-row{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
}
.top-row .shell{
  max-width: 100%;
  padding: 0 28px;
}
@media (max-width: 820px){
  .top-row .shell{ padding: 0 16px; }
}

.top-row-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: #fff;
  user-select:none;
  min-width: 220px;
}
@media (max-width: 820px){
  .brand{ min-width: unset; }
}

.logo-badge{
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(15,15,18,.10);
  background:
    radial-gradient(18px 18px at 30% 25%, rgba(46,197,182,.25), transparent 65%),
    radial-gradient(18px 18px at 75% 70%, rgba(126,213,255,.18), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  position: relative;
  flex: 0 0 auto;
}
.logo-badge::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(46,197,182,.35), rgba(246,169,75,.18), rgba(126,213,255,.25));
  opacity: .35;
  pointer-events:none;
  mix-blend-mode: multiply;
}
.logo-img{
  width: 22px;
  height: 22px;
  display:block;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

.brand-name{
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.brand-sub{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  margin-top: 2px;
}
@media (max-width: 520px){
  .brand-sub{ display:none; }
}

.top-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
  justify-content: flex-end;
  position: relative;
}
@media (max-width: 820px){
  .top-actions{ min-width: unset; }
}

.lang-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 13px;
  cursor: pointer;
}
.lang-pill:hover{ filter: brightness(1.15); }

.top-user{
  display:none;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(11,22,51,.16);
  background:
    radial-gradient(260px 60px at 20% 50%, rgba(29,78,216,.10), transparent 60%),
    rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 900;
  color: rgba(11,22,51,.92);
  letter-spacing: .02em;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  user-select:none;
  position: relative;
  cursor: pointer;
}
.top-user::after{
  content:"";
  position:absolute;
  width:10px; height:10px;
  border-radius:999px;
  right: -1px; top: -1px;
  background: rgba(34,197,94,1);
  box-shadow: 0 0 0 6px rgba(34,197,94,.12);
  border: 2px solid rgba(255,255,255,.9);
}

.user-menu{
  position: absolute;
  right: 0;
  top: 52px;
  width: 190px;
  background: #fff;
  border: 1px solid var(--w-border);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
  padding: 8px;
  display:none;
  z-index: 220;
}
.user-menu button{
  width:100%;
  text-align:left;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 750;
}
.user-menu button:hover{ background: rgba(15,15,18,.05); }

.lang-menu{
  position: absolute;
  right: 28px;
  top: 52px;
  width: 180px;
  background: #fff;
  border: 1px solid var(--w-border);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
  padding: 8px;
  display:none;
  z-index: 200;
}
.lang-menu button{
  width:100%;
  text-align:left;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 650;
}
.lang-menu button:hover{ background: rgba(15,15,18,.05); }

.menu-btn{
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--w-border);
  background: rgba(255,255,255,.78);
  cursor: pointer;
  display:flex; align-items:center; justify-content:center;
}
.menu-btn:hover{ filter: brightness(.98); }

.menu-panel{
  position: fixed;
  top: 60px;
  right: 16px;
  width: 260px;
  max-height: 80vh;
  overflow-y: auto;
  display:none;
  border: 1px solid rgba(15,15,18,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  z-index: 99;
}
.menu-panel-inner{
  padding: 12px 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.menu-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.05);
  background: rgba(255,255,255,.6);
  text-decoration:none;
  color: inherit;
  font-weight: 720;
}
.menu-link:hover{ background: rgba(15,15,18,.04); }

/* =========================
   HERO
   ========================= */
.hero{
  position: relative;
  min-height: 95vh;
  display:flex;
  align-items: stretch;
  overflow:hidden;
  border-bottom: 1px solid var(--w-border);
  background:#000;
}
@media (max-width: 820px){
  .hero{ min-height: 82vh; }
}

.hero video{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: none !important;
  filter: none !important;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 540px at 15% 20%, rgba(46,197,182,.10), transparent 55%),
    radial-gradient(900px 520px at 80% 40%, rgba(126,213,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.60));
  pointer-events:none;
}
.hero-content{
  position: relative;
  z-index: 2;
  width:100%;
  padding: 60px 0 72px;
  display:flex;
  align-items:center;
  margin-top: 0;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items:end;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-content{ padding: 50px 0 46px; margin-top: 0; }
}
.hero-kicker{
  color: rgba(255,255,255,.80);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hero h1{
  margin:0 0 14px;
  color: #fff;
  font-size: 64px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
@media (max-width: 560px){ .hero h1{ font-size: 44px; } }
.hero p{
  margin:0 0 18px;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  max-width: 62ch;
  line-height: 1.55;
}
.hero-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  text-decoration:none;
  font-weight: 760;
  cursor:pointer;
  user-select:none;
  white-space: nowrap;
}
.btn-primary{
  background: rgba(255,255,255,.92);
  color: #0f0f12;
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}
.btn-ghost{
  background: rgba(15,15,18,.18);
  color: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.22);
}

.hero-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--w-radius);
  padding: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 80px rgba(0,0,0,.18);
}
.hero-card h3{
  margin: 0 0 10px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  letter-spacing: -.01em;
}
.hero-card .mini{
  margin:0 0 12px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.45;
}
.hero-metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.metric{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 12px;
}
.metric b{
  display:block;
  color: #fff;
  font-size: 18px;
  letter-spacing: -.02em;
}
.metric span{
  display:block;
  margin-top: 4px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

/* =========================
   SECTION BASICS
   ========================= */
.section{ padding: 70px 0; }
@media (max-width: 680px){ .section{ padding: 54px 0; } }
.section-title{
  font-size: 44px;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  line-height: 1.05;
  text-wrap: balance;
}
@media (max-width: 560px){ .section-title{ font-size: 34px; } }
.section-lead{
  color: var(--w-muted);
  font-size: 16px;
  max-width: 78ch;
  line-height: 1.6;
  margin: 0 0 22px;
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr; } }

.w-card{
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  background: #fff;
  box-shadow: 0 14px 50px rgba(0,0,0,.08);
  padding: 18px;
}
.w-card h3{ margin: 0 0 6px; letter-spacing: -.01em; }
.w-card p{ margin: 0; color: var(--w-muted); line-height: 1.55; font-size: 14px; }

/* =========================
   Reputation Card flip
   ========================= */
.flip-wrap{ perspective: 1100px; width: 100%; max-width: 420px; }
.flip{
  position: relative;
  width: 100%;
  border-radius: 22px;
  transform-style: preserve-3d;
  transition: transform var(--ms-slow) var(--ease);
  height: 580px;
}
.flip.is-flipped{ transform: rotateY(180deg); }
.flip-face{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
  border-radius: 22px;
  border: 1px solid var(--w-border);
  box-shadow: 0 18px 70px rgba(0,0,0,.10);
  overflow:hidden;
}

/* NYTT: mycket mer subtil front (matchar din bild) */
.flip-front{
  background:
    radial-gradient(800px 520px at 12% 10%, var(--card-ice-1), transparent 60%),
    radial-gradient(900px 520px at 85% 35%, var(--card-ice-2), transparent 62%),
    radial-gradient(700px 520px at 55% 85%, var(--card-ice-3), transparent 62%),
    linear-gradient(180deg, rgba(148,163,184,.30), rgba(226,232,240,.55) 45%, rgba(255,255,255,.85));
}

.flip-back{ 
  transform: rotateY(180deg); 
  background: #fff;
  display: none;
}
.card-inner{ 
  padding: 14px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.card-top{ display:flex; justify-content:space-between; align-items:center; gap: 10px; }
.chip{
  width: 44px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, rgba(15,15,18,.06), rgba(15,15,18,.02));
}
.card-name{
  margin-top: 14px;
  font-weight: 820;
  letter-spacing: -.02em;
  font-size: 18px;
  color: rgba(15, 23, 42, .92);
}
.card-meta{
  margin-top: 8px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.card-meta .m{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  backdrop-filter: blur(8px);
}
.card-meta .m b{ display:block; font-size: 18px; color: rgba(15,23,42,.92); }
.card-meta .m span{ display:block; color: rgba(15,23,42,.62); font-size: 12px; margin-top: 4px; }

/* Flip: se till att baksidan kan scrolla och att actions alltid syns */
.flip{ height: 520px; }
@media (max-width: 980px){ .flip{ height: 560px; } }
@media (max-width: 560px){ .flip{ height: 72vh; min-height: 520px; } }

.flip-face{ overflow:hidden; }
.flip-back{ overflow:auto; }

.flip-back .card-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flip-back .back-scroll{
  overflow: auto;
  padding-bottom: 10px;
}
.flip-back .back-actions{
  margin-top: auto;
  padding-top: 12px;
}

/* =========================
   SIM ROW (mobilanpassad layout)
   ========================= */
.sim-row{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:flex-start;
}
@media (max-width: 980px){
  .sim-row{
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .flip-wrap{ max-width: 100%; }
  .flip{ height: clamp(440px, 62vh, 560px); }
}
@media (max-width: 560px){
  .card-meta{ grid-template-columns: 1fr; }
  .card-inner{ padding: 16px; }
}

/* =========================
   SIM
   ========================= */
.sim{
  border: 1px solid var(--w-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 70px rgba(0,0,0,.08);
  padding: 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items:center;
  max-width: 980px;
  width: 100%;
  flex: 1 1 520px;
}
@media (max-width: 980px){ .sim{ grid-template-columns: 1fr; max-width: 100%; } }
.sim h3{ margin:0 0 6px; }
.sim p{ margin:0 0 12px; color: var(--w-muted); line-height:1.55; }

.slider-stack{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-top: 10px;
}
.slider-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
input[type="range"]{ width:100%; accent-color: #111; }

.trust-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,22,51,.14);
  background:
    radial-gradient(520px 90px at 18% 50%, rgba(29,78,216,.06), transparent 60%),
    radial-gradient(520px 90px at 82% 50%, rgba(125,211,252,.05), transparent 60%),
    rgba(255,255,255,.88);
  box-shadow: 0 14px 50px rgba(0,0,0,.06);
  flex-wrap: wrap;
}
.trust-left{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 170px;
}
.trust-title{
  font-weight: 900;
  letter-spacing: -.01em;
  color: rgba(11,22,51,.92);
}
.trust-sub{
  color: rgba(11,22,51,.62);
  font-size: 12px;
  font-weight: 700;
}

.pbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,22,51,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.75));
  flex-wrap: nowrap;     /* ✅ tvingar 5P på samma rad */
  justify-content: center;
  overflow: hidden;
}

/* På riktigt små skärmar får den wrappa igen om det behövs */
@media (max-width: 420px){
  .pbar{ flex-wrap: wrap; }
}

.pbar .p{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.02em;
  border: 1px solid rgba(11,22,51,.14);
  color: rgba(11,22,51,.78);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  user-select:none;
}
@media (max-width: 560px){
  .pbar .p{
    width: 48px;
    height: 48px;
    border-radius: 18px;
    font-size: 22px;
  }
}
/* NYTT: “on” mer subtilt (mindre neon) */
.pbar .p.is-on{
  color: rgba(255,255,255,.96);
  border-color: rgba(15,23,42,.18);
  background:
    radial-gradient(24px 24px at 30% 25%, rgba(148,163,184,.22), transparent 62%),
    radial-gradient(24px 24px at 70% 75%, rgba(59,130,246,.14), transparent 62%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.82));
  box-shadow:
    0 14px 30px rgba(15,23,42,.16),
    0 0 0 8px rgba(15,23,42,.05);
}

.sim-meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
@media (max-width: 520px){
  .sim-meta{ grid-template-columns: 1fr; }
}
.meta-box{
  border: 1px solid rgba(11,22,51,.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.86);
}
.meta-box b{
  display:block;
  font-size: 16px;
  letter-spacing: -.01em;
  color: rgba(11,22,51,.92);
}
.meta-box span{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(11,22,51,.62);
  font-weight: 650;
}

/* =========================
   GLOBE
   ========================= */
.globe-hero{
  width: min(1600px, 99vw);
  margin: 0 auto 26px;
  border-radius: 34px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 140px rgba(0,0,0,.20);
  border: 1px solid rgba(0,0,0,.10);
  position: relative;
  isolation: isolate;
}
.globe-hero video{
  width: 100%;
  height: min(78vh, 700px);
  display:block;
  object-fit: cover;
  background: #000;
  transform: scale(1.18) translateY(3%);
  transform-origin: center;
}
@media (max-width: 680px){
  .globe-hero{
    width: 100vw;
    border-radius: 0;
    margin: 0 0 18px;
  }
  .globe-hero video{
    height: 58vh;
    transform: scale(1.22) translateY(2%);
  }
}

.kpi{
  width:100%;
  border-collapse: collapse;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: 0 16px 60px rgba(0,0,0,.08);
  max-width: 760px;
}
.kpi th, .kpi td{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align:left;
  font-size: 14px;
}
.kpi th{
  color: var(--w-muted);
  font-weight: 700;
  background: rgba(0,0,0,.02);
}
.kpi tr:last-child td{ border-bottom: 0; }

@media (max-width: 680px){
  .kpi thead{ display:none; }
  .kpi, .kpi tbody, .kpi tr, .kpi td{ display:block; width:100%; }
  .kpi tr{
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 10px 0;
  }
  .kpi td{
    border: 0;
    padding: 8px 14px;
  }
  .kpi td:nth-child(1){ font-weight: 800; }
  .kpi td:nth-child(2)::before{ content:"Värde: "; color: var(--w-muted); font-weight:700; }
  .kpi td:nth-child(3)::before{ content:"Not: "; color: var(--w-muted); font-weight:700; }
}

.white-block{ background: #fff; }
.anchor { scroll-margin-top: 90px; }

#rating-card{ margin-top: 44px !important; }

.footer{
  padding: 40px 0 60px;
  color: var(--w-muted);
  font-size: 12px;
  border-top: 1px solid var(--w-border);
}