.page-hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 84px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-hero::before {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(154,79,220,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,79,220,.07) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom, black, transparent);
}
.page-hero::after {
  content:""; position:absolute; width:480px; height:480px; right:4%; top:-80px;
  border-radius:50%; background:rgba(119,35,232,.25); filter:blur(70px);
}
.page-hero .container {position:relative; z-index:2}
.breadcrumb {color:#bcb6c8; font-size:13px; margin-bottom:22px}
.breadcrumb a {color:#c68aff}
.page-hero h1 {font-size:clamp(46px,6vw,78px); line-height:1; letter-spacing:-.055em; margin:18px 0 22px; max-width:900px}
.page-hero h1 span {background:linear-gradient(90deg,#fff,#c995ff,#7e28ef); -webkit-background-clip:text; color:transparent}
.page-hero p {max-width:760px; color:var(--muted); font-size:19px; line-height:1.75}
.page-actions {display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.content-section {padding:90px 0}
.content-section.alt {background:rgba(15,9,24,.55); border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05)}
.section-intro {max-width:780px; margin-bottom:40px}
.section-intro .label {color:#bc72ff; text-transform:uppercase; letter-spacing:.13em; font-weight:800; font-size:12px}
.section-intro h2 {font-size:clamp(34px,4vw,56px); letter-spacing:-.04em; line-height:1.08; margin:13px 0}
.section-intro p {color:var(--muted); line-height:1.75}
.info-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.info-card, .case-card, .article-card, .metric-card {
  border:1px solid rgba(178,96,255,.18);
  background:linear-gradient(145deg,rgba(25,15,39,.9),rgba(9,6,16,.9));
  border-radius:24px; padding:28px;
}
.info-card h3, .case-card h3, .article-card h3 {font-size:22px; margin:16px 0 12px}
.info-card p, .case-card p, .article-card p {color:var(--muted); line-height:1.7}
.card-mark {width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(120,38,215,.22); color:#bf74ff; font-size:23px}
.check-list {display:grid; grid-template-columns:repeat(2,1fr); gap:14px; list-style:none; padding:0; margin:28px 0 0}
.check-list li {padding:16px 18px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.025); color:#d8d2df}
.check-list li::before {content:"✓"; color:#ad4bff; font-weight:900; margin-right:10px}
.process {display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.process-step {padding:26px; border-left:2px solid #8f2cff; background:rgba(255,255,255,.025); border-radius:0 18px 18px 0}
.process-step strong {display:block; color:#b45eff; font-size:12px; letter-spacing:.12em; margin-bottom:12px}
.process-step h3 {margin:0 0 10px}
.process-step p {color:var(--muted); line-height:1.65}
.metrics {display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.metric-card strong {font-size:36px; display:block; color:#c786ff}
.metric-card span {color:var(--muted)}
.case-grid, .article-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.case-tag, .article-meta {color:#b965ff; text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:.11em}
.case-card a, .article-card a {display:inline-block; color:#ca8aff; margin-top:20px; font-weight:700}
.case-card ul {color:var(--muted); padding-left:20px; line-height:1.7}
.article-card time {color:#938d9d; font-size:12px}
.article-body {max-width:850px; margin:0 auto}
.article-body h2 {font-size:34px; margin:48px 0 16px}
.article-body h3 {font-size:24px; margin:34px 0 12px}
.article-body p, .article-body li {color:#c4beca; font-size:17px; line-height:1.85}
.article-body blockquote {margin:32px 0; padding:22px 26px; border-left:3px solid #9130f5; background:rgba(125,37,217,.09); color:#e4dcec}
.cta-panel {padding:46px; border-radius:26px; display:flex; justify-content:space-between; align-items:center; gap:30px; border:1px solid rgba(179,97,255,.23); background:radial-gradient(circle at 85% 15%,rgba(129,38,232,.28),transparent 35%),rgba(15,9,24,.92)}
.cta-panel h2 {font-size:clamp(32px,4vw,50px); margin:10px 0}
@media(max-width:900px){
  .info-grid,.case-grid,.article-grid{grid-template-columns:repeat(2,1fr)}
  .process,.metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .page-hero{padding:82px 0 60px}
  .info-grid,.case-grid,.article-grid,.process,.metrics,.check-list{grid-template-columns:1fr}
  .cta-panel{flex-direction:column; align-items:flex-start; padding:30px 24px}
}