.case-page { background:#fff; }.case-page section[id] { scroll-margin-top:88px; }
.case-hero { display:grid; grid-template-columns:.92fr 1.08fr; gap:72px; align-items:center; min-height:720px; padding:86px max(24px,calc((100vw - 1180px)/2)) 110px; background:radial-gradient(circle at 9% 18%,rgba(255,202,86,.35) 0 5px,transparent 6px),linear-gradient(145deg,#f8f7ff,#f0f1ff 64%,#f8fbff); }.case-back { display:inline-block; margin-bottom:24px; color:var(--muted); font-size:.73rem; font-weight:700; }.case-hero h1 { max-width:700px; margin:24px 0 27px; font-size:clamp(3.4rem,5vw,5.65rem); }.case-hero h1 em { display:inline; color:var(--blue); font-style:normal; }.case-lead { max-width:620px; color:var(--muted); font-size:1.04rem; line-height:1.75; }
.case-browser { position:relative; overflow:hidden; border:1px solid #dfe0ee; border-radius:21px; background:#fff; box-shadow:0 34px 80px rgba(58,60,137,.17); transform:rotate(1deg); }.case-browser-bar { display:flex; gap:6px; height:38px; align-items:center; padding:0 14px; background:#fff; border-bottom:1px solid var(--line); }.case-browser-bar i { width:7px; height:7px; border-radius:50%; background:var(--red); }.case-browser-bar i:nth-child(2){background:var(--yellow)}.case-browser-bar i:nth-child(3){background:var(--green)}.case-browser-bar span { margin:auto; color:#999bab; font-size:.58rem; }.case-browser-viewport { aspect-ratio:16/6.3; overflow:hidden; background:#e8edf7; }.case-browser img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }.case-browser-note { position:absolute; right:20px; bottom:20px; padding:15px 18px; border-radius:11px; background:rgba(255,255,255,.94); box-shadow:0 14px 32px rgba(36,38,78,.15); }.case-browser-note small,.case-browser-note strong { display:block; }.case-browser-note small { color:var(--blue); font-size:.52rem; font-weight:800; letter-spacing:.08em; }.case-browser-note strong { margin-top:4px; font:700 .9rem var(--display); }
.case-facts { display:grid; grid-template-columns:repeat(4,1fr); width:min(1180px,calc(100% - 48px)); margin:-42px auto 0; position:relative; z-index:3; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:0 18px 55px rgba(49,52,111,.1); }.case-facts div { padding:25px 27px; border-right:1px solid var(--line); }.case-facts div:last-child { border-right:0; }.case-facts strong { display:block; color:var(--blue); font:800 1.42rem var(--display); }.case-facts span { display:block; margin-top:5px; color:var(--muted); font-size:.7rem; line-height:1.45; }
.case-story,.case-evolution { display:grid; grid-template-columns:.9fr 1.1fr; gap:95px; width:min(1080px,calc(100% - 48px)); margin:auto; padding:125px 0 112px; }.case-story h2,.challenge-copy h2,.case-section-heading h2,.dashboard-copy h2,.case-evolution h2,.case-results h2,.case-roles h2 { margin:20px 0 0; font-size:clamp(2.65rem,4.1vw,4.45rem); line-height:1.03; letter-spacing:-.06em; }.case-story-copy { padding-top:15px; }.case-story-copy p,.case-evolution>div:last-child p { color:var(--muted); font-size:1rem; line-height:1.77; }.case-story-copy p+p,.case-evolution>div:last-child p+p { margin-top:22px; }.case-story-copy strong,.case-evolution strong { color:var(--ink); }
.case-challenge { display:grid; grid-template-columns:.88fr 1.12fr; gap:80px; align-items:center; padding:108px max(24px,calc((100vw - 1120px)/2)); color:#fff; background:linear-gradient(135deg,#242641,#34375e); }.case-challenge .eyebrow { color:#fff; background:rgba(255,255,255,.1); }.challenge-copy>p:last-child { margin-top:25px; color:rgba(255,255,255,.68); line-height:1.72; }.challenge-list { display:grid; gap:13px; }.challenge-list article { display:grid; grid-template-columns:48px 1fr; gap:19px; padding:22px; border:1px solid rgba(255,255,255,.14); border-radius:11px; background:rgba(255,255,255,.06); }.challenge-list article>span { display:grid; width:43px; height:43px; place-items:center; color:#fff; background:var(--blue); border-radius:9px; font-size:.65rem; font-weight:800; }.challenge-list article:nth-child(2)>span { color:var(--ink); background:var(--yellow); }.challenge-list article:nth-child(3)>span { background:var(--green); }.challenge-list h3 { margin:1px 0 6px; font-size:1.16rem; }.challenge-list p { color:rgba(255,255,255,.62); font-size:.78rem; line-height:1.55; }
.case-features { padding:110px max(24px,calc((100vw - 1180px)/2)); background:var(--wash); }.case-section-heading { display:grid; grid-template-columns:1.12fr .88fr; gap:75px; align-items:end; }.case-section-heading>p { margin:0 0 7px; color:var(--muted); line-height:1.7; }.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:54px; }.feature-grid article { min-height:245px; padding:26px; border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:0 10px 28px rgba(49,52,111,.04); }.feature-grid article>span { display:grid; width:39px; height:39px; place-items:center; color:var(--blue); background:var(--wash-strong); border-radius:9px; font-weight:800; }.feature-grid h3 { margin:36px 0 10px; font-size:1.14rem; }.feature-grid p { color:var(--muted); font-size:.78rem; line-height:1.58; }
.dashboard-section { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:center; padding:112px max(24px,calc((100vw - 1180px)/2)); }.dashboard-copy>p:not(.eyebrow) { margin-top:25px; color:var(--muted); line-height:1.72; }.dashboard-note { margin-top:27px; padding:19px; border-left:4px solid var(--green); border-radius:5px; background:#f4fbf7; }.dashboard-note strong,.dashboard-note span { display:block; }.dashboard-note strong { font:700 .93rem var(--display); }.dashboard-note span { margin-top:6px; color:var(--muted); font-size:.74rem; line-height:1.55; }.demo-caption { margin:0 0 9px; color:#9698a6; font-size:.56rem; text-align:right; text-transform:uppercase; letter-spacing:.08em; }.demo-app { display:grid; grid-template-columns:150px 1fr; min-height:440px; overflow:hidden; border:1px solid #dfe0ec; border-radius:16px; background:#f7f7f9; box-shadow:0 26px 65px rgba(48,50,105,.13); }.demo-app aside { padding:24px 17px; color:#d9d9df; background:#1b1c20; }.demo-logo { display:flex; gap:8px; align-items:center; margin-bottom:27px; color:#fff; font-size:.68rem; }.demo-logo i { width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,var(--blue),var(--green)); }.demo-app aside small { display:block; margin:20px 5px 8px; color:#777982; font-size:.48rem; letter-spacing:.09em; }.demo-app aside a { display:block; padding:8px 10px; color:#c5c6cd; border-radius:6px; font-size:.62rem; }.demo-app aside a.active { color:#fff; background:#2a2b31; }.demo-main { padding:26px; }.demo-head { display:flex; justify-content:space-between; align-items:center; }.demo-head small,.demo-head strong { display:block; }.demo-head small { color:#9698a6; font-size:.48rem; }.demo-head strong { margin-top:3px; font:700 1.18rem var(--display); }.demo-head button { padding:8px 10px; color:#fff; border:0; border-radius:6px; background:var(--blue); font-size:.55rem; }.demo-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:28px; }.demo-stats div { padding:16px; border-radius:9px; background:#fff; }.demo-stats i,.demo-stats span { display:block; }.demo-stats i { font:800 1.45rem var(--display); font-style:normal; }.demo-stats .green{color:var(--green)}.demo-stats .blue{color:var(--blue)}.demo-stats .yellow{color:#d79d19}.demo-stats span { margin-top:3px; color:#8b8d98; font-size:.54rem; }.demo-panel { margin-top:13px; padding:18px; border-radius:9px; background:#fff; }.demo-panel>strong { display:block; margin-bottom:12px; font-size:.72rem; }.demo-panel>span { display:grid; grid-template-columns:15px 1fr auto; gap:7px; align-items:center; padding:11px 0; border-top:1px solid #eeeef3; color:#696b76; font-size:.57rem; }.demo-panel span i { width:8px; height:8px; border-radius:3px; background:var(--wash-strong); }.demo-panel small { color:#a2a4ad; font-size:.48rem; }
.case-evolution { padding-top:105px; padding-bottom:105px; }.case-results { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; padding:110px max(24px,calc((100vw - 1120px)/2)); background:linear-gradient(145deg,#f2f1ff,#fafaff); }.results-copy>p:not(.eyebrow) { margin-top:24px; color:var(--muted); line-height:1.72; }.results-copy .button { margin-top:27px; }.result-cards { display:grid; gap:13px; }.result-cards article { padding:25px; border:1px solid #dfdef0; border-radius:11px; background:#fff; box-shadow:0 10px 28px rgba(49,52,111,.04); }.result-cards strong { font:700 1.1rem var(--display); }.result-cards p { margin-top:7px; color:var(--muted); font-size:.79rem; line-height:1.58; }
.club-invite { display:grid; grid-template-columns:92px 1fr auto; gap:34px; align-items:center; width:min(1180px,calc(100% - 48px)); margin:92px auto 0; padding:38px 42px; overflow:hidden; position:relative; border:1px solid #dfe4df; border-radius:18px; background:linear-gradient(135deg,#f5fbf7,#fffdf5); box-shadow:0 20px 55px rgba(37,91,67,.09); }.club-invite::after { content:""; position:absolute; width:180px; height:180px; right:-95px; top:-105px; border-radius:50%; background:rgba(46,182,125,.1); }.club-invite-mark { display:grid; width:82px; height:82px; place-items:center; position:relative; border-radius:20px; color:#fff; background:linear-gradient(145deg,#292d49,#373d65); box-shadow:0 14px 30px rgba(36,39,65,.18); }.club-invite-mark::before,.club-invite-mark::after { content:""; position:absolute; width:14px; height:14px; border-radius:4px; }.club-invite-mark::before { left:11px; top:11px; background:var(--yellow); }.club-invite-mark::after { right:11px; bottom:11px; background:var(--green); }.club-invite-mark span { font:800 2.45rem var(--display); }.club-invite h2 { max-width:650px; margin:14px 0 10px; font-size:clamp(2rem,3vw,3.15rem); line-height:1.02; letter-spacing:-.055em; }.club-invite-copy>p:last-child { max-width:700px; color:var(--muted); font-size:.86rem; line-height:1.65; }.club-invite-actions { display:flex; min-width:245px; position:relative; z-index:1; align-items:flex-start; flex-direction:column; gap:18px; }.club-invite-actions .button { width:100%; justify-content:center; white-space:nowrap; }.club-invite-actions .text-link { margin-left:14px; }
.case-roles { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; width:min(1080px,calc(100% - 48px)); margin:auto; padding:112px 0; }.role-grid { display:grid; gap:14px; }.role-grid article { display:grid; grid-template-columns:54px 1fr; gap:19px; padding:23px; border:1px solid var(--line); border-radius:11px; }.role-grid article>span { display:grid; width:52px; height:52px; place-items:center; color:#fff; background:var(--blue); border-radius:11px; font:800 1rem var(--display); }.role-grid article:nth-child(2)>span { background:var(--green); }.role-grid small { display:block; color:var(--blue); font-size:.55rem; font-weight:800; letter-spacing:.08em; }.role-grid strong { display:block; margin-top:4px; font:700 1.08rem var(--display); }.role-grid p { margin-top:6px; color:var(--muted); font-size:.76rem; line-height:1.55; }.shared-role { padding:16px 18px; color:#726420!important; background:#fff8df; border-radius:8px; font-size:.74rem!important; }
.case-cta { display:flex; justify-content:space-between; gap:60px; align-items:end; padding:95px max(24px,calc((100vw - 1080px)/2)); color:#fff; background:linear-gradient(135deg,#5057ec,#6862f5); }.case-cta .eyebrow { color:#fff; background:rgba(255,255,255,.13); }.case-cta h2 { max-width:800px; margin:20px 0 15px; font-size:clamp(2.8rem,4.6vw,4.8rem); line-height:1.02; letter-spacing:-.06em; }.case-cta p:not(.eyebrow) { max-width:690px; color:rgba(255,255,255,.72); line-height:1.65; }.case-cta .contact-button { flex:0 0 auto; white-space:nowrap; }
@media(max-width:1050px){.case-hero,.case-story,.case-challenge,.dashboard-section,.case-evolution,.case-results,.case-roles{grid-template-columns:1fr}.case-browser{max-width:760px}.case-facts{grid-template-columns:repeat(2,1fr)}.case-facts div:nth-child(2){border-right:0}.case-facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}.case-section-heading{grid-template-columns:1fr;gap:24px}.feature-grid{grid-template-columns:repeat(2,1fr)}.club-invite{grid-template-columns:82px 1fr}.club-invite-actions{grid-column:2;min-width:0;align-items:flex-start}.club-invite-actions .button{width:auto}.case-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.case-hero{min-height:0;padding:58px 18px 90px;gap:48px}.case-hero h1{font-size:3rem}.case-hero .hero-actions{align-items:flex-start;flex-direction:column}.case-browser-viewport{aspect-ratio:16/6.8}.case-browser-note{right:10px;bottom:10px;padding:11px 13px}.case-browser-note strong{font-size:.72rem}.case-facts{width:calc(100% - 32px);grid-template-columns:1fr}.case-facts div,.case-facts div:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.case-story,.case-evolution,.case-roles{width:calc(100% - 32px);gap:32px;padding:82px 0}.case-story h2,.challenge-copy h2,.case-section-heading h2,.dashboard-copy h2,.case-evolution h2,.case-results h2,.case-roles h2{font-size:2.55rem}.case-challenge,.case-features,.dashboard-section,.case-results{padding:82px 18px}.feature-grid{grid-template-columns:1fr}.demo-app{grid-template-columns:88px 1fr}.demo-app aside{padding:18px 9px}.demo-logo b{display:none}.demo-main{padding:16px}.demo-stats{grid-template-columns:1fr}.demo-panel>span{grid-template-columns:10px 1fr}.demo-panel small{display:none}.club-invite{width:calc(100% - 32px);grid-template-columns:1fr;gap:22px;margin-top:64px;padding:28px 24px}.club-invite-mark{width:64px;height:64px}.club-invite-mark span{font-size:2rem}.club-invite-actions{grid-column:1}.club-invite-actions .button{width:100%;white-space:normal}.club-invite-actions .text-link{margin-left:0}.case-cta{padding:82px 18px}.case-cta .contact-button{white-space:normal}}