/* Korv Glanz case study pages: page layout on the shared navy theme, and each case's own visual */

/* ---------- hero: the copy beside the case's visual, the key facts underneath ---------- */
.cs-hero { position: relative; margin: 12px 12px 0; padding: clamp(32px, 5vh, 52px) 0 calc(48px + 44px); border-radius: 32px 32px 0 0; overflow: clip; color: #fff; isolation: isolate; background: radial-gradient(ellipse 72% 78% at 72% 38%, #1A3A9E 0%, #12276A 34%, #0A1638 66%, var(--navy) 94%); }
@media (max-width: 767px) { .cs-hero { margin: 8px 8px 0; padding-bottom: 60px; border-radius: 22px 22px 0 0; } }
.cs-hero::after { content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(111,227,255,.8), transparent); }
.cs-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; font-size: 14px; color: #BFD0F2; transition: color .2s; }
.cs-back:hover { color: #fff; }
.cs-pill { margin-bottom: 24px; }
.cs-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 10px rgba(51,195,240,.9); }
.cs-h1 { font-size: clamp(38px, 5vw, 70px); line-height: 1.02; color: #fff; text-shadow: 0 10px 40px rgba(7,16,42,.8); }
.cs-hero .lead { color: #BFD0F2; }
.cs-stage { position: relative; min-width: 0; }
.cs-stage::before { /* the blue light behind the main page's particle scene */
  content: ''; position: absolute; inset: -14% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(28,94,242,.5), rgba(28,94,242,.18) 58%, transparent);
}
.cs-glance { margin-top: 44px; padding: 20px; border-radius: 26px; background: rgba(13,28,72,.66); border: 1px solid rgba(141,182,255,.22); backdrop-filter: blur(12px); box-shadow: 0 -10px 80px -30px rgba(51,195,240,.4), 0 50px 100px -50px rgba(0,0,0,.7); }
@media (max-width: 480px) { .cs-glance { padding: 14px; border-radius: 22px; margin-top: 32px; } }
.cs-facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 14px; }
.cs-fact { margin-top: 8px; font-size: 15px; line-height: 1.55; color: #EAF2FF; }
.cs-link { color: #6FE3FF; text-decoration: underline; text-underline-offset: 3px; }
.cs-shot { border-radius: 18px; overflow: hidden; background: #0B1638; border: 1px solid rgba(141,182,255,.22); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 6px rgba(255,255,255,.03); }
.cs-shot img { display: block; width: 100%; height: auto; }
.cs-hero .cs-shots { margin-top: 32px; }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- content blocks ---------- */
.cs-no { font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-bottom: 26px; color: #6FA8FF; }
.cs-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cs-li { display: flex; gap: 14px; align-items: baseline; padding: 16px 18px; border-radius: 18px; color: #EAF2FF; line-height: 1.5; background: rgba(255,255,255,.035); border: 1px solid rgba(141,182,255,.14); }
.cs-li-no { font: 500 12px/1.6 'IBM Plex Mono', monospace; color: #6FA8FF; }
.cs-quote { font-family: 'Space Grotesk', sans-serif; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.cs-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0 8px; font-size: 15px; text-align: left; }
.cs-table th { padding: 0 18px 6px; font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6F8CC4; }
.cs-table td { padding: 15px 18px; line-height: 1.5; color: #BFD0F2; background: rgba(255,255,255,.035); border-top: 1px solid rgba(141,182,255,.14); border-bottom: 1px solid rgba(141,182,255,.14); }
.cs-table td:first-child { font-weight: 600; color: #fff; border-left: 1px solid rgba(141,182,255,.14); border-radius: 14px 0 0 14px; }
.cs-table td:last-child { border-right: 1px solid rgba(141,182,255,.14); border-radius: 0 14px 14px 0; }
.cs-pri { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 500 11.5px/1.2 'IBM Plex Mono', monospace; }
.cs-pri.high { color: #FF9CA0; background: rgba(255,92,97,.14); border: 1px solid rgba(255,92,97,.3); }
.cs-pri.medium { color: #FFD08A; background: rgba(255,184,77,.13); border: 1px solid rgba(255,184,77,.3); }
.cs-pri.low { color: #8DE3C2; background: rgba(61,220,151,.12); border: 1px solid rgba(61,220,151,.28); }
.cs-card { position: relative; display: flex; flex-direction: column; min-height: 170px; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.035); border: 1px solid rgba(141,182,255,.14); transition: border-color .3s, box-shadow .3s; }
.js-rv .cs-card.in { transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1), filter .9s ease, border-color .3s, box-shadow .3s; }
.cs-card:hover { border-color: rgba(111,168,255,.45); box-shadow: 0 40px 80px -50px rgba(47,123,255,.7); }
.cs-card-t { margin-bottom: 18px; font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #fff; }
.cs-go { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: #6FC3FF; }
.cs-go svg { transition: transform .3s; }
.cs-card:hover .cs-go svg, a.cs-go:hover svg { transform: translateX(4px); }

/* ---------- a case's visual: the frame they share ---------- */
.vz { position: relative; padding: 14px; border-radius: 26px; background: #0A1538; border: 1px solid rgba(141,182,255,.24); box-shadow: 0 50px 100px -50px rgba(47,123,255,.7), 0 20px 40px -20px rgba(3,8,22,.9); }
@media (max-width: 480px) { .vz { padding: 10px; border-radius: 20px; } }
.vz-head { display: flex; justify-content: space-between; gap: 12px; padding: 2px 6px 11px; }
.vz-head small { display: block; font: 500 10.5px/1.3 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6F8CC4; }
.vz-head b { display: block; margin-top: 3px; font-family: 'Space Grotesk', sans-serif; font-size: 16.5px; font-weight: 600; color: #fff; transition: color .3s; }
.vz-head div:last-child:not(:first-child) { text-align: right; }
.vz-view { position: relative; overflow: hidden; border-radius: 16px; background: radial-gradient(ellipse 80% 90% at 50% 40%, #0F2358, #060D24 85%); }
.vz-view > svg { display: block; width: 100%; height: auto; }
.vz svg text { font-family: 'IBM Plex Mono', monospace; }
.t-ok { color: #6FEBB9 !important; } .t-bad { color: #FF8A8E !important; } .t-mute { color: #9FB3D9 !important; }

/* ---------- PPE: one operator, four checks ---------- */
.pp-body { fill: #CFE3F7; }
.pp-skin { fill: #E8B48F; }
.pp-net { fill: #8FC7FF; opacity: .92; transition: opacity .4s; }
.pp-gog { fill: rgba(111,227,255,.35); stroke: #BFEFFF; stroke-width: 2.5; transition: opacity .4s; }
.pp-mask { fill: #F2F8FF; transition: opacity .4s; }
.pp-glove { fill: #5BB8FF; transition: opacity .4s; }
.pp-face { fill: none; stroke: #FF5C61; stroke-width: 3; opacity: 0; transition: opacity .3s; }
.pp-ok { fill: none; stroke: #3DDC97; stroke-width: 2.5; opacity: 0; transition: opacity .3s; }
.pp-scan { fill: url(#ppScan); animation: pp-scan 3.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes pp-scan { 0% { transform: translateY(-90px); } 100% { transform: translateY(400px); } }
.pp-crop { fill: #060D24; opacity: 0; transition: opacity .5s; }
.pp-croptext { fill: #9FB3D9; font-size: 12px; opacity: 0; transition: opacity .5s; text-anchor: middle; }
.pp-call rect { fill: rgba(7,16,42,.86); stroke: rgba(141,182,255,.3); }
.pp-call line { stroke: rgba(141,182,255,.55); stroke-width: 1.4; stroke-dasharray: 3 3; }
.pp-call .n { fill: #9FB8E8; font-size: 11px; }
.pp-call .v { font-size: 12.5px; font-weight: 500; fill: #6FEBB9; transition: fill .3s; }
.pp-call[data-v="bad"] .v { fill: #FF8A8E; }
.pp-call[data-v="bad"] rect { stroke: #FF5C61; }
.pp-call[data-v="mute"] .v { fill: #9FB3D9; }
[data-state="ok"] .pp-ok { opacity: 1; }
[data-state="missing"] .pp-gog, [data-state="missing"] .pp-mask { opacity: 0; }
[data-state="missing"] .pp-face { opacity: 1; }
[data-state="hidden"] .pp-crop, [data-state="hidden"] .pp-croptext { opacity: 1; }

/* ---------- tablets: strips on the conveyor ---------- */
.tb-line { position: relative; height: 196px; overflow: hidden; background: repeating-linear-gradient(90deg, #0B1638 0 34px, #0E1C45 34px 68px); }
.tb-line::before, .tb-line::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; z-index: 3; background: #050B1F; }
.tb-line::before { top: 0; } .tb-line::after { bottom: 0; }
.tb-track { position: absolute; left: 0; top: 34px; bottom: 26px; will-change: transform; }
.tb-strip { position: absolute; top: 0; width: 206px; height: 136px; padding: 10px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 7px; border-radius: 10px; background: linear-gradient(135deg, #9FAFC4, #6F7F96); box-shadow: 0 14px 22px -10px rgba(0,0,0,.8); }
.tb-p { position: relative; border-radius: 999px; background: rgba(7,16,42,.45); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.tb-p::before { content: ''; position: absolute; inset: 5px 5px; border-radius: 999px; background: linear-gradient(160deg, #fff, #D7DEE8); }
.tb-p.chip::before { clip-path: polygon(0 0, 100% 0, 100% 52%, 58% 68%, 74% 100%, 0 100%); }
.tb-p.disc::before { background: linear-gradient(160deg, #E8BE7A, #B98532); }
.tb-p.empty::before { display: none; }
.tb-p.part::after { content: ''; position: absolute; left: 46%; top: 42%; width: 7px; height: 7px; border-radius: 40%; background: #1A1208; }
.tb-p.flag { outline: 2.5px solid #FF5C61; outline-offset: 2px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45), 0 0 16px rgba(255,92,97,.8); }
.tb-tag { position: absolute; left: 8px; top: -22px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; font: 500 10.5px/1.3 'IBM Plex Mono', monospace; color: #fff; background: #D5363B; opacity: 0; transition: opacity .25s; }
.tb-strip.seen .tb-tag { opacity: 1; }
.tb-gate { position: absolute; z-index: 2; top: 12px; bottom: 12px; left: 50%; width: 3px; margin-left: -1.5px; background: #6FE3FF; box-shadow: 0 0 22px 6px rgba(111,227,255,.55); }
.tb-gate::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60px; width: 120px; background: linear-gradient(90deg, transparent, rgba(111,227,255,.14), transparent); }
.tb-log { display: grid; gap: 6px; margin-top: 10px; min-height: 124px; align-content: start; }
.tb-log li { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 11px; font-size: 13px; color: #EAF2FF; background: rgba(255,255,255,.04); border: 1px solid rgba(141,182,255,.14); animation: tb-in .4s cubic-bezier(.2,.7,.2,1); }
@keyframes tb-in { from { opacity: 0; transform: translateY(-8px); } }
.tb-log i { width: 7px; height: 7px; flex: none; border-radius: 999px; background: #FF5C61; box-shadow: 0 0 8px rgba(255,92,97,.9); }
.tb-log time { margin-left: auto; font: 500 11.5px/1 'IBM Plex Mono', monospace; color: #9FB3D9; }

/* ---------- boards: a panel, a scan, a verdict ---------- */
.bd-wrap { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .bd-wrap { grid-template-columns: 1fr 150px; } }
.bd-board { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #B98C57; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.bd-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-mark { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; }
.bd-mark.on { opacity: 1; }
.bd-tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); opacity: 0; transition: opacity .3s; }
[data-state="scan"] .bd-tiles { opacity: 1; }
.bd-tiles i { border: 1px solid rgba(111,227,255,.25); animation: bd-tile 1.8s linear infinite; animation-delay: calc(var(--n) * .15s); }
@keyframes bd-tile { 0%, 12%, 100% { background: transparent; } 4% { background: rgba(111,227,255,.34); } }
.bd-box { position: absolute; border: 2px solid #FF5C61; border-radius: 3px; opacity: 0; transform: scale(1.12); transition: opacity .3s, transform .3s; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.bd-box span { position: absolute; left: -2px; bottom: 100%; margin-bottom: 2px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; font: 500 10.5px/1.3 'IBM Plex Mono', monospace; color: #fff; background: #D5363B; }
.bd-box.low { top: auto; }
.bd-box.flip span { bottom: auto; top: 100%; margin: 2px 0 0; }
.bd-box.rt span { left: auto; right: -2px; }
.bd-box.on { opacity: 1; transform: none; }
.bd-box.false { border-color: #FFB84D; border-style: dashed; }
.bd-box.false span { background: #A8701C; }
.bd-box.false.gone { opacity: 0; transform: scale(.9); }
.bd-stamp { position: absolute; right: 19%; bottom: 8%; padding: 6px 14px; border-radius: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 25px; font-weight: 700; letter-spacing: .04em; color: #fff; opacity: 0; transform: scale(1.5) rotate(-6deg); transition: opacity .25s, transform .3s cubic-bezier(.3,1.5,.5,1); }
.bd-stamp.on { opacity: 1; transform: scale(1) rotate(-6deg); }
.bd-stamp.bad { background: #D5363B; } .bd-stamp.good { background: #17A06C; }
.bd-rep { padding: 12px; border-radius: 12px; background: #F4F7FD; color: var(--ink); }
.bd-rep b { display: block; font: 500 10.5px/1.2 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 9px; }
.bd-rep ul { display: grid; gap: 6px; }
.bd-rep li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 6px; font-size: 12px; border-bottom: 1px solid #DCE3EE; animation: tb-in .35s ease; }
.bd-rep em { font-style: normal; font: 600 10.5px/1 'IBM Plex Mono', monospace; }
.bd-rep .g { color: #0E8A5A; } .bd-rep .x { color: #C62C31; }

/* ---------- parcels: the route through the office ---------- */
.pc-wall { fill: none; stroke: rgba(141,182,255,.55); stroke-width: 3; }
.pc-desk { fill: rgba(141,182,255,.13); stroke: rgba(141,182,255,.28); }
.pc-label { fill: #6F8CC4; font-size: 10.5px; }
.pc-chair { fill: #FF8A3D; }
.pc-cam { fill: #9FB8E8; transition: fill .3s; }
.pc-cone { fill: rgba(111,227,255,.05); stroke: rgba(111,227,255,.12); transition: fill .35s, stroke .35s; }
.pc-cone.on { fill: rgba(111,227,255,.2); stroke: rgba(111,227,255,.55); }
.pc-route { fill: none; stroke: #6FE3FF; stroke-width: 2.5; stroke-dasharray: 6 6; opacity: .75; }
.pc-person { fill: #fff; }
.pc-idbox { fill: none; stroke: #6FE3FF; stroke-width: 2; }
.pc-id { fill: #6FE3FF; font-size: 11px; }
.pc-parcel { fill: #E8B06A; stroke: #8A5A22; stroke-width: 1.2; }
.pc-pin { fill: none; stroke: #6FEBB9; stroke-width: 2.5; opacity: 0; transition: opacity .3s; }
.pc-bubble { position: absolute; left: 12px; top: 12px; max-width: 62%; padding: 9px 12px; border-radius: 12px 12px 12px 3px; font-size: 13px; line-height: 1.35; color: #06281A; background: #8DF0BF; box-shadow: 0 14px 24px -12px rgba(0,0,0,.7); opacity: 0; transform: translateY(-8px) scale(.96); transition: opacity .35s, transform .35s; }
.pc-bubble small { display: block; font: 500 10px/1.2 'IBM Plex Mono', monospace; opacity: .75; margin-bottom: 3px; }
.pc-clip { position: absolute; left: 12px; right: 12px; top: 12px; padding: 9px 11px; border-radius: 11px; background: rgba(7,16,42,.88); border: 1px solid rgba(141,182,255,.3); opacity: 0; transition: opacity .3s; }
.pc-clip small { display: block; font: 500 10.5px/1.2 'IBM Plex Mono', monospace; color: #9FB8E8; margin-bottom: 7px; }
.pc-clip span { display: block; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(141,182,255,.2); }
.pc-clip span i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--cyan)); }
[data-state="fetch"] .pc-clip { opacity: 1; }
[data-state="fetch"] .pc-clip span i { animation: pc-scrub 2.2s linear forwards; }
@keyframes pc-scrub { to { transform: scaleX(1); } }
[data-state="trigger"] .pc-bubble { opacity: 1; transform: none; }
[data-state="drop"] .pc-pin, [data-state="describe"] .pc-pin { opacity: 1; }
.pc-answer { position: absolute; left: 12px; right: 12px; bottom: 12px; min-height: 44px; padding: 11px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--ink); background: rgba(255,255,255,.96); box-shadow: 0 18px 30px -14px rgba(0,0,0,.7); opacity: 0; transition: opacity .3s; }
[data-state="describe"] .pc-answer { opacity: 1; }
.pc-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--blue); animation: pc-caret .8s step-end infinite; }
@keyframes pc-caret { 50% { opacity: 0; } }

/* ---------- restaurant: three tables, five states ---------- */
.rs-chair { fill: rgba(141,182,255,.2); }
.rs-table { fill: #15275F; stroke: rgba(141,182,255,.5); stroke-width: 2.5; transition: stroke .3s, fill .3s; }
.rs-t.alert .rs-table { stroke: #FF5C61; fill: #3A1C36; }
.rs-ring { fill: none; stroke: #FF5C61; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rs-t.alert .rs-ring { animation: rs-ping 1.6s ease-out infinite; }
@keyframes rs-ping { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.3); } }
.rs-guest { fill: #6FB5FF; opacity: 0; transition: opacity .4s; }
.rs-staff { fill: #FFC46B; stroke: #fff; stroke-width: 1.5; opacity: 0; transition: opacity .4s; }
.rs-dish { fill: #F4FBFF; opacity: 0; transition: opacity .4s; }
.rs-t.g .rs-guest, .rs-t.s .rs-staff, .rs-t.d .rs-dish { opacity: 1; }
.rs-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 8px 14px; text-align: center; }
.rs-labels small { display: block; font: 500 11px/1.3 'IBM Plex Mono', monospace; color: #9FB8E8; }
.rs-labels b { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: #fff; transition: color .3s; }
.rs-labels .alert b { color: #FF9CA0; }
.rs-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 10px 4px 2px; font: 500 11.5px/1.3 'IBM Plex Mono', monospace; color: #CFE0FF; }
.rs-key span { display: inline-flex; align-items: center; gap: 7px; }
.rs-key i { width: 10px; height: 10px; border-radius: 999px; }
.rs-toast { position: absolute; left: 50%; top: 10px; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 12px; white-space: nowrap; font-size: 13px; color: #fff; background: rgba(120,24,32,.94); border: 1px solid rgba(255,138,142,.5); box-shadow: 0 16px 28px -12px rgba(0,0,0,.8); opacity: 0; transform: translate(-50%, -8px); transition: opacity .3s, transform .3s; }
.rs-toast.on { opacity: 1; transform: translate(-50%, 0); }
.rs-toast b { font-weight: 600; }
.rs-toast small { font: 500 11px/1 'IBM Plex Mono', monospace; color: #FFC9CB; }

@media (prefers-reduced-motion: reduce) {
  .pp-scan, .bd-tiles i, .rs-ring, .pc-caret { animation: none; }
}

/* SVG labels shrink with the drawing, so they start larger on a phone */
@media (max-width: 480px) {
  .pp-call .n { font-size: 15px; }
  .pp-call .v { font-size: 16px; }
  .pp-croptext { font-size: 17px; }
  .pc-label, .pc-id { font-size: 15px; }
  .rs-labels b { font-size: 12.5px; }
}