.case-page { background:#fff; }
.case-page .site-header { background:rgba(255,255,255,.94); }
.case-hero { overflow:hidden; padding:76px 0 64px; background:radial-gradient(circle at 85% 15%,#dcecff 0,transparent 29%),linear-gradient(180deg,#fff,#f6f9fd); }
.case-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); align-items:center; gap:60px; }
.case-hero-grid > * { min-width:0; }
.case-label { display:inline-flex; align-items:center; gap:8px; border:1px solid #bfd8f2; border-radius:999px; padding:7px 10px; color:#0868d7; background:#edf5ff; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.case-label:before { content:""; width:7px; height:7px; border-radius:50%; background:#0868d7; }
.case-hero h1 { max-width:760px; margin:17px 0 18px; font-size:clamp(42px,5vw,66px); line-height:1.02; letter-spacing:-.055em; }
.case-hero-lead { max-width:690px; margin:0; color:#5c6b84; font-size:17px; line-height:1.65; }
.case-actions { display:flex; flex-wrap:wrap; align-items:center; gap:15px; margin-top:28px; }
.case-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.case-meta span { border:1px solid #d9e4f2; border-radius:999px; padding:7px 10px; color:#40516b; background:#fff; font-size:10px; font-weight:700; }
.case-visual { min-width:0; position:relative; border:1px solid #c8d9ed; border-radius:23px; padding:11px; background:#fff; box-shadow:0 30px 85px rgba(15,63,125,.16); transform:rotate(1.2deg); }
.case-visual picture { display:block; min-width:0; }
.case-visual img { width:100%; height:auto; aspect-ratio:3/2; border-radius:15px; object-fit:cover; object-position:center; }
.case-visual img[src*="mockup-ofisera-products"] { object-position:center 52%; }
.case-visual img[src*="storefront-ofisera-hero"] { object-position:60% center; }
.case-visual img[src*="storefront-glowina-hero"] { object-position:48% center; }
.case-visual img[src*="service-migration"] { object-position:center 54%; }
.case-visual-note { position:absolute; right:22px; bottom:22px; max-width:230px; border-radius:12px; padding:12px 14px; color:#fff; background:#07152e; font-size:10px; box-shadow:0 12px 30px rgba(0,0,0,.22); }
.case-section { padding:78px 0; }
.case-section.soft { background:#f5f8fd; }
.case-section-head { max-width:760px; margin-bottom:34px; }
.case-section-head h2 { margin:10px 0 12px; font-size:clamp(29px,3.6vw,43px); line-height:1.12; letter-spacing:-.035em; }
.case-section-head p { margin:0; color:#5c6b84; }
.case-kicker { color:#0868d7; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.context-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.context-card { border:1px solid #d9e4f2; border-radius:17px; padding:25px; background:#fff; }
.context-card b { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#0868d7; background:#edf5ff; font-size:13px; }
.context-card h3 { margin:15px 0 8px; font-size:18px; }
.context-card p { margin:0; color:#5c6b84; font-size:13px; }
.decision-layout { display:grid; grid-template-columns:.83fr 1.17fr; gap:46px; align-items:start; }
.decision-sticky { position:sticky; top:110px; }
.decision-sticky h2 { margin:9px 0 12px; font-size:clamp(29px,3.7vw,43px); line-height:1.12; }
.decision-sticky p { color:#5c6b84; }
.decision-list { counter-reset:decision; display:grid; gap:12px; }
.decision { counter-increment:decision; display:grid; grid-template-columns:45px 1fr; gap:15px; border:1px solid #d9e4f2; border-radius:16px; padding:19px; background:#fff; }
.decision:before { content:counter(decision,decimal-leading-zero); width:43px; height:43px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,#0868d7,#284bd8); font-size:11px; font-weight:700; }
.decision h3 { margin:1px 0 6px; font-size:16px; }
.decision p { margin:0; color:#5c6b84; font-size:12px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.feature-card { min-height:190px; border:1px solid #d9e4f2; border-radius:16px; padding:22px; background:#fff; }
.feature-card span { color:#0868d7; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.feature-card h3 { margin:12px 0 8px; font-size:17px; }
.feature-card p { margin:0; color:#5c6b84; font-size:12px; }
.works-visual { transform:none; }
.works-visual-grid { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:1fr 1fr; gap:8px; overflow:hidden; aspect-ratio:3/2; border-radius:15px; background:#edf3fb; }
.works-visual-grid picture { min-width:0; min-height:0; overflow:hidden; }
.works-visual-grid .works-visual-primary { grid-row:1/-1; }
.works-visual-grid img { width:100%; height:100%; aspect-ratio:auto; border-radius:0; object-fit:cover; }
.works-visual-grid .works-visual-primary img { object-position:59% center; }
.works-visual-grid picture:nth-child(2) img { object-position:48% center; }
.works-visual-grid picture:nth-child(3) img { object-position:center; }
.works-visual-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr; }
.works-visual-grid-two .works-visual-primary { grid-row:auto; }
.project-card { min-height:0; padding:0; overflow:hidden; border-radius:20px; box-shadow:0 14px 38px rgba(18,55,104,.065); transition:border-color .28s ease,box-shadow .28s ease,transform .28s cubic-bezier(.22,1,.36,1); }
.project-card-media { position:relative; display:block; overflow:hidden; aspect-ratio:16/10; background:#edf3fb; }
.project-card-media picture { display:block; width:100%; height:100%; }
.project-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.project-card:nth-child(1) .project-card-media img { object-position:59% center; }
.project-grid.project-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.project-card:nth-child(2) .project-card-media img { object-position:48% center; }
.project-card-media > span { position:absolute; left:13px; bottom:13px; border:1px solid rgba(255,255,255,.7); border-radius:999px; padding:7px 10px; color:#07152e; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); font-size:10px; font-weight:700; letter-spacing:.02em; box-shadow:0 8px 22px rgba(7,21,46,.12); }
.project-card-copy { padding:22px; }
.project-card-copy > span { color:#0868d7; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.project-card-links { display:grid; gap:5px; margin-top:18px; }
.project-card-links a { min-height:36px; display:flex; align-items:center; width:max-content; max-width:100%; color:#40516b; font-size:12px; font-weight:600; }
.project-card-links .text-link { color:#07152e; font-weight:700; }
@media(hover:hover) and (pointer:fine){.project-card:hover{border-color:#bad3ed;transform:translateY(-4px);box-shadow:0 24px 58px rgba(18,65,133,.13)}.project-card:hover .project-card-media img{transform:scale(1.025)}}
.screen-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:18px; align-items:start; }
.screen-grid > figure { min-width:0; margin:0; }
.screen-grid > figure:not(.screen-frame) { width:100%; max-width:430px; justify-self:center; }
.screen-frame { min-width:0; max-width:100%; overflow:hidden; border:8px solid #07152e; border-radius:25px; background:#07152e; box-shadow:0 25px 55px rgba(7,21,46,.16); }
.screen-frame picture { display:block; width:100%; }
.screen-frame img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center; }
.screen-frame iframe { width:100%; min-width:0; height:680px; display:block; border:0; background:#fff; }
.screen-frame.wide img { aspect-ratio:3/2; object-position:center; }
.screen-frame.wide img[src*="mockup-ofisera-products"],.screen-frame.wide img[src*="mockup-glowina-products"] { aspect-ratio:4/3; object-position:center; }
.screen-frame.wide img[src*="service-integrations"] { object-position:center 52%; }
.screen-frame.wide { border-radius:20px; }
.screen-caption { margin:11px 0 0; color:#5c6b84; font-size:11px; text-align:center; }
.screen-open-link { min-height:44px; display:inline-flex; align-items:center; justify-content:center; margin:4px auto 0; color:#0868d7; font-size:14px; font-weight:600; text-align:center; text-decoration:underline; text-underline-offset:3px; }
.ops-table { width:100%; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; border:1px solid #d9e4f2; border-radius:16px; background:#fff; }
.ops-table table { width:100%; min-width:720px; border-collapse:collapse; }
.ops-table th,.ops-table td { padding:14px 16px; border-bottom:1px solid #d9e4f2; text-align:left; vertical-align:top; font-size:12px; }
.ops-table th { color:#40516b; background:#f5f8fd; font-size:10px; letter-spacing:.07em; text-transform:uppercase; }
.ops-table tr:last-child td { border-bottom:0; }
.test-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0; list-style:none; }
.test-list li { min-height:70px; position:relative; border:1px solid #d9e4f2; border-radius:14px; padding:16px 16px 16px 49px; background:#fff; color:#40516b; font-size:12px; }
.test-list li:before { content:"✓"; width:24px; height:24px; position:absolute; top:15px; left:15px; display:grid; place-items:center; border-radius:50%; color:#14724e; background:#e7f7f0; font-weight:700; }
.case-disclaimer { display:grid; grid-template-columns:auto 1fr; gap:17px; align-items:start; border:1px solid #b9d5ef; border-radius:17px; padding:22px; color:#294462; background:#edf5ff; }
.case-disclaimer b:first-child { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#0868d7; background:#fff; }
.case-disclaimer h2 { margin:0 0 5px; font-size:17px; }
.case-disclaimer p { margin:0; font-size:12px; }
.next-projects { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; margin-top:25px; }
.next-card { border:1px solid #d9e4f2; border-radius:16px; padding:20px; background:#fff; text-decoration:none; }
.next-card small { color:#0868d7; font-weight:700; }
.next-card strong { display:block; margin-top:5px; }
.case-cta { border-radius:22px; padding:clamp(30px,5vw,55px); color:#fff; background:linear-gradient(135deg,#0d2e5b,#123e75); }
.case-cta h2 { max-width:680px; margin:0 0 12px; color:#fff; font-size:clamp(30px,4vw,45px); }
.case-cta p { max-width:680px; color:#c9d7e9; }
.case-cta .button { margin-top:10px; }
@media(max-width:900px){.case-hero-grid,.decision-layout{grid-template-columns:1fr}.case-visual{width:min(680px,100%);transform:none}.decision-sticky{position:static}.context-grid,.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.screen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.screen-frame.wide{grid-column:1/-1}.screen-frame.wide img{aspect-ratio:3/2}}
@media(max-width:680px){.case-hero{padding:49px 0}.case-hero-grid{gap:32px}.case-hero h1{font-size:clamp(33px,9.5vw,38px)}.case-hero-lead{font-size:15px}.case-actions{align-items:stretch;flex-direction:column}.case-actions .button,.case-actions .text-link{width:100%;justify-content:center;text-align:center;white-space:normal}.case-visual img{aspect-ratio:1/1}.works-visual-grid{aspect-ratio:1/1;gap:6px}.works-visual-grid img{aspect-ratio:auto}.case-section{padding:50px 0}.context-grid,.feature-grid,.test-list,.next-projects,.screen-grid{grid-template-columns:1fr}.project-card-media{aspect-ratio:4/3}.project-card-copy{padding:20px}.screen-grid{gap:32px}.screen-grid>.screen-frame.wide{grid-column:auto}.screen-frame.wide img,.screen-frame.wide img[src*="mockup-ofisera-products"],.screen-frame.wide img[src*="mockup-glowina-products"]{aspect-ratio:1/1}.screen-frame iframe{height:min(640px,75vh)}.screen-caption{font-size:12px}.screen-open-link{display:flex}.case-disclaimer{grid-template-columns:1fr}.case-visual-note{right:16px;bottom:16px}.case-cta .button{width:100%;padding-inline:16px;text-align:center;white-space:normal}}
@media(max-width:680px){.project-grid.project-grid-two{grid-template-columns:1fr}}