/* ============================================
   ISHELLA 2.5 — CORE
   Delt designsystem for alle ishella-sider
   ISBAT brand-røde + ice-aurora atmosfære
   --------------------------------------------
   Last ALLTID denne FØR sidespesifikk CSS.
   ============================================ */

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.7;
  color: #e6f1ea;
  background: #03110a;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================
   ISHELLA 2.5 DESIGN TOKENS
   Kunstgress green base + ICE accent + ISBAT red
   ============================================ */
:root {
  /* Surfaces */
  --is25-bg-deep:     #03110a;
  --is25-bg-base:     #061a10;
  --is25-bg-surface:  #0a2618;
  --is25-bg-elevated: #0e3322;

  /* Brand greens (kunstgress) */
  --is25-green:        #10b981;
  --is25-green-bright: #34d399;
  --is25-green-deep:   #059669;
  --is25-green-glow:   rgba(52, 211, 153, 0.32);

  /* Ice accents */
  --is25-ice:          #38bdf8;
  --is25-ice-bright:   #7dd3fc;
  --is25-ice-deep:     #0284c7;
  --is25-ice-pale:     #bae6fd;
  --is25-ice-soft:     rgba(56, 189, 248, 0.22);
  --is25-ice-glow:     rgba(125, 211, 252, 0.42);
  --is25-ice-frost:    rgba(186, 230, 253, 0.12);

  /* ISBAT brand — ekte logo-farger */
  --isbat-red:         #FF0033;
  --isbat-red-deep:    #CC0029;
  --isbat-red-soft:    rgba(255, 0, 51, 0.18);
  --isbat-red-glow:    rgba(255, 0, 51, 0.45);
  --isbat-blue:        #003399;
  --isbat-blue-deep:   #002277;

  /* Aliaser (eldre is25-navn beholdt for kompat) */
  --is25-red:          var(--isbat-red);
  --is25-red-deep:     var(--isbat-red-deep);
  --is25-amber:        #f59e0b;

  /* Text */
  --is25-text:        #f0fdf4;
  --is25-text-muted:  #b3cfd9;
  --is25-text-dim:    #6e8a92;

  /* Lines / borders */
  --is25-line:        rgba(186, 230, 253, .08);
  --is25-line-strong: rgba(186, 230, 253, .16);
  --is25-line-glow:   rgba(56, 189, 248, .32);
  --is25-line-red:    rgba(255, 0, 51, .28);

  /* Glass */
  --is25-glass:        rgba(10, 38, 46, 0.48);
  --is25-glass-strong: rgba(10, 38, 46, 0.72);
  --is25-glass-edge:   rgba(186, 230, 253, .14);
  --is25-blur:         blur(28px) saturate(1.7);

  /* Shadows / glows */
  --is25-shadow-sm: 0 4px 16px rgba(0,0,0,.32);
  --is25-shadow-md: 0 18px 48px rgba(0,0,0,.42);
  --is25-shadow-lg: 0 32px 80px rgba(0,0,0,.55);
  --is25-glow-green: 0 0 60px rgba(52,211,153,.22), 0 0 120px rgba(52,211,153,.10);
  --is25-glow-ice:   0 0 64px rgba(56,189,248,.42), 0 0 140px rgba(56,189,248,.18);
  --is25-glow-red:   0 0 60px rgba(255,0,51,.42), 0 0 120px rgba(255,0,51,.18);
  --is25-glow-mix:   0 0 60px rgba(56,189,248,.32), 0 0 120px rgba(255,0,51,.18);

  /* Gradients */
  --is25-grad-ice:    linear-gradient(135deg, var(--is25-ice-bright) 0%, var(--is25-ice) 50%, var(--is25-ice-deep) 100%);
  --is25-grad-mix:    linear-gradient(135deg, var(--is25-green-bright) 0%, var(--is25-ice) 60%, var(--is25-ice-bright) 100%);
  --is25-grad-frost:  linear-gradient(135deg, rgba(125,211,252,.18) 0%, rgba(56,189,248,.10) 50%, rgba(52,211,153,.14) 100%);
  --is25-grad-red:    linear-gradient(135deg, var(--isbat-red) 0%, var(--isbat-red-deep) 100%);
  --is25-grad-fire:   linear-gradient(135deg, var(--is25-ice-bright) 0%, var(--is25-ice) 35%, var(--isbat-red) 100%);

  /* Radii */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* Easing */
  --ease:        cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-expo:   cubic-bezier(.16,1,.3,1);

  /* Type */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", monospace;
}

