.sp-case-study {
  --sp-shell: min(1380px, calc(100% - 32px));
  position: relative;
  overflow: hidden;
}
.sp-case-study::before {
  content: "";
  position: absolute;
  top: 0;
  right: -320px;
  z-index: -1;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.12), transparent 66%);
  pointer-events: none;
}
.sp-section,
.sp-hero,
.sp-architecture {
  width: var(--sp-shell);
  margin-inline: auto;
}
.sp-eyebrow {
  margin: 0 0 24px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.sp-case-study h1,
.sp-case-study h2,
.sp-case-study h3 {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.sp-hero {
  min-height: 720px;
  padding: 108px 0 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.55fr);
  gap: clamp(54px, 8vw, 130px);
  align-items: center;
}
.sp-hero h1 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(3.4rem, 6.2vw, 6rem);
  line-height: 0.96;
  text-wrap: balance;
}
.sp-hero h1 em { color: var(--green); font-style: normal; }
.sp-lede {
  max-width: 720px;
  margin: 32px 0 0;
  color: var(--text-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.7;
}
.sp-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.sp-truth {
  margin: 28px 0 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sp-truth span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 13px rgba(74, 222, 128, 0.85);
}
.sp-truth b { margin: 0 8px; color: var(--border); }
.sp-system-card {
  border: 1px solid var(--border-hot);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.8);
  box-shadow: 0 35px 90px rgba(0,0,0,.4), 0 0 55px rgba(74,222,128,.06);
  backdrop-filter: blur(12px);
}
.sp-card-head,
.sp-card-foot {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.sp-card-head { border-bottom: 1px solid var(--border); }
.sp-card-head b { color: var(--green); }
.sp-card-foot { border-top: 1px solid var(--border); color: var(--text-soft); }
.sp-system-card ol { margin: 0; padding: 18px 20px; list-style: none; }
.sp-system-card li {
  min-height: 53px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  position: relative;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
}
.sp-system-card li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 38px;
  height: 31px;
  border-left: 1px solid var(--border);
}
.sp-system-card li span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(74,222,128,.42);
  border-radius: 3px;
  background: rgba(74,222,128,.06);
  color: var(--green);
  font-size: 0.5rem;
}
.sp-architecture {
  margin-bottom: 160px;
  border: solid var(--border);
  border-width: 1px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.2fr;
}
.sp-architecture > div,
.sp-architecture > p {
  min-height: 120px;
  margin: 0;
  padding: 24px 28px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sp-architecture > p { border-right: 0; color: var(--text-muted); font: 400 0.62rem/1.7 var(--font-mono); }
.sp-architecture strong { color: var(--white); font: 600 2.3rem/1 var(--font-display); }
.sp-architecture span { margin-top: 8px; color: var(--text-soft); font-size: 0.78rem; }
.sp-challenge {
  padding-bottom: 170px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(60px, 11vw, 170px);
}
.sp-challenge h2,
.sp-heading-row h2,
.sp-ai h2,
.sp-proof-intro h2,
.sp-transfer h2,
.sp-contact h2 {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 4.75rem);
  line-height: 1.02;
  text-wrap: balance;
}
.sp-challenge-copy { padding-top: 42px; }
.sp-challenge-copy > p { margin: 0; color: var(--text-soft); font-size: 1.05rem; line-height: 1.75; }
.sp-challenge-copy .sp-large-copy { margin-bottom: 28px; color: var(--text); font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.5; }
.sp-principle {
  margin-top: 50px;
  padding: 23px 0;
  border: solid var(--border);
  border-width: 1px 0;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
}
.sp-principle span { color: var(--green); font: 600 0.58rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sp-principle strong { font: 500 1rem/1.5 var(--font-display); letter-spacing: 0; }
.sp-heading-row {
  margin-bottom: 70px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 80px;
  align-items: end;
}
.sp-heading-row > p { margin: 0 0 7px; color: var(--text-soft); font-size: 1rem; line-height: 1.7; }
.sp-experience-grid { padding-bottom: 180px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sp-experience-card {
  padding: clamp(20px, 3vw, 42px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10,14,24,.72);
  overflow: hidden;
}
.sp-card-label { margin-bottom: 28px; color: var(--text-soft); font: 600 0.58rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sp-card-label span { margin-right: 16px; color: var(--green); }
.sp-experience-card > h3 { margin: 34px 0 15px; font-size: clamp(1.65rem,2.4vw,2.35rem); line-height: 1.15; }
.sp-experience-card > p { margin: 0; color: var(--text-soft); font-size: .94rem; line-height: 1.7; }
.sp-experience-card ul { margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); list-style: none; display: grid; gap: 12px; }
.sp-experience-card li { color: var(--text); font: 600 .62rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.sp-experience-card li::before { content: "+"; margin-right: 11px; color: var(--green); }
.sp-visualizer,
.sp-ops-window { border: 1px solid var(--border-hot); border-radius: 5px; background: #070a11; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
.sp-window-bar {
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font: 600 .45rem/1 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sp-window-bar span:first-child { color: var(--white); font-size: .58rem; }
.sp-before-after { padding: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sp-before-after figure { margin: 0; aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--dark2); }
.sp-before-after img { width: 100%; height: 100%; object-fit: cover; }
.sp-before-after figcaption { position: absolute; left: 8px; bottom: 8px; padding: 7px 8px; background: rgba(4,6,11,.84); color: var(--white); font: 600 .42rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sp-window-progress { height: 34px; border-top: 1px solid var(--border); display: flex; justify-content: center; align-items: center; gap: 7px; }
.sp-window-progress span,
.sp-window-progress i { width: 25px; height: 2px; background: var(--border); }
.sp-window-progress span { background: var(--green); }
.sp-ops-window { min-height: 326px; display: grid; grid-template-columns: 112px 1fr; }
.sp-ops-window aside { padding: 17px 10px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.sp-ops-window aside b { margin: 0 7px 22px; color: var(--white); font: 700 .65rem/1 var(--font-display); }
.sp-ops-window aside span { padding: 9px 8px; color: var(--text-muted); font: 500 .45rem/1 var(--font-mono); }
.sp-ops-window aside .selected { background: rgba(74,222,128,.08); color: var(--green); }
.sp-ops-main { min-width: 0; padding: 18px; }
.sp-ops-top { display: flex; justify-content: space-between; align-items: center; }
.sp-ops-top div { display: flex; flex-direction: column; gap: 5px; }
.sp-ops-top small,
.sp-estimate-panel small { color: var(--text-muted); font: 600 .44rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sp-ops-top strong { color: var(--white); font: 600 1rem/1 var(--font-display); }
.sp-ops-top > span { padding: 7px 8px; border: 1px solid var(--border); color: var(--text-soft); font: 600 .38rem/1 var(--font-mono); }
.sp-signal-cards { margin-top: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.sp-signal-cards div { min-width: 0; padding: 12px 10px; border: 1px solid var(--border); background: var(--dark2); display: flex; flex-direction: column; }
.sp-signal-cards small { overflow: hidden; color: var(--text-muted); font: 600 .34rem/1 var(--font-mono); text-overflow: ellipsis; text-transform: uppercase; }
.sp-signal-cards strong { margin-top: 10px; color: var(--white); font: 600 .75rem/1 var(--font-display); }
.sp-signal-cards i { margin-top: 6px; color: var(--green); font: 400 .38rem/1 var(--font-mono); font-style: normal; }
.sp-journey-table { margin-top: 13px; border: 1px solid var(--border); }
.sp-journey-table > div { min-height: 35px; padding: 0 9px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1.6fr .65fr .65fr; gap: 7px; align-items: center; color: var(--text-soft); font: 400 .38rem/1.3 var(--font-mono); }
.sp-journey-table > div:first-child { min-height: 27px; color: var(--text-muted); text-transform: uppercase; }
.sp-journey-table > div:last-child { border-bottom: 0; }
.sp-journey-table b { color: var(--green); font-weight: 500; }
.sp-journey-section { padding: 160px 0 180px; border: solid var(--border); border-width: 1px 0; background: rgba(10,14,24,.72); }
.sp-journey-list { margin: 0; padding: 0; border-top: 1px solid var(--border); list-style: none; }
.sp-journey-list li { min-height: 130px; padding: 28px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 100px 250px 1fr; gap: 30px; align-items: center; }
.sp-journey-list span { color: var(--green); font: 600 .62rem/1 var(--font-mono); }
.sp-journey-list h3 { margin: 0; font-size: 1.65rem; line-height: 1; text-transform: uppercase; }
.sp-journey-list p { max-width: 610px; margin: 0; color: var(--text-soft); font-size: .94rem; line-height: 1.65; }
.sp-ai { padding-top: 180px; padding-bottom: 180px; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(70px,10vw,160px); align-items: center; }
.sp-ai-copy > p:not(.sp-eyebrow) { margin: 30px 0 0; color: var(--text-soft); font-size: 1.05rem; line-height: 1.75; }
.sp-control-flow { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 11px; color: var(--text-soft); font: 600 .5rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sp-control-flow b { color: var(--green); }
.sp-estimate-panel { border: 1px solid var(--border-hot); border-radius: var(--radius-lg); background: rgba(10,14,24,.82); box-shadow: 0 35px 90px rgba(0,0,0,.34); overflow: hidden; }
.sp-estimate-head { padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.sp-estimate-head div { display: flex; flex-direction: column; gap: 7px; }
.sp-estimate-head strong { color: var(--white); font: 600 1.25rem/1 var(--font-display); }
.sp-estimate-head > span { padding: 8px 9px; border: 1px solid rgba(74,222,128,.3); color: var(--green); font: 600 .44rem/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sp-estimate-context { padding: 20px; border-bottom: 1px solid var(--border); }
.sp-estimate-context > small,
.sp-estimate-draft > small { display: block; margin-bottom: 13px; color: var(--green); }
.sp-estimate-context div { min-height: 37px; padding: 0 12px; border: solid var(--border); border-width: 1px 1px 0; display: flex; justify-content: space-between; align-items: center; color: var(--text-soft); font-size: .7rem; }
.sp-estimate-context div:last-child { border-bottom-width: 1px; }
.sp-estimate-context b { color: var(--green); font: 600 .44rem/1 var(--font-mono); text-transform: uppercase; }
.sp-estimate-draft { margin: 20px; padding: 20px; border: 1px solid var(--border); background: rgba(4,6,11,.7); }
.sp-estimate-draft h3 { margin: 0; font-size: 1.1rem; }
.sp-estimate-draft p { margin: 10px 0 18px; color: var(--text-soft); font-size: .7rem; line-height: 1.6; }
.sp-estimate-draft > div { display: grid; grid-template-columns: 1fr auto; }
.sp-estimate-draft > div span,
.sp-estimate-draft > div i { padding: 10px 0; border-top: 1px solid var(--border); color: var(--text); font: 400 .56rem/1 var(--font-mono); font-style: normal; }
.sp-estimate-draft > div i { color: var(--green); }
.sp-estimate-actions { padding: 0 20px 20px; display: flex; justify-content: flex-end; gap: 8px; }
.sp-estimate-actions span,
.sp-estimate-actions b { padding: 11px 13px; border: 1px solid var(--border); color: var(--text-soft); font: 600 .5rem/1 var(--font-mono); text-transform: uppercase; }
.sp-estimate-actions b { border-color: var(--green); background: var(--green); color: #031008; }
.sp-proof-section { padding: 170px 0 180px; border: solid var(--border); border-width: 1px 0; background: rgba(15,23,42,.5); }
.sp-proof-intro { max-width: 850px; }
.sp-proof-intro > p:last-child { max-width: 650px; margin: 28px 0 0; color: var(--text-soft); font-size: 1.05rem; line-height: 1.7; }
.sp-proof-grid { margin-top: 80px; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(3,1fr); }
.sp-proof-grid article { min-height: 270px; padding: 32px 35px 34px 0; border-bottom: 1px solid var(--border); }
.sp-proof-grid article:not(:nth-child(3n)) { border-right: 1px solid var(--border); }
.sp-proof-grid article:nth-child(3n+2),
.sp-proof-grid article:nth-child(3n+3) { padding-left: 35px; }
.sp-proof-grid article > span { color: var(--green); font: 600 .56rem/1 var(--font-mono); }
.sp-proof-grid h3 { margin: 65px 0 13px; font-size: 1.45rem; }
.sp-proof-grid p { margin: 0; color: var(--text-soft); font-size: .88rem; line-height: 1.65; }
.sp-transfer { padding-top: 180px; padding-bottom: 150px; display: grid; grid-template-columns: .55fr 1.45fr; gap: 100px; }
.sp-transfer-mark { width: min(100%,420px); aspect-ratio: 1; border: 1px solid var(--border); display: grid; place-items: center; position: relative; color: var(--green); font: 600 clamp(5rem,10vw,10rem)/1 var(--font-display); text-shadow: 0 0 45px rgba(74,222,128,.2); }
.sp-transfer-mark::before,
.sp-transfer-mark::after { content: ""; position: absolute; background: var(--border); }
.sp-transfer-mark::before { left: 50%; top: 0; width: 1px; height: 100%; }
.sp-transfer-mark::after { top: 50%; left: 0; width: 100%; height: 1px; }
.sp-transfer > div:last-child > p:not(.sp-eyebrow) { max-width: 760px; margin: 30px 0 0; color: var(--text-soft); font-size: 1.1rem; line-height: 1.75; }
.sp-tags { margin-top: 45px; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tags span { padding: 10px 11px; border: 1px solid var(--border); border-radius: 3px; color: var(--text-soft); font: 600 .5rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sp-validation { margin-bottom: 140px; padding: 25px 0; border: solid var(--border); border-width: 1px 0; display: grid; grid-template-columns: 180px 1fr; gap: 30px; }
.sp-validation span { color: var(--green); font: 600 .56rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sp-validation p { margin: 0; color: var(--text-muted); font: 400 .62rem/1.7 var(--font-mono); }
.sp-contact { padding: 150px 0; border-top: 1px solid var(--border); background: rgba(10,14,24,.86); text-align: center; }
.sp-contact .sp-section { max-width: 1080px; }
.sp-contact h2 { max-width: 1000px; margin-inline: auto; }
.sp-contact p:not(.sp-eyebrow) { max-width: 650px; margin: 28px auto 42px; color: var(--text-soft); font-size: 1.05rem; line-height: 1.7; }

@media (max-width: 1000px) {
  .sp-hero,
  .sp-challenge,
  .sp-ai,
  .sp-transfer { grid-template-columns: 1fr; }
  .sp-hero { min-height: auto; gap: 64px; }
  .sp-heading-row { grid-template-columns: 1fr; gap: 24px; }
  .sp-experience-grid { grid-template-columns: 1fr; }
  .sp-journey-list li { grid-template-columns: 60px 180px 1fr; }
  .sp-transfer-mark { max-width: 260px; }
}
@media (max-width: 720px) {
  .sp-hero { padding: 76px 0 80px; }
  .sp-hero h1 { font-size: clamp(2.9rem,13vw,4.7rem); }
  .sp-architecture { margin-bottom: 100px; grid-template-columns: 1fr; }
  .sp-architecture > div,
  .sp-architecture > p { min-height: 100px; border-right: 0; border-bottom: 1px solid var(--border); }
  .sp-architecture > p { border-bottom: 0; }
  .sp-challenge,
  .sp-experience-grid,
  .sp-ai { padding-bottom: 110px; }
  .sp-challenge { gap: 20px; }
  .sp-challenge-copy { padding-top: 0; }
  .sp-principle { grid-template-columns: 1fr; }
  .sp-experience-card { padding: 16px; }
  .sp-ops-window { min-height: 300px; grid-template-columns: 78px 1fr; }
  .sp-ops-window aside { padding-inline: 5px; }
  .sp-ops-window aside span { padding-inline: 5px; font-size: .38rem; }
  .sp-ops-main { padding: 10px; }
  .sp-signal-cards { grid-template-columns: 1fr; }
  .sp-journey-table { display: none; }
  .sp-journey-section,
  .sp-proof-section { padding: 105px 0 115px; }
  .sp-journey-list li { padding: 25px 0; grid-template-columns: 42px 1fr; gap: 12px; }
  .sp-journey-list p { grid-column: 2; }
  .sp-ai { padding-top: 110px; }
  .sp-proof-grid { grid-template-columns: 1fr; }
  .sp-proof-grid article,
  .sp-proof-grid article:nth-child(3n+2),
  .sp-proof-grid article:nth-child(3n+3) { min-height: auto; padding: 30px 0; border-right: 0; }
  .sp-proof-grid h3 { margin-top: 35px; }
  .sp-transfer { padding: 110px 0 90px; gap: 60px; }
  .sp-validation { margin-bottom: 90px; grid-template-columns: 1fr; gap: 14px; }
  .sp-contact { padding: 110px 0; }
}