.case-detail-page {
    --case-bg: #020712;
    --case-panel: #0a0f1e;
    --case-violet: #8d55ff;
    width: 100vw;
    max-width: none;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    flex: 0 0 100vw;
    overflow: hidden;
    color: #fff;
    background: var(--case-bg);
}
.case-detail-page *, .case-detail-page *::before, .case-detail-page *::after { box-sizing: border-box; }
.content:has(.case-detail-page), body:has(.case-detail-page) { background: var(--case-bg, #020712); }
.content:has(.case-detail-page) > .container { width: 100%; max-width: none; padding-right: 0; padding-left: 0; }
.content:has(.case-detail-page) > .container > .row { margin-right: 0; margin-left: 0; }
.case-detail-hero {
    position: relative;
    isolation: isolate;
    min-height: min(850px, 88vh);
    padding: clamp(48px, 7vw, 92px) 0 clamp(85px, 10vw, 140px);
    background:
        radial-gradient(circle at 82% 16%, rgba(103,8,199,.48), transparent 31%),
        radial-gradient(circle at 12% 90%, rgba(216,66,101,.23), transparent 30%),
        linear-gradient(180deg, #070c1a, #020712);
}
.case-detail-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 95%);
}
.case-detail-back {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(48px, 7vw, 90px);
    color: rgba(255,255,255,.62); font-size: 14px; font-weight: 600;
}
.case-detail-back:hover { color: #fff; text-decoration: none; }
.case-detail-hero__grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(420px,1.15fr); gap: clamp(45px, 7vw, 105px); align-items: center; }
.case-detail-eyebrow { margin-bottom: 17px; color: #bca6ff; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.case-detail-hero h1 { margin: 0; color: #fff; font-size: clamp(43px, 5.7vw, 76px); font-weight: 650; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.case-detail-lead { max-width: 690px; margin-top: 27px; color: rgba(255,255,255,.68); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; }
.case-detail-labels { display: flex; max-width: 650px; flex-wrap: wrap; gap: 7px; margin-top: 25px; }
.case-detail-labels .case-label { max-width: 100%; min-height: 28px; padding: 5px 9px; color: rgba(255,255,255,.74); background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); border-radius: 6px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.case-detail-labels .case-label img.case-label__icon { opacity: .7; }
.case-detail-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 35px; }
.case-detail-button { display: inline-flex; align-items: center; gap: 18px; min-height: 51px; padding: 12px 19px; border-radius: 11px; background: linear-gradient(110deg,#6417e9,#a329b9); color: #fff; font-weight: 700; box-shadow: 0 15px 35px rgba(94,19,239,.25); }
.case-detail-button:hover { color: #fff; text-decoration: none; transform: translateY(-2px); }
.case-detail-button--ghost { border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.055); box-shadow: none; }
.case-detail-hero__visual {
    position: relative;
    transform: translateY(clamp(-100px, -7vw, -62px));
}
.case-detail-hero__visual::before { content: ""; position: absolute; inset: 8% -8% -10% 14%; border-radius: 50%; background: rgba(103,8,199,.25); filter: blur(65px); }
.case-detail-hero__frame { position: relative; overflow: hidden; padding-top: 35px; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: #101625; box-shadow: 0 40px 100px rgba(0,0,0,.52); transform: perspective(1300px) rotateY(-4deg) rotateX(1.5deg); }
.case-detail-hero__browser { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 6px; height: 35px; padding: 0 13px; background: rgba(255,255,255,.075); border-bottom: 1px solid rgba(255,255,255,.08); }
.case-detail-hero__browser i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); }
.case-detail-hero__frame img { display: block; width: 100%; max-height: 610px; object-fit: contain; object-position: top center; background: #0b1020; }
.case-detail-content { position: relative; padding: clamp(85px, 11vw, 150px) 0; background: radial-gradient(circle at 90% 15%, rgba(103,8,199,.16), transparent 30%), #020712; }
.case-detail-content__layout { display: grid; grid-template-columns: minmax(230px,.35fr) minmax(0,.65fr); gap: clamp(50px, 9vw, 140px); align-items: start; }
.case-detail-content__aside { position: sticky; top: calc(var(--main-header-height, 90px) + 30px); }
.case-detail-content__aside h2 { margin: 0; font-size: clamp(30px, 3.3vw, 45px); line-height: 1.12; letter-spacing: -.035em; }
.case-detail-content__aside > a { display: inline-flex; gap: 10px; margin-top: 28px; color: #c7b6ff; font-weight: 700; }
.case-detail-rich { min-width: 0; color: rgba(255,255,255,.75); font-size: 18px; line-height: 1.78; }
.case-detail-rich > :first-child { margin-top: 0; }
.case-detail-rich h2, .case-detail-rich h3, .case-detail-rich h4 { margin: 1.65em 0 .65em; color: #fff; line-height: 1.2; letter-spacing: -.025em; }
.case-detail-rich h2 { font-size: clamp(30px, 3vw, 42px); }
.case-detail-rich h3 { font-size: clamp(23px, 2.3vw, 31px); }
.case-detail-rich p { margin: 0 0 1.35em; }
.case-detail-rich ul, .case-detail-rich ol { margin: 0 0 1.5em; padding-left: 1.3em; }
.case-detail-rich li { margin-bottom: .55em; }
.case-detail-rich a { color: #c7b6ff; text-decoration: underline; text-underline-offset: 4px; }
.case-detail-rich img { display: block; max-width: 100%; height: auto; margin: 38px 0; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 28px 75px rgba(0,0,0,.4); }
.case-detail-rich blockquote { margin: 38px 0; padding: 26px 30px; border-left: 3px solid #9a55ff; border-radius: 0 13px 13px 0; background: rgba(255,255,255,.055); color: #fff; }
.case-detail-next { padding: 0 0 clamp(80px, 10vw, 135px); background: #020712; }
@media (max-width: 991.98px) {
    .case-detail-hero { min-height: 0; }
    .case-detail-hero__grid { grid-template-columns: 1fr; }
    .case-detail-hero__visual { max-width: 800px; transform: none; }
    .case-detail-hero__frame { transform: none; }
    .case-detail-content__layout { grid-template-columns: 1fr; gap: 45px; }
    .case-detail-content__aside { position: static; }
}
@media (max-width: 767.98px) {
    .case-detail-hero { padding: 34px 0 80px; }
    .case-detail-back { margin-bottom: 45px; }
    .case-detail-hero h1 { font-size: clamp(39px,11vw,53px); }
    .case-detail-hero__grid { gap: 48px; }
    .case-detail-hero__frame { border-radius: 12px; }
    .case-detail-labels { margin-top: 22px; }
    .case-detail-labels .case-label { max-width: 100%; }
    .case-detail-content { padding: 75px 0; }
    .case-detail-rich { font-size: 16px; line-height: 1.72; }
}
@media (prefers-reduced-motion: reduce) {
    .case-detail-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}