/* ============================================
   GLOBAL ATMOSPHERE — ICE-aurora + rød tone
   ============================================ */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 70% 55% at 12% 8%,  rgba(56,189,248,.22) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 18%, rgba(125,211,252,.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 88% 82%, rgba(255,0,51,.14) 0%, transparent 68%),
    radial-gradient(ellipse 55% 45% at 50% 88%, rgba(52,211,153,.12) 0%, transparent 70%),
    linear-gradient(180deg, #03110a 0%, #061a10 60%, #03110a 100%);
  background-attachment: fixed;
  animation: is25-aurora 26s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}
@keyframes is25-aurora {
  0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 50% 100%, 0 0; }
  100% { background-position: 6% 9%, 92% 22%, 92% 92%, 55% 92%, 0 0; }
}

/* Floating ice particles overlay (decorative) */
.is25-ice-shimmer {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(186,230,253,.32) 0, transparent 1px),
    radial-gradient(circle at 72% 38%, rgba(125,211,252,.28) 0, transparent 1px),
    radial-gradient(circle at 42% 78%, rgba(56,189,248,.22) 0, transparent 1px),
    radial-gradient(circle at 88% 88%, rgba(186,230,253,.20) 0, transparent 1px),
    radial-gradient(circle at 12% 62%, rgba(125,211,252,.18) 0, transparent 1px);
  background-size: 240px 240px, 320px 320px, 280px 280px, 360px 360px, 200px 200px;
  animation: is25-shimmer 18s linear infinite;
  opacity: .55;
}
@keyframes is25-shimmer {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-120px); }
}

/* Scroll progress — ICE → RED gradient (ISBAT) */
.is25-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--is25-ice-bright), var(--is25-ice), var(--isbat-red));
  z-index: 9999; pointer-events: none;
  box-shadow: 0 0 8px var(--isbat-red-glow);
}

/* Skip link */
.is25-skip {
  position: absolute; top: -100%; left: 16px; z-index: 9999;
  padding: 12px 22px; background: var(--isbat-red);
  color: #fff; font-weight: 700; border-radius: var(--r-sm);
}
.is25-skip:focus { top: 16px; }

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -.025em; color: var(--is25-text);
  text-wrap: balance;
}
p { color: var(--is25-text-muted); text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* Container */
.is25-wrap { width: min(1280px, calc(100% - 40px)); margin-inline: auto; }
.is25-wrap--narrow { width: min(960px, calc(100% - 40px)); margin-inline: auto; }

/* ============================================
   EYEBROW PILL — RØD som default (ISBAT brand),
   ice + green som varianter
   ============================================ */
.is25-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: rgba(255,0,51,.10);
  border: 1px solid rgba(255,0,51,.32);
  backdrop-filter: blur(12px);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #ffb8c4;
  box-shadow: 0 0 20px rgba(255,0,51,.18), inset 0 0 12px rgba(255,184,196,.08);
}
.is25-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--isbat-red);
  box-shadow: 0 0 0 4px rgba(255,0,51,.22), 0 0 12px var(--isbat-red-glow);
  animation: is25-pulse 2.4s ease-in-out infinite;
}
.is25-eyebrow--ice {
  background: rgba(56,189,248,.10);
  border-color: rgba(125,211,252,.32);
  color: var(--is25-ice-bright);
  box-shadow: 0 0 20px rgba(56,189,248,.18), inset 0 0 12px rgba(186,230,253,.08);
}
.is25-eyebrow--ice .dot {
  background: var(--is25-ice-bright);
  box-shadow: 0 0 0 4px rgba(56,189,248,.22), 0 0 12px rgba(125,211,252,.55);
}
.is25-eyebrow--green {
  background: rgba(52,211,153,.10);
  border-color: rgba(52,211,153,.32);
  color: var(--is25-green-bright);
  box-shadow: 0 0 20px rgba(52,211,153,.18);
}
.is25-eyebrow--green .dot {
  background: var(--is25-green-bright);
  box-shadow: 0 0 0 4px rgba(52,211,153,.22), 0 0 12px var(--is25-green-glow);
}
@keyframes is25-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .55; transform: scale(.85); }
}

