:root{
  --navy: #0b1220;
  --navy2:#111827;
  --primary:#2563eb;
  --cyan:#22d3ee;
  --purple:#8b5cf6;
  --orange:#f97316;

  --text:#0f172a;
  --muted: rgba(15,23,42,.66);

  --radius: 18px;
}

body{
  background: #f3f6fb;
  color: var(--text);
}

a{ text-decoration: none; }

/* ---------- NAVBAR ---------- */
.navbar{
  transition: background .2s ease, border-color .2s ease;
}
.navbar.glass-nav{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.navbar .nav-link{ color: rgba(15,23,42,.78); }
.navbar .nav-link:hover{ color: rgba(15,23,42,1); }

/* ---------- HERO ---------- */
.hero{
  position: relative;
  padding: 110px 0 90px;
  background:
    radial-gradient(900px 450px at 20% 0%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(800px 420px at 80% 10%, rgba(139,92,246,.18), transparent 55%),
    linear-gradient(180deg, rgba(11,18,32,.75) 0%, rgba(11,18,32,.92) 62%, rgba(11,18,32,.98) 100%),
    url('/assets/img/hero.webp') center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}

.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(900px 500px at 40% 15%, rgba(37,99,235,.10), transparent 60%);
  pointer-events:none;
}

.hero-wave{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-60px;
  height:140px;
  background: radial-gradient(120px 80px at 15% 20%, rgba(34,211,238,.25), transparent 60%),
              radial-gradient(140px 90px at 60% 30%, rgba(139,92,246,.20), transparent 60%),
              radial-gradient(120px 80px at 85% 40%, rgba(37,99,235,.18), transparent 60%);
  filter: blur(18px);
  opacity: .95;
  pointer-events:none;
}

.hero h1{ letter-spacing: -0.03em; }
.hero .lead{ color: rgba(255,255,255,.86); }

.hero-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  font-size: .92rem;
}

.glass{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  border-radius: 16px;
}

.hero-card ul{ margin-left: 1.05rem; }

/* KPI */
.kpi-label{ color: rgba(255,255,255,.72); font-size: .92rem; }
.kpi-value{ font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; }
.kpi-unit{ font-size: .95rem; font-weight: 700; opacity: .75; }

/* ---------- PANELS ---------- */
.panel{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(15,23,42,.06);
}

.pill{
  font-size:.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(34,211,238,.14));
  border: 1px solid rgba(37,99,235,.18);
  color: rgba(15,23,42,.70);
}

/* ---------- OFFER CARDS ---------- */
.offer-card{
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}
.offer-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 54px rgba(15,23,42,.12);
}

/* Legacy absolute badge (behåll men gör den inte störig om den råkar användas) */
.badge-campaign{
  position:absolute;
  top:12px;
  left:12px;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), #ff4d4d);
  box-shadow: 0 10px 25px rgba(249,115,22,.18);
  font-size: .85rem;
}

/* Inline campaign badge (NY – används i index.php) */
.badge-campaign-inline{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), #ff4d4d);
  box-shadow: 0 10px 25px rgba(249,115,22,.18);
  font-size: .85rem;
}

.op-logo{
  max-height: 34px;
  max-width: 110px;
  object-fit: contain;
  opacity: .95;
}

.specs{
  display:flex;
  gap: 12px;
}
.spec{
  flex:1;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.06);
}
.spec-label{
  font-size:.78rem;
  color: rgba(15,23,42,.60);
}
.spec-value{
  font-weight: 800;
  letter-spacing: -0.01em;
}

.price-old{
  color: rgba(15,23,42,.48);
  font-size: .95rem;
}
.price-now{
  font-weight: 900;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.price-sub{
  font-size: .85rem;
  margin-top: 2px;
}

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--cyan));
  border: none;
  box-shadow: 0 14px 35px rgba(37,99,235,.18);
}
.btn-primary:hover{ opacity:.94; }

.btn-ghost{
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}
.btn-ghost:hover{ background: rgba(255,255,255,.12); }

/* Accordion tweak */
.accordion-button{ font-weight: 700; }
.accordion-button:not(.collapsed){ color: var(--text); }

/* Footer */
.footer{
  background: linear-gradient(180deg, var(--navy) 0%, #05080f 100%);
  color: rgba(255,255,255,.88);
}
.footer .text-muted{ color: rgba(255,255,255,.65) !important; }
.footer-link{ color: rgba(255,255,255,.86); }
.footer-link:hover{ color: #fff; }

/* Mobile */
@media (max-width: 768px){
  .hero{ padding: 88px 0 68px; }
  .hero h1{ font-size: 1.95rem; }
  .price-now{ font-size: 1.65rem; }
  .specs{ flex-direction: column; }
}