/* Korv Glanz case studies: the navy theme from korv-glanz.html, shared by the case study pages */
:root {
  --ink: #0B1530; --ink-2: #3B4357; --ink-3: #6B7280; --line: #E6E8EC; --paper: #F6F8FC;
  --blue: #1D5FE0; --blue-2: #2E8CF0; --cyan: #33C3F0; --navy: #07102A; --navy-2: #0E1B42;
}
html { scroll-behavior: auto; }
body { font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
header, footer { font-family: 'Inter', sans-serif; }
.display, h1.display, h2.display { font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-weight: 600; letter-spacing: -0.04em; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
section[id] { scroll-margin-top: 80px; }

/* ---------- shared pieces ---------- */
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.kicker::before { content: ''; width: 18px; height: 1.5px; background: currentColor; }
.h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; color: var(--ink); }
.lead { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.grad-dark { background: linear-gradient(90deg, #6FA8FF 0%, #6FE3FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-glow {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font-weight: 500; color: #fff;
  background: linear-gradient(180deg, #2E6FEE, #1A56D1);
  box-shadow: 0 0 0 1px rgba(29,95,224,.35), 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 30px -8px rgba(29,95,224,.65), 0 0 40px -6px rgba(51,195,240,.5);
  transition: transform .25s, box-shadow .25s;
}
.btn-glow:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(29,95,224,.45), 0 1px 0 rgba(255,255,255,.3) inset, 0 16px 36px -10px rgba(29,95,224,.75), 0 0 56px -4px rgba(51,195,240,.7); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; font-weight: 500; transition: border-color .2s, color .2s; }
.btn-ghost.on-dark { color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(141,182,255,.3); backdrop-filter: blur(8px); }
.btn-ghost.on-dark:hover { border-color: #fff; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.pill.on-dark { background: rgba(255,255,255,.06); border: 1px solid rgba(141,182,255,.25); color: #DCE7FF; backdrop-filter: blur(8px); }

/* reveals */
.hero-in { opacity: 0; transform: translateY(18px); animation: hero-in 1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes hero-in { to { opacity: 1; transform: none; } }
.js-rv [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.js-rv [data-rv="tilt"] { transform: perspective(1200px) translateY(70px) rotateX(16deg); transform-origin: 50% 100%; }
.js-rv [data-rv].in { opacity: 1; transform: none; filter: none; }

/* headings rise word by word */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.split.split-in .w > span { transform: none; }

/* ---------- one navy surface down to the footer ---------- */
.deep { position: relative; margin: 0 12px; background: var(--navy); color: #EAF2FF; overflow: clip; }
@media (max-width: 767px) { .deep { margin: 0 8px; } }
.deep::before { /* a soft light drifting down the page */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 600px at 85% 8%, rgba(47,123,255,.14), transparent 70%), radial-gradient(800px 600px at 10% 45%, rgba(51,195,240,.08), transparent 70%), radial-gradient(900px 700px at 80% 82%, rgba(47,123,255,.12), transparent 70%);
}
.deep .kicker { color: #8DB6FF; }
.deep .h2 { color: #fff; }
.deep .lead { color: #BFD0F2; }

/* each section sticks once its bottom reaches the screen, and the next one slides up over it */
.stack-up { position: sticky; top: 0; background: linear-gradient(180deg, #0D1D4D 0%, #091538 26%, var(--navy) 100%); border-radius: 44px 44px 0 0; margin-top: -44px; box-shadow: 0 -40px 80px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(141,182,255,.25); }
.stack-up::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #030816; opacity: var(--dim, 0); pointer-events: none; z-index: 3; }
.stack-up > .wrap { position: relative; transform-origin: 50% var(--origin, 50%); will-change: transform; }
@media (max-width: 767px) { .stack-up { border-radius: 28px 28px 0 0; margin-top: -28px; } }
.deep > section:nth-of-type(1) { z-index: 1; } .deep > section:nth-of-type(2) { z-index: 2; } .deep > section:nth-of-type(3) { z-index: 3; } .deep > section:nth-of-type(4) { z-index: 4; }
.deep > section:nth-of-type(5) { z-index: 5; } .deep > section:nth-of-type(6) { z-index: 6; } .deep > section:nth-of-type(7) { z-index: 7; } .deep > section:nth-of-type(8) { z-index: 8; }
/* pages can run past eight sections: without a number the last ones paint behind those stuck on screen */
.deep > section:nth-of-type(9) { z-index: 9; } .deep > section:nth-of-type(10) { z-index: 10; } .deep > section:nth-of-type(11) { z-index: 11; } .deep > section:nth-of-type(12) { z-index: 12; }
.deep > section:nth-of-type(13) { z-index: 13; } .deep > section:nth-of-type(14) { z-index: 14; } .deep > section:nth-of-type(15) { z-index: 15; } .deep > section:nth-of-type(16) { z-index: 16; }
.deep > section:nth-of-type(even) { background: radial-gradient(900px 500px at 90% 0%, rgba(47,123,255,.16), transparent 70%), linear-gradient(180deg, #0C1B49 0%, var(--navy) 35%); }
@media (min-width: 1024px) { .side-sticky { position: sticky; top: 110px; } }

/* ---------- shared card pieces ---------- */
.eo-label { display: block; font: 500 11.5px/1.45 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #8DB6FF; }
.eo-note { margin-top: 6px; font-size: 14px; line-height: 1.5; color: #9FB3D9; }
.eo-num, .eo-num-lg { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1.05; color: #fff; }
.eo-num { font-size: clamp(26px, 2.8vw, 36px); }
.eo-num-lg { font-size: clamp(32px, 3.2vw, 44px); }
.eo-stat { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.035); border: 1px solid rgba(141,182,255,.16); }
@media (max-width: 480px) { .eo-stat { padding: 16px; border-radius: 18px; } .eo-stat .eo-label { font-size: 10.5px; letter-spacing: .05em; } }
.eo-stat-hi { background: radial-gradient(ellipse 90% 90% at 15% 0%, #2F6FE8 0%, #1A47AE 45%, #0F2A70 100%); border-color: rgba(141,182,255,.35); box-shadow: 0 30px 60px -30px rgba(47,123,255,.7); }
.eo-stat-hi .eo-label { color: #CFE0FF; }
.eo-stat-hi .eo-note { color: #DCE7FF; }
.eo-icon { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; font: 500 13px/1 'IBM Plex Mono', monospace; color: #8DB6FF; background: rgba(79,139,255,.15); transition: background .3s, color .3s; }
.eo-icon-bad { color: #FF8A8E; background: rgba(255,92,97,.14); }
.eo-line { height: 4px; width: 80px; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.eo-big { font-size: clamp(20px, 2vw, 25px); line-height: 1.5; color: #EAF2FF; }
.eo-callout { padding: 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(47,123,255,.16), rgba(255,255,255,.03)); border: 1px solid rgba(141,182,255,.2); }
.eo-callout-text { font-size: 18px; font-weight: 500; line-height: 1.6; color: #fff; }
.eo-chip { padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #DCE7FF; background: rgba(255,255,255,.05); border: 1px solid rgba(141,182,255,.22); }
.eo-sub { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.03em; color: #fff; }

/* challenge panels */
.eo-panel { padding: 30px; border-radius: 26px; background: rgba(255,255,255,.035); border: 1px solid rgba(141,182,255,.16); }
@media (max-width: 480px) { .eo-panel { padding: 22px; } }
.eo-panel-hi { background: linear-gradient(160deg, rgba(47,123,255,.16), rgba(255,255,255,.03)); border-color: rgba(141,182,255,.26); }
.eo-panel-title { font-family: 'Space Grotesk', sans-serif; font-size: 25px; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
.eo-tag { flex: none; margin-left: 12px; padding: 6px 10px; border-radius: 999px; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #6FE3FF; background: rgba(51,195,240,.12); border: 1px solid rgba(51,195,240,.25); }
.eo-tag-bad { color: #FF8A8E; background: rgba(255,92,97,.12); border-color: rgba(255,92,97,.28); }
.eo-item-t { font-weight: 600; font-size: 16.5px; color: #fff; }
.eo-item-p { margin-top: 4px; font-size: 15.5px; line-height: 1.65; color: #BFD0F2; }

/* solution and step cards */
.eo-card { position: relative; padding: 26px; border-radius: 22px; background: rgba(255,255,255,.035); border: 1px solid rgba(141,182,255,.14); transition: border-color .3s, box-shadow .3s; }
.eo-card:hover { border-color: rgba(111,168,255,.45); box-shadow: 0 30px 60px -40px rgba(47,123,255,.7); }
.eo-card:hover .eo-icon { background: var(--blue); color: #fff; }
.js-rv .eo-card.in { transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1), filter .9s ease, border-color .3s, box-shadow .3s; }
.eo-card-hi { background: linear-gradient(160deg, rgba(47,123,255,.2), rgba(255,255,255,.03)); border-color: rgba(141,182,255,.28); }
.eo-card-t { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #fff; }
.eo-card-p { font-size: 15.5px; line-height: 1.65; color: #BFD0F2; }
.eo-step { font: 500 12px/1.3 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6FA8FF; }
.eo-flow { padding: 24px; border-radius: 22px; background: radial-gradient(500px 240px at 90% 0%, rgba(51,195,240,.16), transparent 70%), rgba(255,255,255,.035); border: 1px solid rgba(141,182,255,.2); }
.eo-flow-text { font-size: 17px; font-weight: 500; line-height: 1.6; color: #EAF2FF; }

/* the big statement, on a faint grid */
.eo-value::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(141,182,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(141,182,255,.1) 1px, transparent 1px);
  background-size: 40px 40px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 30%, transparent 85%);
}
.eo-value > .wrap { z-index: 1; }
.eo-statement { font-size: clamp(38px, 5.6vw, 76px); line-height: 1.02; color: #fff; }

/* ---------- calculator ---------- */
.eo-calc { position: relative; overflow: hidden; padding: 24px 20px; border-radius: 32px; background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(47,123,255,.2), transparent 70%), rgba(255,255,255,.03); border: 1px solid rgba(141,182,255,.2); box-shadow: 0 60px 120px -60px rgba(47,123,255,.6); }
@media (min-width: 640px) { .eo-calc { padding: 44px; } }
.eo-calc::after { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(111,227,255,.8), transparent); }
.eo-calc-head { border-bottom: 1px solid rgba(141,182,255,.16); }
.eo-calc-title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; color: #fff; }
.eo-calc-lede { font-size: 16px; }
.eo-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.eo-range-label { font-size: 14.5px; font-weight: 500; color: #DCE7FF; }
.eo-range-val { flex: none; font: 500 14px/1 'IBM Plex Mono', monospace; color: #6FE3FF; }
.eo-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 14px 0 6px; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, var(--blue), var(--cyan)) 0 0 / var(--fill, 0%) 100% no-repeat, rgba(141,182,255,.18); }
.eo-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 5px solid var(--blue); box-shadow: 0 0 0 4px rgba(79,139,255,.2), 0 0 16px rgba(51,195,240,.7); cursor: grab; }
.eo-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; background: #fff; border: 5px solid var(--blue); box-shadow: 0 0 0 4px rgba(79,139,255,.2), 0 0 16px rgba(51,195,240,.7); cursor: grab; }
.eo-range:focus-visible { outline: 2px solid #6FE3FF; outline-offset: 6px; }
.eo-calc-note { padding: 16px; border-radius: 16px; background: rgba(7,16,42,.5); border: 1px solid rgba(141,182,255,.14); }
.eo-small { font-size: 12.5px; line-height: 1.55; color: #9FB3D9; }
.eo-results { padding: 20px; border-radius: 24px; background: rgba(7,16,42,.55); border: 1px solid rgba(141,182,255,.18); }
.eo-res { padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(141,182,255,.14); }
.eo-res .eo-label { font-size: 11px; }
.eo-res-num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.15; color: #fff; }
.eo-res-good { color: #6FE3FF; }
.eo-small.eo-res-good { color: #6FE3FF; }
.eo-res.flex { flex-wrap: wrap; }
.eo-res.flex > .flex { flex: 1 1 210px; min-width: 0; }
.eo-res.flex > .text-right { margin-left: auto; }
@media (max-width: 480px) {
  .eo-num { font-size: 24px; }
  .eo-results { padding: 12px; border-radius: 20px; }
  .eo-res { padding: 14px; }
  .eo-res .eo-label { font-size: 10px; letter-spacing: .04em; }
}

/* ---------- demo stage ---------- */
.cta-stage { position: relative; overflow: hidden; border-radius: 32px; padding: 40px 22px; background: radial-gradient(ellipse 60% 70% at 15% 0%, #2152C4 0%, #12307A 40%, #0C1D52 85%); border: 1px solid rgba(141,182,255,.25); box-shadow: 0 60px 120px -60px rgba(47,123,255,.6); }
@media (min-width: 768px) { .cta-stage { padding: 64px; } }
.cta-stage::after { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(111,227,255,.8), transparent); }
.cta-stage h2 { color: #fff; }
.cta-list li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(141,182,255,.18); color: #DCE7FF; }
.cta-list li span { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: rgba(79,139,255,.2); color: #8DB6FF; flex: none; font-size: 13px; }
.eo-cta-foot { font-size: 14px; line-height: 1.6; color: #BFD0F2; }
.form-card { background: #fff; border-radius: 24px; padding: 26px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
@media (min-width: 768px) { .form-card { padding: 34px; } }
.deep .form-card .kicker { color: var(--blue); }
.field { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.field::placeholder { color: #9CA3AF; }
.field:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(29,95,224,.12); }
.form-card .grid > div { min-width: 0; }
select.field { appearance: none; cursor: pointer; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.form-card #submitBtn { border-radius: 999px; background: linear-gradient(180deg, #2E6FEE, #1A56D1); box-shadow: 0 10px 30px -10px rgba(29,95,224,.7); }

/* ---------- footer: the last part of the navy surface ---------- */
footer.bg-gray-900 {
  position: relative; overflow: hidden; margin: 0 12px 12px; padding: 64px 0 28px; border-radius: 0 0 32px 32px;
  background: radial-gradient(800px 400px at 15% 0%, rgba(47,123,255,.14), transparent 70%), radial-gradient(700px 400px at 90% 100%, rgba(51,195,240,.08), transparent 70%), var(--navy);
}
@media (max-width: 767px) { footer.bg-gray-900 { margin: 0 8px 8px; border-radius: 0 0 22px 22px; padding-top: 48px; } }
footer.bg-gray-900::before { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(141,182,255,.3), transparent); }
footer.bg-gray-900::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(141,182,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(141,182,255,.07) 1px, transparent 1px);
  background-size: 40px 40px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
}
footer.bg-gray-900 > * { position: relative; z-index: 1; }
footer .text-blue-400 { background: linear-gradient(90deg, #6FA8FF, #6FE3FF); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
footer .text-gray-400 { color: #9FB3D9; }
footer .text-gray-500 { color: #6F8CC4; }
footer a.hover\:text-white:hover { color: #fff; }
footer .bg-gray-800 { background: rgba(255,255,255,.05); border: 1px solid rgba(141,182,255,.2); color: #CFE0FF; }
footer .bg-gray-800:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
footer .border-gray-800 { border-color: rgba(141,182,255,.14); margin-top: 40px; padding-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .hero-in { opacity: 1; transform: none; animation: none; }
}