/* ============================================
   BUTTONS — magnetic hover, ISBAT-rød primær
   ============================================ */
.is25-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.is25-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 32px;
  font-family: var(--font-display); font-size: 1rem;
  font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap; position: relative;
  transition: transform .35s var(--ease-spring),
              box-shadow .35s var(--ease),
              background .25s, border-color .25s, color .25s;
}
.is25-btn i { font-size: .9rem; transition: transform .3s var(--ease); }
.is25-btn:hover { transform: translateY(-3px); }
.is25-btn:hover i { transform: translateX(4px); }

/* Primær = ISBAT-rød */
.is25-btn--primary {
  background: var(--is25-grad-red);
  color: #fff;
  box-shadow: 0 12px 32px rgba(255,0,51,.45),
              0 0 28px rgba(255,0,51,.22),
              inset 0 1px 0 rgba(255,255,255,.22);
}
.is25-btn--primary:hover {
  box-shadow: 0 18px 56px rgba(255,0,51,.55),
              0 0 56px rgba(255,0,51,.32),
              inset 0 1px 0 rgba(255,255,255,.32);
}

/* Sekundær = is */
.is25-btn--ice {
  background: var(--is25-grad-ice);
  color: #042530;
  box-shadow: 0 12px 32px rgba(56,189,248,.42),
              0 0 28px rgba(125,211,252,.32),
              inset 0 1px 0 rgba(255,255,255,.42);
}
.is25-btn--ice:hover {
  box-shadow: 0 18px 56px rgba(56,189,248,.55),
              0 0 56px rgba(125,211,252,.45),
              inset 0 1px 0 rgba(255,255,255,.55);
}

/* Aksent = grønn */
.is25-btn--accent {
  background: linear-gradient(135deg, var(--is25-green) 0%, var(--is25-green-deep) 100%);
  color: #04140c;
  box-shadow: 0 12px 32px rgba(16,185,129,.32),
              inset 0 1px 0 rgba(255,255,255,.32);
}

/* Ghost = transparent glass */
.is25-btn--ghost {
  background: rgba(186,230,253,.04);
  color: var(--is25-text);
  border-color: var(--is25-line-strong);
  backdrop-filter: blur(10px);
}
.is25-btn--ghost:hover {
  background: rgba(255,0,51,.08);
  border-color: var(--isbat-red);
  color: #ffb8c4;
  box-shadow: 0 0 28px rgba(255,0,51,.28);
}

/* ============================================
   SECTIONS — base padding, alt-bakgrunn, divider
   ============================================ */
.is25-section { padding: clamp(96px, 13vw, 160px) 0; position: relative; }
.is25-section--alt {
  background: linear-gradient(180deg, var(--is25-bg-surface) 0%, #082530 100%);
}
.is25-divider {
  height: 1px; border: none;
  background: linear-gradient(90deg, transparent, var(--isbat-red-glow) 30%, var(--is25-line-glow) 70%, transparent);
}

/* Header rad: tittel + intro */
.is25-header {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr);
  gap: 48px; align-items: end;
  margin-bottom: clamp(48px, 6vw, 72px);
}
@media (max-width: 860px) { .is25-header { grid-template-columns: 1fr; gap: 24px; } }

/* Label = RØD som default (ISBAT brand-vibe) */
.is25-label {
  margin: 0 0 14px;
  color: var(--isbat-red);
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.is25-label::before {
  content: ""; width: 22px; height: 2px;
  background: var(--isbat-red);
  box-shadow: 0 0 8px rgba(255,0,51,.55);
}
.is25-label--ice { color: var(--is25-ice-bright); }
.is25-label--ice::before { background: var(--is25-ice-bright); box-shadow: 0 0 8px rgba(125,211,252,.55); }
.is25-label--green { color: var(--is25-green-bright); }
.is25-label--green::before { background: var(--is25-green-bright); box-shadow: 0 0 8px var(--is25-green-glow); }

.is25-title {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  margin: 0; color: var(--is25-text);
}
.is25-title .accent {
  background: var(--is25-grad-fire);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,0,51,.32));
}
.is25-title .accent--ice {
  background: var(--is25-grad-ice);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(125,211,252,.32));
}
.is25-title .accent--green {
  background: linear-gradient(135deg, var(--is25-green-bright) 0%, var(--is25-ice) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is25-title .accent--red {
  background: var(--is25-grad-red);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,0,51,.42));
}
.is25-intro {
  margin: 0; color: var(--is25-text-muted);
  font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.7;
}

