.page-hero{ position: relative; padding-top: 170px; padding-bottom: 90px; padding-left: var(--pad-x); padding-right: var(--pad-x); background: var(--navy-black); color: #fff; overflow: hidden; }
.page-hero::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 90% 30%, rgba(74,90,240,0.3), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(13,152,122,.18), transparent 60%); }
.page-hero-inner{ position:relative; z-index:2; }
.page-hero .eyebrow{ margin-bottom: 22px; }
.page-hero h1{ color: #fff; max-width: 22ch; }
.page-hero h1 .em{ color: var(--cap-accent, #4a5af0); }
.page-hero .lead{ color: rgba(255,255,255,.78); margin-top: 28px; max-width: 700px; }
.page-hero-meta{ position:absolute; top: 76px; left: 0; right: 0; z-index: 3; display:flex; justify-content:space-between; align-items:center; padding: 14px var(--pad-x); border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--mono); font-size:11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.50); }
.page-hero-meta a{ color: rgba(255,255,255,.70); }
.page-hero-meta a:hover{ color: var(--cyan); }

/* Layer badge */
.layer-badge{ display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 100px; margin-bottom: 22px; }
.layer-badge .l{ width: 28px; height: 28px; border-radius: 50%; background: var(--cap-accent, #4a5af0); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 14px; }
.layer-badge span{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }

/* Capabilities offered */
.offer-section{ padding: clamp(80px, 11vw, 140px) var(--pad-x); background: var(--paper); }
.offer-grid{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; margin-top: clamp(40px, 6vw, 70px); background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.offer{ background: var(--paper); padding: clamp(28px, 3vw, 40px); min-height: 200px; transition: background .3s var(--ease); position: relative; }
.offer::before{ content:''; position: absolute; top: 0; left: 0; width: 30px; height: 3px; background: var(--cap-accent, #4a5af0); }
.offer:hover{ background: #fff; }
.offer h4{ font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.015em; margin-bottom: 12px; margin-top: 18px; }
.offer p{ font-size: 13px; color: var(--grey-1); line-height: 1.55; }
@media (max-width: 980px){ .offer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .offer-grid{ grid-template-columns: 1fr; } }

/* Case studies grid */
.cases-section{ padding: clamp(80px, 11vw, 140px) var(--pad-x); background: var(--off); }
.cases-grid{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(20px, 2.5vw, 28px); margin-top: clamp(40px, 6vw, 70px); }
.case-tile{ display: block; background: var(--paper); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); transition: all .4s var(--ease); }
.case-tile:hover{ transform: translateY(-4px); box-shadow: 0 24px 60px rgba(10,14,40,.08); border-color: rgba(42,125,225,.3); }
.case-tile .visual{ aspect-ratio: 16/10; background: var(--bg); position: relative; overflow: hidden; display: grid; place-items: center; }
.case-tile .visual::before{ content:''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 50%), radial-gradient(circle at 75% 70%, rgba(0,0,0,.25), transparent 55%); }
.case-tile .visual .gly{ position: relative; z-index: 2; font-family: var(--display); font-weight: 800; font-size: 80px; color: rgba(255,255,255,.92); letter-spacing: -.04em; line-height: 1; }
.case-tile .visual .badge{ position: absolute; top: 14px; left: 14px; z-index: 3; background: rgba(0,0,0,.4); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); padding: 6px 12px; border-radius: 100px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.case-tile .info{ padding: 22px; }
.case-tile h3{ font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 10px; }
.case-tile p{ font-size: 13px; color: var(--grey-1); line-height: 1.55; }
@media (max-width: 980px){ .cases-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .cases-grid{ grid-template-columns: 1fr; } }

/* Related capabilities — other 7 */
.related-caps{ padding: clamp(80px, 11vw, 140px) var(--pad-x); background: var(--paper); }
.rel-caps-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(40px, 6vw, 70px); }
.rel-cap{ padding: 24px; background: var(--off); border: 1px solid var(--line); border-radius: 16px; transition: all .3s var(--ease); position: relative; }
.rel-cap::before{ content:''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--c, var(--blue)); }
.rel-cap[data-c="ai"] { --c: var(--blue); }
.rel-cap[data-c="data"] { --c: var(--cyan); }
.rel-cap[data-c="dash"] { --c: var(--teal); }
.rel-cap[data-c="web"] { --c: #4a5af0; }
.rel-cap[data-c="mobile"]{ --c: #6d3aa3; }
.rel-cap[data-c="eserv"] { --c: var(--orange); }
.rel-cap[data-c="cloud"] { --c: var(--ink); }
.rel-cap[data-c="integ"] { --c: var(--green); }
.rel-cap:hover{ transform: translateY(-3px); border-color: var(--c); }
.rel-cap .n{ font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c); margin-bottom: 12px; display: block; }
.rel-cap h4{ font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 6px; }
.rel-cap p{ font-size: 12px; color: var(--grey-1); line-height: 1.4; }
@media (max-width: 980px){ .rel-caps-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .rel-caps-grid{ grid-template-columns: 1fr; } }

.show-more{ display: flex; justify-content: center; margin-top: 50px; }

/* CTA */
.cta{ padding: clamp(100px, 14vw, 200px) var(--pad-x); background: var(--navy-black); color: #fff; position: relative; overflow: hidden; }
.cta::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(74,90,240,0.22), transparent 60%); }
.cta > *{ position: relative; z-index: 2; }
.cta .eyebrow{ color: var(--cap-accent, #4a5af0); margin-bottom: 28px; }
.cta .eyebrow::before{ background: var(--cap-accent, #4a5af0); }
.cta h2{ color: #fff; max-width: 22ch; }
.cta h2 .em{ color: var(--cap-accent, #4a5af0); }
.cta .lead{ color: rgba(255,255,255,.7); margin-top: 26px; }
.cta-actions{ margin-top: clamp(40px, 6vw, 70px); display: flex; gap: 14px; flex-wrap: wrap; }