:root {
  --void:#08090a;
  --obsidian:#0d0f10;
  --carbon:#111213;
  --graphite:#17191b;
  --line:#2a2d30;
  --smoke:#3a3e42;
  --fog:#8b9098;
  --mist:#c7cbd0;
  --paper:#f5f5f2;
  --lime:#e4f222;
  --lime-hover:#f0ff25;
  --bone:#e5e5e6;
  --sans:"Inter",Arial,sans-serif;
  --mono:"JetBrains Mono",Consolas,monospace;
  --container:1200px;
  --header:72px;
  --motion-fast:180ms;
  --motion-base:620ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--void); }
body { margin:0; background:var(--void); color:var(--paper); font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
body::selection { background:var(--lime); color:var(--void); }
img { max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.container { width:min(calc(100% - 56px),var(--container)); margin-inline:auto; }
.skip-link { position:fixed; z-index:400; top:12px; left:12px; padding:10px 14px; border-radius:4px; background:var(--paper); color:var(--void); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }

.case-hero { min-height:100svh; display:flex; align-items:center; padding:calc(var(--header) + 64px) 0 72px; border-bottom:1px solid var(--line); }
.breadcrumbs { display:flex; align-items:center; gap:10px; margin-bottom:52px; color:var(--fog); font:10px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.breadcrumbs a { transition:color var(--motion-fast) ease; }
.breadcrumbs a:hover,.breadcrumbs a:focus-visible { color:var(--paper); }
.breadcrumbs span[aria-hidden] { color:var(--smoke); }
.case-hero__grid { display:grid; grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr); align-items:center; gap:72px; }
.case-kicker { margin:0; color:var(--lime); font:500 10px/1.4 var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.case-hero h1 { margin:48px 0 0; font-size:clamp(90px,10vw,156px); font-weight:500; line-height:.82; letter-spacing:-.08em; }
.case-yo { position:relative; display:inline-block; }
.case-yo::before,.case-yo::after { content:""; position:absolute; top:-.075em; width:.062em; height:.062em; border-radius:50%; background:currentColor; }
.case-yo::before { left:.19em; }
.case-yo::after { left:.38em; }
.case-hero__subtitle { margin:28px 0 0; color:var(--paper); font-size:clamp(28px,3vw,44px); font-weight:400; line-height:1; letter-spacing:-.055em; }
.case-hero__lead { max-width:610px; margin:32px 0 0; color:var(--fog); font-size:17px; line-height:1.65; }
.case-tags { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 0; padding:0; list-style:none; }
.case-tags li { min-height:32px; display:inline-flex; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:4px; color:var(--mist); font:10px/1.2 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.case-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; margin-top:38px; }
.case-text-link { min-height:48px; display:inline-flex; align-items:center; gap:16px; color:var(--paper); font-size:13px; font-weight:500; }
.case-text-link span { color:var(--lime); transition:transform var(--motion-fast) var(--ease-out); }
.case-text-link:hover span,.case-text-link:focus-visible span { transform:translate(2px,-2px); }

.case-frame { min-width:0; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--carbon); box-shadow:0 30px 90px rgba(0,0,0,.24); transition:border-color var(--motion-fast) ease,transform 320ms var(--ease-out); }
.case-frame:hover { border-color:var(--smoke); transform:translateY(-3px); }
.case-frame figcaption { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 16px; border-bottom:1px solid var(--line); color:var(--fog); font:9px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.case-frame img { width:100%; height:auto; display:block; background:#24080d; transition:transform 900ms cubic-bezier(.16,1,.3,1); }
.case-frame:hover img { transform:scale(1.012); }
.case-frame--hero { transform:rotate(.35deg); transition:border-color 420ms ease,transform 760ms cubic-bezier(.16,1,.3,1),box-shadow 760ms cubic-bezier(.16,1,.3,1); }
.case-frame--hero:hover { transform:rotate(0) translateY(-1px); box-shadow:0 34px 96px rgba(0,0,0,.28); }
.case-frame--hero:hover img { transform:scale(1.006); }

.case-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:70px 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.case-facts div { min-width:0; padding:24px 22px; border-right:1px solid var(--line); }
.case-facts div:first-child { padding-left:0; }
.case-facts div:last-child { border-right:0; }
.case-facts dt { color:var(--fog); font:9px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.case-facts dd { margin:11px 0 0; color:var(--mist); font-size:13px; line-height:1.45; }

.case-index { position:relative; z-index:1; border-bottom:1px solid var(--line); background:var(--void); }
.case-index .container { min-height:58px; display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; }
.case-index .container::-webkit-scrollbar { display:none; }
.case-index a { min-height:38px; display:inline-flex; align-items:center; padding:0 12px; color:var(--fog); white-space:nowrap; font:10px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; transition:color var(--motion-fast) ease; }
.case-index a:hover,.case-index a:focus-visible { color:var(--paper); }
.case-index a.is-active { color:var(--paper); }
.case-index a.is-active::before { content:""; width:5px; height:5px; margin-right:8px; border-radius:50%; background:var(--lime); }

.case-section { scroll-margin-top:calc(var(--header) + 24px); padding:116px 0; border-bottom:1px solid var(--line); }
.case-section--surface { background:var(--obsidian); }
.case-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.5fr); gap:80px; align-items:end; margin-bottom:70px; }
.case-heading .case-kicker { grid-column:1/-1; margin-bottom:-48px; }
.case-heading h2 { max-width:820px; margin:0; font-size:clamp(46px,5.7vw,78px); font-weight:400; line-height:.96; letter-spacing:-.065em; text-wrap:balance; }
.case-heading > p:last-child { max-width:440px; margin:0; color:var(--fog); font-size:16px; line-height:1.65; }

.scope-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.scope-grid article { min-height:210px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--carbon); }
.scope-grid article:nth-child(3n) { border-right:0; }
.scope-grid article:nth-last-child(-n+3) { border-bottom:0; }
.scope-grid span,.management-grid span { color:var(--fog); font:9px/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.scope-grid h3,.management-grid h3 { margin:54px 0 0; font-size:24px; font-weight:400; line-height:1.1; letter-spacing:-.035em; }
.scope-grid p,.management-grid p { max-width:310px; margin:14px 0 0; color:var(--fog); font-size:14px; }
.case-note { display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; align-items:start; margin-top:30px; padding:28px; border-left:2px solid var(--lime); background:var(--carbon); }
.case-note span { color:var(--lime); font:9px/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.case-note p { max-width:840px; margin:0; color:var(--mist); font-size:16px; }

.visual-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; align-items:center; isolation:isolate; }
.case-frame--wide { z-index:1; grid-column:1/10; grid-row:1; align-self:center; }
.phone-pair { z-index:2; grid-column:9/-1; grid-row:1; align-self:center; aspect-ratio:4/5; min-height:0; display:flex; align-items:center; justify-content:center; gap:16px; padding:24px; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:radial-gradient(circle at 50% 45%,rgba(228,242,34,.07),transparent 48%),var(--carbon); box-shadow:-24px 30px 70px rgba(0,0,0,.28); }
.phone-frame { width:min(43%,152px); margin:0; overflow:hidden; border:1px solid var(--smoke); border-radius:22px; background:#25080d; box-shadow:0 20px 44px rgba(0,0,0,.42); }
.phone-frame:first-child { transform:translateY(-16px); }
.phone-frame:last-child { transform:translateY(16px); }
.phone-frame img { width:100%; height:auto; display:block; }
.feature-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.feature-row article { min-height:180px; padding:28px; border-right:1px solid var(--line); background:var(--carbon); }
.feature-row article:last-child { border-right:0; }
.feature-row h3 { margin:0; font-size:20px; font-weight:400; letter-spacing:-.025em; }
.feature-row p { max-width:330px; margin:46px 0 0; color:var(--fog); font-size:14px; }

.journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 52px; padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); list-style:none; }
.journey li { min-height:170px; padding:24px; border-right:1px solid var(--line); }
.journey li:first-child { padding-left:0; }
.journey li:last-child { border-right:0; }
.journey span { display:block; color:var(--lime); font:10px/1.2 var(--mono); }
.journey strong { display:block; margin-top:48px; font-size:21px; font-weight:400; }
.journey p { margin:8px 0 0; color:var(--fog); font-size:13px; }
.screen-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.case-frame--span { grid-column:1/-1; width:min(100%,900px); justify-self:center; margin-top:10px; }
.screen-grid--equal .case-frame--span { width:auto; }

.management-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; padding:1px; border-radius:10px; overflow:hidden; background:var(--line); }
.management-grid article { min-height:220px; padding:28px; background:var(--carbon); }
.management-grid h3 { margin-top:50px; }
.solution-list { border-top:1px solid var(--line); }
.solution-list article { display:grid; grid-template-columns:minmax(260px,.65fr) minmax(0,1fr); gap:70px; padding:34px 0; border-bottom:1px solid var(--line); }
.solution-list h3 { margin:0; font-size:20px; font-weight:400; letter-spacing:-.025em; }
.solution-list p { max-width:680px; margin:0; color:var(--fog); }

.process-grid { counter-reset:process; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:0; padding:1px; border-radius:10px; overflow:hidden; background:var(--line); list-style:none; }
.process-grid li { counter-increment:process; min-height:220px; padding:26px; background:var(--carbon); }
.process-grid li::before { content:counter(process,decimal-leading-zero); display:block; color:var(--lime); font:10px/1.2 var(--mono); }
.process-grid span { display:block; margin-top:62px; font-size:19px; }
.process-grid p { margin:12px 0 0; color:var(--fog); font-size:13px; }
.result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.result-grid article { min-height:210px; padding:28px; border:1px solid var(--line); border-radius:8px; background:var(--carbon); }
.result-grid h3 { margin:0; font-size:21px; font-weight:400; line-height:1.15; letter-spacing:-.03em; }
.result-grid p { margin:52px 0 0; color:var(--fog); font-size:14px; }

.case-cta { padding:132px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:radial-gradient(circle at 82% 28%,rgba(228,242,34,.045),transparent 34%),var(--obsidian); color:var(--paper); }
.case-cta .case-kicker { color:var(--lime); }
.case-cta h2 { max-width:940px; margin:32px 0 0; font-size:clamp(52px,6.2vw,86px); font-weight:400; line-height:.94; letter-spacing:-.065em; text-wrap:balance; }
.case-cta > .container > p:not(.case-kicker) { max-width:670px; margin:38px 0 0; color:var(--fog); font-size:17px; }
.case-cta .button--primary { background:var(--lime); border-color:var(--lime); color:var(--void); }
.case-cta .button--primary:hover,.case-cta .button--primary:focus-visible { background:var(--lime-hover); border-color:var(--lime-hover); }
.case-cta .case-text-link { color:var(--paper); }
.case-cta .case-text-link span { color:var(--lime); }

.motion-ready .case-hero__content { animation:case-copy-in 700ms 80ms var(--ease-out) both; }
.motion-ready .case-frame--hero { animation:case-frame-in 780ms 150ms var(--ease-out) both; }
.motion-ready .case-facts { animation:case-up-in 620ms 260ms var(--ease-out) both; }
.motion-ready .reveal,.motion-ready .reveal-stagger > * { opacity:0; translate:0 26px; transition:opacity var(--motion-base) ease,translate var(--motion-base) var(--ease-out); }
.motion-ready .reveal.is-visible,.motion-ready .reveal-stagger.is-visible > * { opacity:1; translate:0 0; }
.motion-ready .reveal-stagger > *:nth-child(2) { transition-delay:60ms; }
.motion-ready .reveal-stagger > *:nth-child(3) { transition-delay:120ms; }
.motion-ready .reveal-stagger > *:nth-child(4) { transition-delay:180ms; }
.motion-ready .reveal-stagger > *:nth-child(5) { transition-delay:240ms; }
.motion-ready .reveal-stagger > *:nth-child(6) { transition-delay:300ms; }
.motion-ready .reveal-stagger > *:nth-child(7) { transition-delay:360ms; }
.motion-ready .reveal-stagger > *:nth-child(8) { transition-delay:420ms; }
@keyframes case-copy-in { from { opacity:0; transform:translateY(28px); } }
@keyframes case-frame-in { from { opacity:0; transform:translateX(32px) rotate(2deg); } }
@keyframes case-up-in { from { opacity:0; transform:translateY(20px); } }

@media (max-width:1050px) {
  .container { width:min(calc(100% - 40px),var(--container)); }
  .case-hero { min-height:auto; }
  .case-hero__grid { grid-template-columns:1fr; gap:54px; }
  .case-hero__content { max-width:760px; }
  .case-frame--hero { transform:none; }
  .motion-ready .case-frame--hero { animation-name:case-up-in; }
  .case-heading { grid-template-columns:1fr; gap:28px; }
  .case-heading .case-kicker { grid-column:1; margin-bottom:0; }
  .case-heading > p:last-child { max-width:680px; }
  .visual-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .case-frame--wide { grid-column:1/10; }
  .phone-pair { grid-column:9/-1; }
  .management-grid,.result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:860px) {
  .visual-grid { grid-template-columns:1fr; gap:18px; }
  .case-frame--wide { grid-column:1; grid-row:auto; }
  .phone-pair { grid-column:1; grid-row:auto; width:min(100%,620px); aspect-ratio:16/9; justify-self:center; box-shadow:0 24px 60px rgba(0,0,0,.24); }
  .phone-frame { width:min(29%,160px); }
}

@media (max-width:720px) {
  :root { --header:64px; }
  .container { width:calc(100% - 32px); }
  .case-hero { padding:calc(var(--header) + 46px) 0 48px; }
  .breadcrumbs { margin-bottom:38px; }
  .case-hero h1 { font-size:clamp(72px,25vw,110px); }
  .case-hero__subtitle { margin-top:24px; }
  .case-hero__lead { margin-top:26px; font-size:15px; }
  .case-actions { align-items:stretch; flex-direction:column; }
  .case-actions .button,.case-text-link { width:100%; }
  .case-facts { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:50px; }
  .case-facts div { padding:20px 16px; border-bottom:1px solid var(--line); }
  .case-facts div:nth-child(2) { border-right:0; }
  .case-facts div:nth-last-child(-n+2) { border-bottom:0; }
  .case-facts div:first-child { padding-left:16px; }
  .case-index .container { width:100%; padding:0 10px; }
  .case-section { padding:74px 0; }
  .case-heading { margin-bottom:44px; }
  .case-heading h2 { font-size:clamp(40px,11vw,54px); line-height:.98; }
  .scope-grid { grid-template-columns:1fr; }
  .scope-grid article,.scope-grid article:nth-child(3n),.scope-grid article:nth-last-child(-n+3) { min-height:0; padding:28px 26px 30px; border-right:0; border-bottom:1px solid var(--line); }
  .scope-grid article:last-child { border-bottom:0; }
  .scope-grid h3 { margin-top:30px; }
  .case-note { grid-template-columns:1fr; gap:16px; padding:24px 20px; }
  .phone-pair { width:100%; aspect-ratio:1/1.04; padding:20px 14px; }
  .phone-frame { width:min(40%,154px); border-radius:18px; }
  .phone-frame:first-child { transform:translateY(-10px); }
  .phone-frame:last-child { transform:translateY(10px); }
  .feature-row { grid-template-columns:1fr; }
  .feature-row article { min-height:150px; border-right:0; border-bottom:1px solid var(--line); }
  .feature-row article:last-child { border-bottom:0; }
  .feature-row p { margin-top:28px; }
  .journey { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .journey li,.journey li:first-child { min-height:150px; padding:20px; border-bottom:1px solid var(--line); }
  .journey li:nth-child(2) { border-right:0; }
  .journey li:nth-last-child(-n+2) { border-bottom:0; }
  .journey strong { margin-top:34px; }
  .screen-grid,.management-grid,.result-grid { grid-template-columns:1fr; }
  .case-frame--span { grid-column:1; margin-top:0; }
  .management-grid article { min-height:0; padding:28px 26px 30px; }
  .management-grid h3 { margin-top:30px; }
  .solution-list article { grid-template-columns:1fr; gap:18px; padding:28px 0; }
  .process-grid { grid-template-columns:1fr; }
  .process-grid li { min-height:180px; }
  .process-grid span { margin-top:46px; }
  .result-grid article { min-height:0; padding:28px 26px 30px; }
  .result-grid p { margin-top:30px; }
  .case-cta { padding:94px 0; }
  .case-cta h2 { font-size:clamp(42px,11.5vw,56px); line-height:.96; letter-spacing:-.055em; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .motion-ready .reveal,.motion-ready .reveal-stagger > * { opacity:1!important; translate:none!important; }
  .case-frame:hover,.case-frame--hero:hover,.button:hover { transform:none; }
  .case-frame:hover img { transform:none; }
}