/* ============================================
   FARENA-GRUPPEN — partner-komponenter.
   Ekte selskaps-logoer på lys bakgrunn.
   --------------------------------------------
   .is25-fagstrip          = horisontal logo-pille (4 logoer)
   .is25-fagkort-grid      = 3-kolonne grid med fagkort
   .is25-fagkort           = enkelt fagkort m/logo + tag + body
   .is25-fagkort--isbat    = rød tag-variant (Isbaneteknikk)
   .is25-fagkort--freberg  = grønn tag-variant (Brødrene Freberg)
   .is25-fagkort--proturf  = grønn tag-variant (ProTurf)
   .is25-deepbox           = CTA-boks ("dyp-link" til Farena-siden)
   ============================================ */

/* Logo-strip — hvit/lys bakgrunn for å løfte fram fargede logoer */
.is25-fagstrip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(20px, 2.4vw, 28px) clamp(28px, 4vw, 56px);
  background: linear-gradient(180deg, #fff 0%, #f4f7fa 100%);
  border: 1px solid rgba(186,230,253,.18);
  border-radius: var(--r-pill);
  box-shadow: 0 18px 48px rgba(0,0,0,.32),
              0 0 60px rgba(56,189,248,.10),
              0 0 80px rgba(255,0,51,.06);
}
.is25-fagstrip--rect {
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.5vw, 44px) clamp(36px, 5vw, 64px);
}
.is25-fagstrip img {
  height: clamp(28px, 3vw, 38px);
  width: auto; display: block;
  object-fit: contain;
  transition: transform .35s var(--ease-spring), filter .25s;
}
.is25-fagstrip a:hover img { transform: scale(1.06); }
.is25-fagstrip img.--lg { height: clamp(38px, 4vw, 52px); }

/* Fagkort-grid — kompakt eller full */
.is25-fagkort-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
.is25-fagkort-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .is25-fagkort-grid,
  .is25-fagkort-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .is25-fagkort-grid,
  .is25-fagkort-grid--4 { grid-template-columns: 1fr; }
}

.is25-fagkort {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--is25-glass-strong);
  backdrop-filter: var(--is25-blur);
  border: 1px solid var(--is25-glass-edge);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .4s var(--ease-spring),
              border-color .3s var(--ease),
              box-shadow .4s var(--ease);
}
.is25-fagkort:hover {
  transform: translateY(-6px);
  border-color: rgba(125,211,252,.42);
  box-shadow: var(--is25-shadow-lg), 0 0 60px rgba(56,189,248,.18);
}

/* Logo-felt på toppen — hvitt for å vise fram logoen */
.is25-fagkort-logo {
  display: grid; place-items: center;
  padding: 28px 24px;
  min-height: 130px;
  background: linear-gradient(180deg, #fff 0%, #f4f7fa 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.is25-fagkort-logo img {
  max-height: 72px; max-width: 220px;
  width: auto; height: auto;
  object-fit: contain; display: block;
}

/* Body */
.is25-fagkort-body {
  padding: 24px 26px 26px;
  display: flex; flex-direction: column;
  flex-grow: 1;
}

.is25-fagkort-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255,0,51,.10);
  border: 1px solid rgba(255,0,51,.32);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase;
  color: #ffb8c4;
  margin-bottom: 14px;
  align-self: flex-start;
}
.is25-fagkort--freberg .is25-fagkort-tag,
.is25-fagkort--proturf .is25-fagkort-tag {
  background: rgba(52,211,153,.10);
  border-color: rgba(52,211,153,.32);
  color: var(--is25-green-bright);
}

.is25-fagkort h3 {
  font-size: 1.18rem; font-weight: 700;
  color: var(--is25-text); margin-bottom: 12px;
}
.is25-fagkort p {
  color: var(--is25-text-muted);
  font-size: .94rem; line-height: 1.6;
  flex-grow: 1; margin-bottom: 18px;
}
.is25-fagkort p strong { color: var(--is25-text); font-weight: 700; }

