/* ============================================================
   BORDIC REMAKE — visuellt ambitionslager, laddas EFTER
   bordic-overrides.css. Palett oförändrad:
   mörk #05121F · navy #001026 · primär #1D649A · glöd #2E86C1 · tint #D4E6F4
   ============================================================ */

/* ---------- 0. GLOBALT ---------- */
::selection { background:#1D649A; color:#fff; }
html { scrollbar-color:#1D649A #0a1622; }
body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3 { text-wrap:balance; }
h2.font-heading { letter-spacing:-.025em; }

/* ---------- 1. HERO: aurora + metallisk rubrik ---------- */
#hero { position:relative; isolation:isolate; }
#hero::before {
  content:""; position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 34% at 78% 18%, rgba(46,134,193,.26), transparent 70%),
    radial-gradient(36% 30% at 12% 72%, rgba(29,100,154,.22), transparent 70%),
    radial-gradient(28% 22% at 55% 95%, rgba(212,230,244,.12), transparent 70%);
  filter: blur(46px);
  animation: bordic-aurora 26s ease-in-out infinite alternate;
}
@keyframes bordic-aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%,1.5%,0) scale(1.06); }
  100% { transform: translate3d(-2%,-1%,0) scale(1.02); }
}
#hero h1 {
  background: linear-gradient(180deg, #ffffff 62%, #EAF3FA 86%, #CFE3F2 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter: drop-shadow(0 2px 24px rgba(46,134,193,.25));
  letter-spacing:-.03em;
}
/* simuleringskortet: glas + glödkant + topplinje */
#hero div[class*="rounded-2xl"], #hero div[class*="rounded-3xl"] {
  border:1px solid rgba(212,230,244,.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 24px 70px -18px rgba(2,10,20,.65),
    0 0 60px -18px rgba(46,134,193,.38);
  backdrop-filter: blur(6px);
}

/* ---------- 2. SEKTIONSRYTM: mönster, avdelare, spotlight ---------- */
#problemet, #process, #resultat, #om, #kontakt { position:relative; }

/* prickraster som ger de ljusa ytorna struktur */
#process::after, #resultat::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(rgba(29,100,154,.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(75% 60% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 60% at 50% 40%, #000 30%, transparent 100%);
}
/* hårlinje-avdelare med glödpunkt i mitten */
#process::before, #om::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(720px,80%); height:1px; z-index:1;
  background: linear-gradient(90deg, transparent, rgba(29,100,154,.45), transparent);
  box-shadow: 0 0 22px rgba(46,134,193,.55);
}
/* spotlight bakom kontaktformuläret */
#kontakt::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(46% 52% at 50% 46%, rgba(46,134,193,.14), transparent 72%);
}
#kontakt > * , #process > *, #resultat > * { position:relative; z-index:2; }

/* ---------- 3. KORT: premium-yta + micro-lift ---------- */
.card-surface {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
.card-surface:hover { transform: translateY(-4px); }

/* processnumren 01–06: mono-gradient med glöd */
span.font-mono.text-4xl.font-extrabold {
  text-shadow: 0 0 26px rgba(46,134,193,.35);
}

/* ---------- 4. KNAPPAR: gradient + sheen-svep ---------- */
a.btn-magnetic, button.btn-magnetic { position:relative; overflow:hidden; }
/* ALLA primära CTA (bär bg-bordic-navy) får hero-gradienten: navy -> bordic-blå */
a[class*="bg-bordic-navy"], button[class*="bg-bordic-navy"] {
  background-image: linear-gradient(120deg, #04182B 0%, #0F4470 55%, #1D649A 100%) !important;
  background-color:#0F4470 !important;
  border:0 !important;
  box-shadow: 0 0 0 1px rgba(46,134,193,.5), 0 14px 38px -12px rgba(29,100,154,.6), 0 0 26px -8px rgba(46,134,193,.4);
  transition: box-shadow .3s ease, filter .3s ease;
}
a[class*="bg-bordic-navy"]:hover, button[class*="bg-bordic-navy"]:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 0 1px rgba(46,134,193,.65), 0 16px 44px -12px rgba(29,100,154,.7), 0 0 36px -6px rgba(46,134,193,.55);
}
.btn-magnetic::after {
  content:""; position:absolute; top:0; bottom:0; left:-80%; width:55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .55s ease; pointer-events:none;
}
.btn-magnetic:hover::after { left:130%; }

/* ---------- 5. FAQ: definierade rader med glöd-hover ---------- */
button.w-full.flex.items-center.justify-between {
  border:1px solid rgba(13,58,96,.12);
  border-radius:1.25rem;
  background:rgba(255,255,255,.85);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
button.w-full.flex.items-center.justify-between:hover {
  border-color: rgba(46,134,193,.45);
  background:#fff;
  box-shadow: 0 10px 30px -12px rgba(29,100,154,.25);
}

/* ---------- 6. FORMULÄR: glas + fokusglöd ---------- */
form.card-surface {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,249,253,.9));
  border:1px solid rgba(29,100,154,.16);
  box-shadow: 0 30px 80px -24px rgba(5,18,31,.25), 0 0 70px -30px rgba(46,134,193,.4);
}
form.card-surface input, form.card-surface textarea {
  transition: box-shadow .25s ease, border-color .25s ease;
}
form.card-surface input:focus, form.card-surface textarea:focus {
  border-color:#2E86C1 !important;
  box-shadow: 0 0 0 4px rgba(46,134,193,.16), 0 2px 4px rgba(0,0,0,.05) inset !important;
}

