:root {
  --case-bg: #07060d;
  --case-panel: rgba(14, 12, 25, .84);
  --case-panel-2: rgba(25, 21, 41, .9);
  --case-text: #f7f4ff;
  --case-muted: rgba(247, 244, 255, .69);
  --case-line: rgba(255, 255, 255, .1);
  --case-purple: #b56cff;
  --case-violet: #7b5cff;
  --case-green: #72e6ad;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body { background: var(--case-bg); }
.container-fluid { padding-right: 0 !important; padding-left: 0 !important; }

.mercedes-case {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: 116px 20px 100px;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--case-text);
}

.mercedes-case__overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 72% 5%, rgba(181,108,255,.17), transparent 30%), rgba(4,3,10,.78);
}

.mercedes-case__wrap { width: min(1180px, 100%); margin: 0 auto; }

.case-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: clamp(32px, 7vw, 88px);
  align-items: center;
  min-height: 620px;
  padding: clamp(28px, 5vw, 62px);
  border: 1px solid var(--case-line);
  border-radius: 28px;
  background: rgba(8,7,16,.8);
  box-shadow: 0 38px 120px rgba(0,0,0,.54);
  backdrop-filter: blur(14px);
}

.case-eyebrow, .section-kicker { margin: 0 0 14px; color: #cda0ff; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.case-hero h1 { margin: 0; font-size: clamp(44px, 7vw, 82px); font-weight: 900; line-height: .96; letter-spacing: -.045em; }
.case-claim { margin: 25px 0 0; color: #fff; font-size: clamp(20px, 2.5vw, 29px); font-weight: 700; line-height: 1.3; }
.case-intro { max-width: 690px; margin: 17px 0 0; color: var(--case-muted); font-size: 16px; line-height: 1.75; }
.case-stack { display: flex; padding: 0; margin: 27px 0 0; flex-wrap: wrap; gap: 8px; list-style: none; }
.case-stack li { padding: 7px 12px; border: 1px solid rgba(181,108,255,.25); border-radius: 999px; background: rgba(123,92,255,.1); color: #e5d1ff; font-size: 12px; font-weight: 700; }
.case-actions { display: flex; margin-top: 30px; flex-wrap: wrap; gap: 11px; }
.case-button { display: inline-flex; min-height: 44px; padding: 11px 17px; align-items: center; border-radius: 11px; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.case-button:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }
.case-button--ghost { border: 1px solid var(--case-line); background: rgba(255,255,255,.06); }
.case-button--primary { border: 1px solid rgba(181,108,255,.55); background: linear-gradient(135deg, var(--case-violet), #9f55ef); }

.case-hero__meta { padding: 22px; border: 1px solid rgba(181,108,255,.18); border-radius: 21px; background: linear-gradient(145deg, rgba(32,27,51,.9), rgba(14,12,24,.95)); }
.case-hero__meta img { display: block; width: 150px; height: 150px; margin: 0 auto 25px; padding: 13px; object-fit: contain; border-radius: 18px; background: rgba(255,255,255,.88); }
.case-hero__meta dl { margin: 0; }
.case-hero__meta dl div { padding: 15px 0; border-top: 1px solid var(--case-line); }
.case-hero__meta dt { margin-bottom: 5px; color: var(--case-muted); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.case-hero__meta dd { margin: 0; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.45; }

.case-section { margin-top: 22px; padding: clamp(28px, 5vw, 58px); border: 1px solid var(--case-line); border-radius: 25px; background: var(--case-panel); box-shadow: 0 24px 70px rgba(0,0,0,.32); backdrop-filter: blur(12px); }
.section-number { flex: 0 0 auto; color: rgba(181,108,255,.55); font-size: 15px; font-weight: 900; letter-spacing: .12em; }
.section-heading { display: flex; max-width: 840px; gap: 25px; align-items: flex-start; }
.section-heading h2, .section-copy h2, .result-main h2 { margin: 0; font-size: clamp(30px, 4.7vw, 53px); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; }
.section-heading p:last-child, .section-copy > p:last-child, .result-main > p:last-child { max-width: 760px; margin: 18px 0 0; color: var(--case-muted); font-size: 16px; line-height: 1.72; }

.challenge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.challenge-result { display: flex; padding-left: 35px; align-items: center; gap: 13px; border-left: 1px solid var(--case-line); }
.challenge-result strong { color: var(--case-green); font-size: 68px; line-height: 1; }
.challenge-result span { color: var(--case-muted); font-size: 13px; font-weight: 700; line-height: 1.45; text-transform: uppercase; }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 42px; gap: 14px; }
.feature-card { min-width: 0; padding: 25px; border: 1px solid var(--case-line); border-radius: 18px; background: linear-gradient(145deg, rgba(29,25,46,.9), rgba(14,12,24,.88)); }
.feature-card--wide { grid-column: span 2; }
.feature-card--full { grid-column: 1 / -1; }
.feature-card--accent { border-color: rgba(181,108,255,.34); box-shadow: inset 0 1px 0 rgba(181,108,255,.18); }
.feature-card--privacy { background: radial-gradient(circle at 100% 0, rgba(114,230,173,.13), transparent 45%), linear-gradient(145deg, rgba(29,25,46,.9), rgba(14,12,24,.88)); }
.feature-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid rgba(181,108,255,.28); border-radius: 12px; background: rgba(123,92,255,.13); color: #cf9dff; font-size: 18px; }
.feature-card h3 { margin: 19px 0 9px; color: #fff; font-size: 20px; font-weight: 850; }
.feature-card p { margin: 0; color: var(--case-muted); font-size: 14px; line-height: 1.7; }
.privacy-badge { display: inline-flex; margin-top: 18px; padding: 7px 11px; align-items: center; gap: 8px; border: 1px solid rgba(114,230,173,.28); border-radius: 999px; background: rgba(114,230,173,.08); color: #9af1c5; font-size: 11px; font-weight: 800; }

.capture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; gap: 14px; }
.case-capture { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--case-line); border-radius: 18px; background: rgba(7,6,13,.72); box-shadow: 0 18px 45px rgba(0,0,0,.24); }
.case-capture--large { grid-column: 1 / -1; }
.case-capture img { display: block; width: 100%; height: 310px; object-fit: cover; object-position: top left; background: #f8f5f0; transition: transform .35s ease; }
.case-capture--large img { height: auto; max-height: 610px; object-fit: contain; }
.case-capture--stats img { object-position: top center; }
.case-capture--mobile { background: radial-gradient(circle at 50% 45%, rgba(181,108,255,.16), transparent 43%), rgba(7,6,13,.72); }
.case-capture--mobile img { width: auto; max-width: 100%; height: 430px; margin: 24px auto 0; object-fit: contain; border: 7px solid #17141f; border-bottom: 0; border-radius: 24px 24px 0 0; }
.case-capture:hover img { transform: scale(1.012); }
.case-capture figcaption { padding: 14px 17px; border-top: 1px solid var(--case-line); color: #fff; font-size: 13px; font-weight: 700; }

.ux-block { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr) 210px; margin-top: 42px; padding: 30px; gap: 28px; align-items: center; border: 1px solid rgba(181,108,255,.23); border-radius: 20px; background: linear-gradient(120deg, rgba(123,92,255,.12), rgba(255,255,255,.025)); }
.ux-block h3 { margin: 0; font-size: 28px; }
.ux-block p:last-child { margin: 13px 0 0; color: var(--case-muted); line-height: 1.65; }
.ux-block ul { padding: 0; margin: 0; list-style: none; }
.ux-block li { position: relative; padding: 8px 0 8px 20px; color: rgba(255,255,255,.82); font-size: 13px; }
.ux-block li::before { content: "✓"; position: absolute; left: 0; color: var(--case-green); font-weight: 900; }
.ux-device { display: flex; min-height: 190px; padding: 22px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(181,108,255,.32); border-radius: 22px; background: rgba(5,4,10,.58); color: #fff; text-align: center; }
.ux-device i { margin-bottom: 8px; color: #cda0ff; font-size: 35px; }
.ux-device strong { font-size: 14px; }
.ux-device span { color: var(--case-muted); font-size: 11px; line-height: 1.45; }

.public-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 38px; align-items: center; }
.public-shot { margin: 0; overflow: hidden; border: 1px solid var(--case-line); border-radius: 18px; background: #0b0912; }
.public-shot img { display: block; width: 100%; min-height: 320px; object-fit: cover; object-position: top; }
.public-shot figcaption { padding: 12px 16px; color: var(--case-muted); font-size: 12px; }

.engineering-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 38px; gap: 1px; overflow: hidden; border: 1px solid var(--case-line); border-radius: 18px; background: var(--case-line); }
.engineering-grid article { padding: 25px; background: #12101e; }
.engineering-grid strong { color: #fff; font-size: 16px; }
.engineering-grid p { margin: 9px 0 0; color: var(--case-muted); font-size: 13px; line-height: 1.6; }

.result-section { display: grid; grid-template-columns: 1.2fr .8fr; padding: 0; overflow: hidden; }
.result-main, .learning-block { padding: clamp(30px, 5vw, 58px); }
.result-main { background: radial-gradient(circle at 0 100%, rgba(123,92,255,.18), transparent 45%); }
.result-main .section-number { margin-bottom: 35px; }
.learning-block { border-left: 1px solid var(--case-line); background: rgba(255,255,255,.025); }
.learning-block ol { padding: 0; margin: 22px 0 0; list-style: none; }
.learning-block li { display: flex; padding: 16px 0; gap: 14px; align-items: baseline; border-top: 1px solid var(--case-line); color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.5; }
.learning-block li span { color: var(--case-purple); font-size: 11px; font-weight: 900; }

@media (max-width: 920px) {
  .case-hero { grid-template-columns: 1fr; min-height: auto; }
  .case-hero__meta { display: grid; grid-template-columns: 130px 1fr; gap: 22px; align-items: center; }
  .case-hero__meta img { width: 120px; height: 120px; margin: 0; }
  .challenge { grid-template-columns: auto 1fr; }
  .challenge-result { grid-column: 2; padding: 20px 0 0; border-top: 1px solid var(--case-line); border-left: 0; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .feature-card--wide { grid-column: span 1; }
  .ux-block { grid-template-columns: 1fr 1fr; }
  .ux-device { grid-column: 1 / -1; width: min(260px,100%); margin: 0 auto; }
  .public-section, .result-section { grid-template-columns: 1fr; }
  .learning-block { border-top: 1px solid var(--case-line); border-left: 0; }
}

@media (max-width: 640px) {
  .mercedes-case { padding: 92px 11px 75px; background-attachment: scroll; }
  .case-hero, .case-section { padding: 26px 20px; border-radius: 20px; }
  .case-hero h1 { font-size: clamp(40px, 13vw, 58px); }
  .case-hero__meta { display: block; }
  .case-hero__meta img { margin: 0 auto 22px; }
  .case-actions, .case-button { width: 100%; }
  .section-heading { gap: 13px; }
  .challenge { grid-template-columns: 1fr; gap: 14px; }
  .challenge-result { grid-column: 1; }
  .feature-grid, .capture-grid, .engineering-grid, .ux-block { grid-template-columns: 1fr; }
  .feature-card--wide, .feature-card--full, .case-capture--large { grid-column: auto; }
  .case-capture img, .case-capture--large img { height: auto; max-height: none; object-fit: contain; }
  .case-capture--mobile img { height: 410px; max-height: 70vh; }
  .ux-block { padding: 23px; }
  .ux-device { grid-column: auto; }
  .public-shot img { min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-button { transition: none; }
  .case-button:hover { transform: none; }
}