/* Stats-rad */
.is25-fagkort-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--is25-line);
  border-bottom: 1px solid var(--is25-line);
  margin-bottom: 16px;
}
.is25-fagkort-stats .ps {
  text-align: center;
}
.is25-fagkort-stats .ps b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.18rem; font-weight: 800;
  background: var(--is25-grad-red);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is25-fagkort--freberg .is25-fagkort-stats .ps b,
.is25-fagkort--proturf .is25-fagkort-stats .ps b {
  background: linear-gradient(135deg, var(--is25-green-bright) 0%, var(--is25-ice) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is25-fagkort-stats .ps span {
  display: block; margin-top: 4px;
  font-family: var(--font-mono);
  font-size: .60rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--is25-text-dim);
}

.is25-fagkort-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem;
  color: var(--is25-ice-bright);
  align-self: flex-start;
  transition: gap .25s var(--ease);
}
.is25-fagkort:hover .is25-fagkort-cta { gap: 14px; }

/* Mini-fagkort (hub-versjon — bare logo + navn + tag) */
.is25-fagkort--mini .is25-fagkort-body { padding: 20px 22px 22px; }
.is25-fagkort--mini h3 { font-size: 1.05rem; margin-bottom: 8px; }
.is25-fagkort--mini p { font-size: .88rem; margin-bottom: 14px; }
.is25-fagkort--mini .is25-fagkort-stats { display: none; }

/* ============================================
   DEEP-LINK BOX — CTA mellom hub og Farena-siden
   ============================================ */
.is25-deepbox {
  position: relative; isolation: isolate;
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
  text-align: center;
  background: linear-gradient(135deg, rgba(10,38,46,.62) 0%, rgba(14,51,34,.72) 100%);
  backdrop-filter: var(--is25-blur);
  border: 1px solid var(--is25-glass-edge);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.is25-deepbox::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 70% at 18% 50%, rgba(255,0,51,.18), transparent 60%),
    radial-gradient(ellipse 50% 70% at 82% 50%, rgba(56,189,248,.18), transparent 60%);
}
.is25-deepbox h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800;
  color: var(--is25-text); margin-bottom: 16px;
}
.is25-deepbox h3 .accent {
  background: linear-gradient(135deg, var(--is25-green-bright) 0%, var(--is25-ice) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is25-deepbox p {
  color: var(--is25-text-muted);
  font-size: 1rem; line-height: 1.65;
  max-width: 640px; margin: 0 auto 28px;
}
.is25-deepbox .is25-btns { justify-content: center; }

/* ============================================
   STICKY IN-PAGE NAV — for fagguider
   --------------------------------------------
   Plasseres rett under hero. Klistrer seg til
   toppen av viewport ved scroll.
   ============================================ */
.is25-stickynav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(3,17,10,.82);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--is25-line-strong);
  box-shadow: 0 6px 24px rgba(0,0,0,.32);
}
.is25-stickynav-inner {
  display: flex; align-items: center;
  gap: 8px; padding: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.is25-stickynav-inner::-webkit-scrollbar { display: none; }

.is25-stickynav-label {
  flex-shrink: 0;
  padding: 6px 14px 6px 0;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--is25-ice-bright);
  border-right: 1px solid var(--is25-line);
  margin-right: 8px;
}

.is25-stickynav a {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .88rem; font-weight: 600;
  color: var(--is25-text-muted);
  white-space: nowrap;
  transition: background .2s, color .2s, transform .25s var(--ease-spring);
}
.is25-stickynav a:hover {
  background: rgba(56,189,248,.10);
  color: var(--is25-ice-bright);
  transform: translateY(-1px);
}
.is25-stickynav a.active {
  background: var(--is25-ice-soft);
  color: var(--is25-ice-bright);
  border: 1px solid rgba(125,211,252,.32);
}

/* ============================================
   SPEC TABLE — sammenligning av tekniske valg
   ============================================ */
