/* =========================
   Stilark (svenska etiketter)
   Palett inspirerad av NordicBet
   ========================= */
:root{
  --nb-primary:#0b65c2;   /* huvudblå */
  --nb-accent:#00a0df;    /* accentblå/turkos */
  --nb-dark:#082a4c;      /* huvudtext */
  --nb-bg:#f6f9ff;        /* ljus bakgrund */
  --nb-white:#ffffff;
  --nb-gray:#6b7a90;
  --nb-border:#e1e8f5;
  --radius:16px;
  --shadow:0 8px 24px rgba(8,42,76,.12);
}

/* Bas */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--nb-dark);
  background:var(--nb-bg);
  line-height:1.55;
}

/* Layoutcontainer */
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--nb-white); border-bottom:1px solid var(--nb-border);
}
.nav-grid{
  display:grid;
  grid-template-columns: 180px 1fr auto;
  align-items:center; gap:16px; min-height:72px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{height:36px; width:auto; display:block}

.main-nav ul{
  display:flex; justify-content:center; gap:24px; list-style:none; margin:0; padding:0;
}
.main-nav a{
  color:var(--nb-dark); text-decoration:none; font-weight:700;
}
.main-nav a:hover{color:var(--nb-primary)}

.cta-right{display:flex; gap:12px}

/* Knappar */
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  text-decoration:none; font-weight:800; letter-spacing:.2px;
  transition:transform .06s ease, background .2s, box-shadow .2s;
  border:2px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--nb-primary); color:#fff}
.btn-primary:hover{background:#0a57a8}
.btn-outline{background:transparent; color:var(--nb-primary); border-color:var(--nb-primary)}
.btn-outline:hover{background:rgba(11,101,194,.08)}
.btn-hero{background:var(--nb-accent); color:#fff}
.btn-hero:hover{background:#0593c9}
.btn-small{padding:8px 12px; font-weight:700}

/* Hero */
.hero{
  background: radial-gradient(90% 120% at 100% 0%, rgba(0,160,223,.25), rgba(0,160,223,0) 60%),
              linear-gradient(135deg, #0b65c2 0%, #082a4c 60%);
  color:#fff;
}
.hero-inner{padding:56px 0 72px}
.hero-title{font-size:clamp(28px,4.2vw,44px); margin:0 0 10px}
.hero-sub{max-width:720px; margin:0 0 22px; font-size:18px; opacity:.95}

/* Innehåll */
.intro{background:var(--nb-white); margin-top:-28px; padding:24px; border-radius:var(--radius); box-shadow:var(--shadow)}
.intro-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}

h1{font-size:clamp(26px,3.4vw,36px); margin:24px 0}
h2{font-size:clamp(20px,2.4vw,26px); margin:0 0 14px}
.ref-hint{color:var(--nb-gray); font-size:13px}

.card{
  background:var(--nb-white); border:1px solid var(--nb-border);
  border-radius:var(--radius); padding:20px; margin:18px 0; box-shadow:var(--shadow);
}
.steps{margin:0 0 10px 18px}
.steps li{margin:6px 0}
.note{color:var(--nb-gray); font-size:14px}

.table-wrap{overflow:auto}
.table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:720px;
  border:1px solid var(--nb-border); border-radius:12px; overflow:hidden;
}
.table thead th{
  background:#eef4ff; color:var(--nb-dark); text-align:left; padding:12px 14px; font-weight:800;
  border-bottom:1px solid var(--nb-border);
}
.table tbody td{
  padding:12px 14px; border-bottom:1px solid var(--nb-border);
}
.table tbody tr:last-child td{border-bottom:none}

.table-games img{
  width:92px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--nb-border);
}

/* Sticky CTA */
.sticky-cta{
  position:fixed; right:16px; bottom:16px; z-index:999;
  background:var(--nb-accent); color:#fff; text-decoration:none; font-weight:900;
  padding:14px 18px; border-radius:999px; box-shadow:var(--shadow);
}
.sticky-cta:hover{background:#0593c9}

/* Footer */
.site-footer{
  margin-top:32px; background:#071f3a; color:#dbe7ff;
  padding:28px 0;
}
.site-footer h3{color:#fff; margin:0 0 10px}
.footer-grid{
  display:grid; gap:24px;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}
.footer-links{list-style:none; margin:0; padding:0}
.footer-links li{margin:6px 0}
.footer-links a{color:#dbe7ff; text-decoration:none}
.footer-links a:hover{color:#fff}
.disclaimer{font-size:13px; color:#a6b9d8; margin-top:12px}

/* Responsivitet */
@media (max-width: 860px){
  .nav-grid{grid-template-columns: 1fr auto; grid-template-areas:
    "brand cta"
    "menu menu";
  }
  .brand{grid-area: brand}
  .main-nav{grid-area: menu; padding:8px 0}
  .main-nav ul{justify-content:flex-start; gap:16px; overflow-x:auto}
  .cta-right{grid-area: cta}
  .hero-inner{padding:40px 0 56px}
}