/* ---------- 7. FOOTER: glödande topplinje + djup ---------- */
footer.bg-bordic-navy, footer[class*="bg-bordic-navy"] {
  background: linear-gradient(180deg, #04101d 0%, #001026 45%, #000a18 100%) !important;
  position:relative;
}
footer.bg-bordic-navy::before, footer[class*="bg-bordic-navy"]::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(560px,70%); height:1px;
  background: linear-gradient(90deg, transparent, rgba(46,134,193,.8), transparent);
  box-shadow: 0 0 30px 2px rgba(46,134,193,.5);
}

/* ---------- 8. RÖRELSERESPEKT ---------- */
@media (prefers-reduced-motion: reduce) {
  #hero::before { animation:none; }
  .card-surface, .btn-magnetic::after { transition:none; }
}


/* ---------- 9. HERO H1: descender-fix (g:et kapades av bakgrundsboxen) ---------- */
#hero h1 { padding-bottom:.14em; margin-bottom:calc(1.5rem - .14em); }

/* ---------- 10. IKONCHIPS: lyxigare ikoner på alla kort ---------- */
div[class*="w-14"][class*="rounded-2xl"]:has(> svg),
div[class*="w-12"][class*="rounded-2xl"]:has(> svg) {
  background: linear-gradient(140deg, rgba(29,100,154,.14), rgba(46,134,193,.05) 60%, rgba(212,230,244,.18)) !important;
  border:1px solid rgba(29,100,154,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 6px 18px -6px rgba(29,100,154,.28),
    0 0 22px -8px rgba(46,134,193,.35);
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
div[class*="w-14"][class*="rounded-2xl"]:has(> svg) > svg,
div[class*="w-12"][class*="rounded-2xl"]:has(> svg) > svg,
.card-surface:hover div[class*="w-14"][class*="rounded-2xl"]:has(> svg) > svg,
.card-surface:hover div[class*="w-12"][class*="rounded-2xl"]:has(> svg) > svg,
div[class*="group"]:hover div[class*="w-14"][class*="rounded-2xl"]:has(> svg) > svg,
div[class*="group"]:hover div[class*="w-12"][class*="rounded-2xl"]:has(> svg) > svg {
  color:#1D649A !important;
  filter: drop-shadow(0 1px 6px rgba(46,134,193,.45));
}
/* chipets yta får ALDRIG bli vit vid hover — gradienten ligger kvar */
.card-surface:hover div[class*="w-14"][class*="rounded-2xl"]:has(> svg),
.card-surface:hover div[class*="w-12"][class*="rounded-2xl"]:has(> svg),
div[class*="group"]:hover div[class*="w-14"][class*="rounded-2xl"]:has(> svg),
div[class*="group"]:hover div[class*="w-12"][class*="rounded-2xl"]:has(> svg) {
  background: linear-gradient(140deg, rgba(29,100,154,.18), rgba(46,134,193,.07) 60%, rgba(212,230,244,.22)) !important;
}
.card-surface:hover div[class*="w-14"][class*="rounded-2xl"]:has(> svg),
.card-surface:hover div[class*="w-12"][class*="rounded-2xl"]:has(> svg) {
  border-color: rgba(46,134,193,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 26px -8px rgba(29,100,154,.4),
    0 0 34px -6px rgba(46,134,193,.55);
  transform: translateY(-2px);
}
/* fristående illustrations-svg:er i problemsektionen: mjuk glöd */
#problemet .card-surface svg, #problemet svg[class*="w-"] {
  filter: drop-shadow(0 2px 10px rgba(46,134,193,.3));
}

/* ---------- 11. Glas-sekundären på mörka bandet bevaras (efter CTA-unifieringen) ---------- */
section[data-theme="hero"]:not(#hero) .grid > div:last-child a.btn-magnetic {
  background-image:none !important;
  background-color: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.55) !important;
  box-shadow:none;
}
section[data-theme="hero"]:not(#hero) .grid > div:last-child a.btn-magnetic:hover {
  background-color: rgba(255,255,255,.24) !important;
  filter:none;
}


/* ---------- 12. IKONLÅS: scopat till linjeikon-chippen (om + kontrollområden) ---------- */
#om div[class*="w-14"][class*="rounded-2xl"]:has(> svg) svg *,
#om div[class*="w-12"][class*="rounded-2xl"]:has(> svg) svg *,
#resultat div[class*="w-14"][class*="rounded-2xl"]:has(> svg) svg *,
#resultat div[class*="w-12"][class*="rounded-2xl"]:has(> svg) svg * {
  stroke:#1D649A !important;
  transition:none !important;
}
#om div[class*="w-14"][class*="rounded-2xl"]:has(> svg) svg [fill]:not([fill="none"]),
#om div[class*="w-12"][class*="rounded-2xl"]:has(> svg) svg [fill]:not([fill="none"]),
#resultat div[class*="w-14"][class*="rounded-2xl"]:has(> svg) svg [fill]:not([fill="none"]),
#resultat div[class*="w-12"][class*="rounded-2xl"]:has(> svg) svg [fill]:not([fill="none"]) {
  fill:#1D649A !important;
}
/* Problemkortens flerfärgade illustrationer: navy harmoniseras till bordic-blå,
   vita fyllningar och röda accenter orörda (inga andra regler träffar dem längre) */
#problemet svg [stroke="#0C2340"] { stroke:#1D649A; }
#problemet svg [fill="#0C2340"]   { fill:#1D649A; }

/* ---------- 13. HERO-CTA: symmetrisk rad (magnetic-drift låst) ---------- */
#hero a.hero-cta { transform:none !important; }
/* 3D-tilten på textblocket gjorde att knapparna hamnade på olika visuella höjder */
#hero div.pointer-events-auto:has(a.hero-cta) { transform:none !important; }
#hero div.flex.flex-col.sm\:flex-row { align-items:center; }
@media (max-width: 639px) { #hero div.flex.flex-col.sm\:flex-row { align-items:stretch; } }