.is25-spectable {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--is25-glass);
  backdrop-filter: var(--is25-blur);
  border: 1px solid var(--is25-glass-edge);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.is25-spectable thead th {
  padding: 22px 24px;
  text-align: left;
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 700;
  color: var(--is25-text);
  background: rgba(8,42,58,.72);
  border-bottom: 1px solid var(--is25-line-strong);
}
.is25-spectable thead th:first-child {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--is25-ice-bright);
}
.is25-spectable thead th.--good {
  color: var(--is25-ice-bright);
  background: linear-gradient(180deg, rgba(56,189,248,.18) 0%, rgba(8,42,58,.72) 100%);
}
.is25-spectable thead th.--bad {
  color: #ffb8c4;
  background: linear-gradient(180deg, rgba(255,0,51,.14) 0%, rgba(8,42,58,.72) 100%);
}
.is25-spectable tbody td {
  padding: 18px 24px;
  font-size: .94rem;
  color: var(--is25-text);
  border-bottom: 1px solid var(--is25-line);
  vertical-align: top;
}
.is25-spectable tbody td:first-child {
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 600;
  letter-spacing: .06em;
  color: var(--is25-text-muted);
  width: 30%;
}
.is25-spectable tbody td strong {
  color: var(--is25-text);
  font-weight: 700;
}
.is25-spectable tbody td.--good { color: var(--is25-ice-bright); font-weight: 600; }
.is25-spectable tbody td.--bad  { color: #ffb8c4; font-weight: 600; }
.is25-spectable tbody tr:last-child td { border-bottom: none; }
.is25-spectable tbody tr:hover td { background: rgba(56,189,248,.04); }

@media (max-width: 700px) {
  .is25-spectable thead th,
  .is25-spectable tbody td { padding: 14px 14px; font-size: .86rem; }
  .is25-spectable tbody td:first-child { width: 38%; }
}

/* ============================================
   FEAT GRID — 3-kolonne feature-kort (mindre enn .is25-card)
   ============================================ */
.is25-feat-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}
.is25-feat-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) {
  .is25-feat-grid,
  .is25-feat-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .is25-feat-grid,
  .is25-feat-grid--2 { grid-template-columns: 1fr; }
}

.is25-feat {
  position: relative;
  padding: 28px 26px;
  background: var(--is25-glass);
  backdrop-filter: var(--is25-blur);
  border: 1px solid var(--is25-glass-edge);
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease-spring), border-color .3s, box-shadow .35s;
}
.is25-feat:hover {
  transform: translateY(-3px);
  border-color: rgba(125,211,252,.32);
  box-shadow: var(--is25-shadow-md), 0 0 32px rgba(56,189,248,.14);
}
.is25-feat-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(125,211,252,.32) 0%, rgba(56,189,248,.16) 100%);
  border: 1px solid rgba(125,211,252,.32);
  color: var(--is25-ice-bright);
  font-size: 1rem;
  box-shadow: 0 0 14px rgba(56,189,248,.18) inset;
}
.is25-feat h4 {
  font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 700;
  color: var(--is25-text); margin-bottom: 10px;
  line-height: 1.3;
}
.is25-feat p {
  color: var(--is25-text-muted);
  font-size: .92rem; line-height: 1.55;
}

/* ============================================
   LAYERS — nummererte oppbygnings-kort (vertikal stack)
   ============================================ */
.is25-layers {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 800px) { .is25-layers { grid-template-columns: 1fr; } }

.is25-layer {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 18px; align-items: start;
  padding: 22px 22px;
  background: var(--is25-glass);
  backdrop-filter: var(--is25-blur);
  border: 1px solid var(--is25-glass-edge);
  border-radius: var(--r-md);
  transition: border-color .3s var(--ease), transform .25s var(--ease-spring);
}
.is25-layer:hover {
  border-color: rgba(125,211,252,.32);
  transform: translateX(3px);
}
.is25-layer-num {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background: var(--is25-grad-ice);
  color: #042530;
  font-family: var(--font-mono);
  font-size: 1.1rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(56,189,248,.32),
              inset 0 1px 0 rgba(255,255,255,.42);
}
.is25-layer h4 {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--is25-text); margin-bottom: 6px;
}
.is25-layer p {
  color: var(--is25-text-muted);
  font-size: .9rem; line-height: 1.5;
}

/* ============================================
   AMBITION CARDS — driftsambisjon-nivåer m/ effekt-tall
   ============================================ */
.is25-amb-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px) { .is25-amb-grid { grid-template-columns: 1fr; } }

.is25-amb {
  position: relative;
  padding: 30px 28px;
  background: var(--is25-glass);
  backdrop-filter: var(--is25-blur);
  border: 1px solid var(--is25-glass-edge);
  border-radius: var(--r-xl);
  transition: transform .35s var(--ease-spring), border-color .3s, box-shadow .35s;
}
.is25-amb:hover {
  transform: translateY(-4px);
  border-color: rgba(125,211,252,.42);
  box-shadow: var(--is25-shadow-md), 0 0 40px rgba(56,189,248,.18);
}
.is25-amb-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  background: rgba(125,211,252,.10);
  border: 1px solid rgba(125,211,252,.28);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--is25-ice-bright);
  margin-bottom: 16px;
}
.is25-amb h4 {
  font-family: var(--font-display);
  font-size: 1.18rem; font-weight: 700;
  color: var(--is25-text); margin-bottom: 14px;
}
.is25-amb-effekt {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 800; line-height: 1;
  background: var(--is25-grad-ice);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 18px rgba(125,211,252,.32));
}
.is25-amb-effekt small {
  display: block; margin-top: 6px;
  font-family: var(--font-mono);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--is25-text-dim);
  background: none;
  -webkit-text-fill-color: var(--is25-text-dim);
}
.is25-amb p {
  color: var(--is25-text-muted);
  font-size: .94rem; line-height: 1.55;
}

/* ============================================
   KEN BURNS HERO SLIDER
   --------------------------------------------
   Krysslappende bakgrunns-slider med Ken Burns
   zoom + pan på hver slide. Driftes av JS-en
   i ishella-core.js (auto-loop, 7s per slide).
   --------------------------------------------
   Bruk:
   <section class="is25-hero is25-kenhero">
     <div class="is25-kenslider" data-is25-kenslider data-interval="7000">
       <div class="is25-kenslide is25-kenslide--active"
            style="background-image: url(...)"></div>
       <div class="is25-kenslide" style="background-image: url(...)"></div>
       ...
     </div>
     <div class="is25-kenhero-overlay"></div>
     <div class="is25-wrap">...content...</div>
   </section>
   ============================================ */
.is25-kenhero {
  position: relative; isolation: isolate;
  overflow: hidden;
}

.is25-kenslider {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
  background: var(--is25-bg-deep);
}

.is25-kenslide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s var(--ease-expo);
  will-change: transform, opacity;
}

/* Ken Burns: 8s zoom — kjøres når slide blir aktiv */
.is25-kenslide.is25-kenslide--active {
  opacity: 1;
  animation: is25-kenburns 8s linear forwards;
  z-index: 1;
}

/* Pan-varianter for variasjon mellom slides */
.is25-kenslide:nth-child(2n).is25-kenslide--active {
  animation-name: is25-kenburns-r;
}
.is25-kenslide:nth-child(3n).is25-kenslide--active {
  animation-name: is25-kenburns-up;
}

@keyframes is25-kenburns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.16) translate(-2%, -1.5%); }
}
@keyframes is25-kenburns-r {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.16) translate(2%, -1.5%); }
}
@keyframes is25-kenburns-up {
  0%   { transform: scale(1.04) translate(0, 1%); }
  100% { transform: scale(1.18) translate(0, -2%); }
}

/* Mørk overlay over slider — sikrer tekst-lesbarhet */
.is25-kenhero-overlay {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 18% 50%, rgba(3,17,10,.85) 0%, transparent 60%),
    radial-gradient(ellipse 60% 65% at 88% 30%, rgba(56,189,248,.32) 0%, transparent 65%),
    linear-gradient(135deg, rgba(3,17,10,.78) 0%, rgba(2,30,42,.42) 60%, rgba(3,17,10,.7) 100%);
}

/* Indikator-prikker (valgfri) */
.is25-kendots {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
  z-index: 5;
}
.is25-kendot {
  width: 28px; height: 4px;
  border-radius: 2px;
  background: rgba(186,230,253,.18);
  border: none;
  cursor: pointer;
  transition: background .3s var(--ease), width .3s var(--ease-spring);
}
.is25-kendot.is25-kendot--active {
  background: var(--is25-ice-bright);
  width: 44px;
  box-shadow: 0 0 12px rgba(125,211,252,.55);
}

@media (prefers-reduced-motion: reduce) {
  .is25-kenslide.is25-kenslide--active { animation: none; transform: none; }
}

/* ============================================
   CARD — generisk klikkbart kort (ice default)
   --------------------------------------------
   Brukes i decision-grids, related-grids, og
   andre steder. Kunstgress-sider kan overstyre
   nth-child for grønn/rød variasjon.
   ============================================ */
.is25-card {
  position: relative; isolation: isolate;
  padding: 36px 32px 30px;
  background: var(--is25-glass);
  backdrop-filter: var(--is25-blur);
  border: 1px solid var(--is25-glass-edge);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .4s var(--ease-spring),
              border-color .3s var(--ease),
              box-shadow .4s var(--ease);
  display: flex; flex-direction: column;
  cursor: pointer;
  text-decoration: none; color: inherit;
}
.is25-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, rgba(125,211,252,.55) 0%, rgba(56,189,248,.22) 50%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease);
}
.is25-card::after {
  content: ""; position: absolute;
  bottom: -45%; right: -25%;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(125,211,252,.32) 0%, transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease); z-index: -1;
}
.is25-card:hover {
  transform: translateY(-8px);
  border-color: rgba(125,211,252,.42);
  box-shadow: var(--is25-shadow-lg), 0 0 60px rgba(56,189,248,.22);
}
.is25-card:hover::before { opacity: 1; }
.is25-card:hover::after  { opacity: 1; }

.is25-card-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  margin-bottom: 24px;
  border-radius: var(--r-md);
  font-size: 1.24rem;
  background: linear-gradient(135deg, rgba(125,211,252,.32) 0%, rgba(56,189,248,.18) 100%);
  color: var(--is25-ice-bright);
  border: 1px solid rgba(125,211,252,.32);
  box-shadow: 0 6px 20px rgba(56,189,248,.22),
              inset 0 0 16px rgba(186,230,253,.12);
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease);
}
.is25-card:hover .is25-card-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 10px 28px rgba(56,189,248,.42),
              inset 0 0 22px rgba(186,230,253,.22);
}
.is25-card h3 {
  font-size: 1.24rem; line-height: 1.3; font-weight: 700;
  color: var(--is25-text); margin-bottom: 12px;
}
.is25-card p {
  color: var(--is25-text-muted);
  font-size: .96rem; line-height: 1.6;
  flex-grow: 1; margin-bottom: 18px;
}
.is25-card-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .92rem; color: var(--is25-ice-bright);
  transition: gap .25s var(--ease);
}
.is25-card:hover .is25-card-arrow { gap: 14px; }

/* ============================================
   CTA SECTION — generisk (ice default)
   --------------------------------------------
   Sider som vil ha rød/grønn CTA overstyrer
   .is25-cta, .is25-cta::before, .is25-cta h2 .accent
   i sin sideunike CSS.
   ============================================ */
.is25-cta {
  position: relative; isolation: isolate;
  padding: clamp(80px, 10vw, 120px) 0;
  background: linear-gradient(135deg, #042530 0%, #064a5c 50%, #02323d 100%);
  overflow: hidden;
}
.is25-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 18% 50%, rgba(125,211,252,.32), transparent 60%),
    radial-gradient(ellipse 50% 70% at 88% 40%, rgba(56,189,248,.32), transparent 65%),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(186,230,253,.18), transparent 65%);
}
.is25-cta-inner {
  text-align: center; max-width: 820px; margin-inline: auto;
}
.is25-cta h2 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 18px 0 18px;
  letter-spacing: -.03em;
}
.is25-cta h2 .accent {
  background: var(--is25-grad-ice);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(125,211,252,.45));
}
.is25-cta p {
  color: rgba(229,242,251,.86);
  font-size: 1.08rem; line-height: 1.65;
  max-width: 640px; margin: 0 auto 32px;
}
.is25-cta .is25-btns { justify-content: center; }

/* ============================================
   FOOTER STRIP
   ============================================ */
.is25-footstrip {
  padding: 24px 0;
  background: var(--is25-bg-deep);
  border-top: 1px solid var(--is25-line);
  font-family: var(--font-mono);
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--is25-text-dim);
  text-align: center;
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.is25-reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo);
}
.is25-reveal.visible { opacity: 1; transform: none; }
.is25-d1 { transition-delay: .06s; }
.is25-d2 { transition-delay: .12s; }
.is25-d3 { transition-delay: .18s; }
.is25-d4 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .is25-reveal { opacity: 1; transform: none; transition: none; }
  body::before, .is25-ice-shimmer { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}