:root {
  --ss-ink: #050b15;
  --ss-ink-2: #071426;
  --ss-panel: #0a1b30;
  --ss-line: rgba(132, 190, 236, .18);
  --ss-text: #f4f8fc;
  --ss-muted: rgba(218, 232, 245, .66);
  --ss-cyan: #20c2ef;
  --ss-blue: #155dfc;
  --ss-paper: #f1f5fa;
  --ss-paper-text: #0a2138;
  --ss-ease: cubic-bezier(.2, .75, .18, 1);
}

body.ss-page {
  color: var(--ss-text);
  background: var(--ss-ink);
}

.ss-page .site-header:not(.scrolled) {
  background: linear-gradient(180deg, rgba(3, 8, 18, .94), rgba(3, 8, 18, .68) 74%, transparent);
}

.ss-main {
  position: relative;
  overflow: clip;
  background: var(--ss-ink);
}

.ss-main :where(h1, h2, h3, p, ul, figure) { margin: 0; }
.ss-main :where(ul) { padding: 0; list-style: none; }
.ss-main a { color: inherit; }

.ss-container {
  width: min(1460px, calc(100% - clamp(48px, 7vw, 112px)));
  margin-inline: auto;
}

.ss-section {
  position: relative;
  padding: clamp(104px, 9vw, 154px) 0;
}

.ss-eyebrow,
.ss-kicker,
.ss-panel-kicker {
  color: var(--ss-cyan);
  font: 750 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ss-heading {
  display: grid;
  grid-template-columns: minmax(180px, .38fr) minmax(0, 1fr);
  gap: clamp(48px, 8vw, 136px);
  align-items: start;
  margin-bottom: clamp(56px, 6vw, 88px);
}

.ss-heading > div {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(280px, .55fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
}

.ss-heading h2 {
  color: #fff;
  font-size: clamp(42px, 4.6vw, 72px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.ss-heading > div > p {
  padding-bottom: 4px;
  color: var(--ss-muted);
  font-size: 16px;
  line-height: 1.9;
}

.ss-heading-dark h2 { color: var(--ss-paper-text); }
.ss-heading-dark > div > p { color: #42576d; }
.ss-section-light { color: var(--ss-paper-text); background: var(--ss-paper); }

/* Hero */
.ss-hero {
  position: relative;
  min-height: max(780px, 100svh);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #030914;
}

.ss-hero-media,
.ss-hero-shade {
  position: absolute;
  inset: 0;
}

.ss-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  transform: scale(1.015);
  animation: ssHeroBreath 16s ease-in-out infinite alternate;
}

.ss-hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2, 7, 16, .98) 0%, rgba(2, 7, 16, .93) 30%, rgba(2, 7, 16, .54) 57%, rgba(2, 7, 16, .14) 84%),
    linear-gradient(180deg, rgba(2, 7, 16, .24), rgba(2, 7, 16, .05) 58%, rgba(2, 7, 16, .82));
}

.ss-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 96px;
}

.ss-hero-copy { max-width: min(760px, 58vw); }
.ss-kicker { display: flex; gap: 13px; align-items: center; }
.ss-kicker i { width: 7px; height: 7px; background: var(--ss-cyan); box-shadow: 0 0 20px rgba(32, 194, 239, .8); }

.ss-hero h1 {
  margin-top: 31px;
  max-width: 760px;
  font-size: clamp(58px, 6.1vw, 98px);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.ss-hero h2 {
  margin-top: 28px;
  max-width: 720px;
  color: rgba(240, 247, 254, .94);
  font-size: clamp(26px, 2.4vw, 39px);
  font-weight: 560;
  line-height: 1.45;
  letter-spacing: -.018em;
}

.ss-hero-summary {
  margin-top: 25px !important;
  max-width: 700px;
  color: rgba(220, 235, 249, .68);
  font-size: 16px;
  line-height: 1.9;
}

.ss-audience { margin-top: 27px !important; display: flex; flex-wrap: wrap; gap: 9px; }
.ss-audience li {
  padding: 7px 14px;
  color: rgba(226, 240, 252, .82);
  border: 1px solid rgba(119, 195, 247, .26);
  border-radius: 999px;
  background: rgba(4, 16, 31, .42);
  font-size: 12px;
  backdrop-filter: blur(8px);
}

.ss-hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 13px; }
.ss-button {
  min-height: 52px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 720;
  transition: transform .3s var(--ss-ease), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ss-button:hover { transform: translateY(-3px); }
.ss-button-primary { color: #fff; background: linear-gradient(105deg, var(--ss-cyan), var(--ss-blue)); box-shadow: 0 16px 40px rgba(21, 93, 252, .22); }
.ss-button-primary:hover { box-shadow: 0 20px 50px rgba(21, 93, 252, .36); }
.ss-button-ghost { color: #fff; border-color: rgba(185, 222, 248, .34); background: rgba(5, 15, 28, .36); backdrop-filter: blur(12px); }
.ss-button-ghost:hover { border-color: rgba(32, 194, 239, .72); background: rgba(8, 29, 50, .72); }

.ss-scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 28px;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: rgba(226, 239, 251, .45);
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
  text-decoration: none;
  transform: translateX(-50%);
}
.ss-scroll-cue span { position: relative; width: 1px; height: 35px; overflow: hidden; background: rgba(255,255,255,.18); }
.ss-scroll-cue span::after { content: ""; position: absolute; inset: -100% 0 0; background: var(--ss-cyan); animation: ssScrollCue 2.1s ease-in-out infinite; }

/* Pain */
.ss-pains::after {
  content: "";
  position: absolute;
  right: -14vw;
  top: 5%;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 118, 231, .09), transparent 68%);
  pointer-events: none;
}

.ss-pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #ccd8e4; }
.ss-pain { min-height: 330px; padding: 44px clamp(24px, 2.2vw, 36px) 36px; border-right: 1px solid #ccd8e4; transition: background .3s ease, transform .35s var(--ss-ease); }
.ss-pain:first-child { border-left: 1px solid #ccd8e4; }
.ss-pain:hover { z-index: 1; transform: translateY(-6px); background: #fff; box-shadow: 0 24px 60px rgba(25, 56, 91, .1); }
.ss-pain svg { width: 44px; height: 44px; fill: none; stroke: #1476da; stroke-width: 1.5; }
.ss-pain h3 { margin-top: 56px; font-size: 25px; line-height: 1.3; }
.ss-pain p { margin-top: 18px; color: #475d73; font-size: 14px; line-height: 1.9; }

/* Intro */
.ss-intro {
  background:
    radial-gradient(circle at 13% 90%, rgba(21, 93, 252, .15), transparent 28%),
    linear-gradient(135deg, #050b15 0%, #071425 58%, #071a33 100%);
}
.ss-intro::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(115,179,226,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(115,179,226,.06) 1px, transparent 1px); background-size: 82px 82px; mask-image: linear-gradient(to right, #000, transparent 72%); }
.ss-intro-layout { position: relative; display: grid; grid-template-columns: minmax(330px, .78fr) minmax(500px, 1.22fr); gap: clamp(70px, 11vw, 180px); }
.ss-intro-title h2 { margin-top: 20px; font-size: clamp(50px, 5.3vw, 84px); line-height: 1.12; letter-spacing: -.05em; }
.ss-lead { max-width: 840px; color: rgba(229, 241, 251, .78); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.9; }
.ss-principles { margin-top: 68px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ss-line); }
.ss-principles article { padding: 26px 24px 0 0; }
.ss-principles span { color: var(--ss-cyan); font-size: 18px; font-weight: 720; }
.ss-principles p { margin-top: 11px; color: var(--ss-muted); font-size: 13px; line-height: 1.8; }

/* Architecture */
.ss-architecture { background: #07101e; }
.ss-architecture-board { position: relative; padding: clamp(34px, 4.2vw, 64px); border: 1px solid rgba(96, 171, 230, .25); border-radius: 14px; background: linear-gradient(135deg, rgba(12, 34, 61, .98), rgba(5, 16, 31, .98)); box-shadow: 0 36px 90px rgba(0, 0, 0, .22); overflow: hidden; }
.ss-architecture-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 35% 50%, rgba(32, 194, 239, .09), transparent 31%), radial-gradient(circle at 78% 50%, rgba(21, 93, 252, .13), transparent 28%); }
.ss-arch-flow { position: relative; height: 68px; margin: 0 3% -9px; }
.ss-arch-flow svg { width: 100%; height: 100%; overflow: visible; }
.ss-arch-flow circle { fill: #07101e; stroke: var(--ss-cyan); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(32,194,239,.75)); }
.ss-arch-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ss-arch-stage { min-height: 390px; padding: 28px 26px; border: 1px solid rgba(125, 186, 232, .18); border-radius: 8px; background: rgba(9, 28, 51, .72); }
.ss-arch-stage.is-foundation { border-color: rgba(32, 194, 239, .5); background: linear-gradient(160deg, rgba(14, 66, 102, .72), rgba(8, 28, 54, .82)); box-shadow: inset 0 0 38px rgba(32, 194, 239, .06); }
.ss-arch-stage header { padding-bottom: 24px; border-bottom: 1px solid rgba(120, 185, 234, .18); }
.ss-arch-stage header b { display: block; color: #fff; font-size: 23px; }
.ss-arch-stage header span { margin-top: 4px; display: block; color: rgba(78, 201, 245, .62); font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.ss-arch-stage ul { margin-top: 22px !important; display: grid; gap: 8px; }
.ss-arch-stage li { min-height: 39px; padding: 9px 12px; color: rgba(223, 238, 250, .78); border: 1px solid rgba(116, 180, 229, .1); border-radius: 4px; background: rgba(91, 156, 207, .055); font-size: 13px; }
.ss-arch-caption { position: relative; margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 16px; color: rgba(207, 226, 244, .48); font-size: 11px; }
.ss-arch-caption i { width: 32px; height: 1px; background: linear-gradient(90deg, var(--ss-cyan), var(--ss-blue)); }

/* Scenario workbench */
.ss-scenarios { background: linear-gradient(180deg, #050b15, #071223); }
.ss-scenario-workbench { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 690px; border: 1px solid rgba(96, 171, 230, .25); border-radius: 14px; background: #06101e; box-shadow: 0 38px 90px rgba(0, 0, 0, .32); overflow: hidden; }
.ss-scenario-tabs { padding: 16px 0; border-right: 1px solid var(--ss-line); background: #071425; }
.ss-scenario-tabs button { position: relative; width: 100%; min-height: 92px; padding: 18px 26px 18px 31px; display: grid; gap: 7px; align-content: center; color: rgba(223, 237, 248, .58); border: 0; border-bottom: 1px solid rgba(117, 181, 228, .1); background: transparent; text-align: left; cursor: pointer; transition: color .25s ease, background .25s ease; }
.ss-scenario-tabs button::before { content: ""; position: absolute; left: 0; inset-block: 0; width: 3px; opacity: 0; background: linear-gradient(var(--ss-cyan), var(--ss-blue)); transform: scaleY(.45); transition: opacity .25s ease, transform .35s var(--ss-ease); }
.ss-scenario-tabs button span { font-size: 15px; font-weight: 690; }
.ss-scenario-tabs button small { color: rgba(192, 216, 236, .36); font-size: 11px; }
.ss-scenario-tabs button:is(:hover, [aria-selected="true"]) { color: #fff; background: linear-gradient(90deg, rgba(32, 194, 239, .12), rgba(21, 93, 252, .025)); }
.ss-scenario-tabs button[aria-selected="true"]::before { opacity: 1; transform: scaleY(1); }
.ss-scenario-tabs button:focus-visible { outline: 2px solid var(--ss-cyan); outline-offset: -3px; }
.ss-scenario-panels { min-width: 0; }
.ss-scenario-panel { height: 100%; }
.ss-scenario-panel[hidden] { display: none; }
.ss-scenario-panel.is-active { animation: ssPanelIn .5s var(--ss-ease) both; }
.ss-scenario-panel figure { position: relative; height: 100%; min-height: 690px; display: grid; overflow: hidden; background: #040b14; }
.ss-media { position: absolute; inset: 0; display: grid; place-items: center; background: #040b14; }
.ss-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ss-media-interface { padding: clamp(18px, 2vw, 32px); }
.ss-media-interface img { object-fit: contain; }
.ss-scenario-panel figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 8, 16, .06) 35%, rgba(2, 8, 16, .94) 92%), linear-gradient(90deg, rgba(2, 8, 16, .82), transparent 58%); pointer-events: none; }
.ss-scenario-panel figcaption { position: absolute; z-index: 2; left: clamp(32px, 5vw, 75px); right: 42px; bottom: clamp(35px, 5vw, 70px); max-width: 700px; }
.ss-scenario-panel h3 { margin-top: 15px; color: #fff; font-size: clamp(34px, 3.6vw, 57px); line-height: 1.14; letter-spacing: -.04em; }
.ss-scenario-panel figcaption > p:not(.ss-panel-kicker) { margin-top: 18px; max-width: 650px; color: rgba(225, 238, 249, .72); font-size: 15px; line-height: 1.85; }
.ss-scenario-panel figcaption ul { margin-top: 22px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.ss-scenario-panel figcaption li { padding: 6px 10px; color: rgba(225, 240, 251, .7); border: 1px solid rgba(77, 193, 242, .32); border-radius: 3px; background: rgba(3, 15, 28, .46); font-size: 11px; backdrop-filter: blur(8px); }

/* Advantages */
.ss-advantage-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #cbd7e3; }
.ss-advantage-list article { min-height: 310px; padding: 34px clamp(22px, 2.3vw, 39px); border-right: 1px solid #cbd7e3; }
.ss-advantage-list article:first-child { border-left: 1px solid #cbd7e3; }
.ss-advantage-list span { color: #1676d7; font: 720 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.ss-advantage-list h3 { margin-top: 64px; font-size: 25px; }
.ss-advantage-list p { margin-top: 17px; color: #475d73; font-size: 14px; line-height: 1.9; }

/* Value */
.ss-value { position: relative; padding: clamp(95px, 8vw, 135px) 0; background: linear-gradient(105deg, #072240, #0a1834 58%, #171542); overflow: hidden; }
.ss-value::after { content: ""; position: absolute; right: -9vw; bottom: -17vw; width: 45vw; height: 45vw; border: 1px solid rgba(79, 198, 242, .12); border-radius: 50%; box-shadow: 0 0 0 5vw rgba(31, 117, 240, .035), 0 0 0 11vw rgba(31, 117, 240, .025); }
.ss-value-heading { position: relative; z-index: 1; display: grid; grid-template-columns: .38fr 1fr; gap: clamp(48px, 8vw, 136px); align-items: end; }
.ss-value-heading h2 { max-width: 920px; font-size: clamp(40px, 4.5vw, 70px); line-height: 1.15; letter-spacing: -.045em; }
.ss-value-grid { position: relative; z-index: 1; margin-top: clamp(60px, 6vw, 90px); display: grid; grid-template-columns: repeat(4, 1fr); }
.ss-value-grid article { min-height: 240px; padding: 33px clamp(20px, 2.4vw, 38px); border-top: 1px solid rgba(135, 197, 239, .25); border-right: 1px solid rgba(135, 197, 239, .15); }
.ss-value-grid i { display: block; width: 9px; height: 9px; border: 2px solid var(--ss-cyan); border-radius: 50%; box-shadow: 0 0 18px rgba(32, 194, 239, .55); }
.ss-value-grid h3 { margin-top: 47px; font-size: 21px; }
.ss-value-grid p { margin-top: 14px; color: rgba(217, 233, 247, .6); font-size: 13px; line-height: 1.85; }

/* CTA */
.ss-cta { position: relative; min-height: 600px; display: grid; align-items: center; overflow: hidden; background: #030914; }
.ss-cta-media { position: absolute; inset: 0; }
.ss-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 69% center; }
.ss-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 7, 15, .98), rgba(2, 7, 15, .89) 37%, rgba(2, 7, 15, .22) 74%), linear-gradient(180deg, rgba(2,7,15,.18), rgba(2,7,15,.58)); }
.ss-cta-inner { position: relative; z-index: 1; padding-block: 100px; }
.ss-cta-inner h2 { margin-top: 20px; max-width: 760px; font-size: clamp(50px, 5vw, 78px); line-height: 1.08; letter-spacing: -.05em; }
.ss-cta-inner > p:not(.ss-eyebrow) { margin-top: 25px; max-width: 620px; color: var(--ss-muted); font-size: 16px; line-height: 1.9; }
.ss-cta-inner > div { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.ss-phone-link { color: rgba(231, 241, 250, .82) !important; text-underline-offset: 6px; font-size: 13px; }

body[data-locale="en"].ss-page .ss-hero h1,
body[data-locale="en"].ss-page .ss-hero h2,
body[data-locale="en"].ss-page .ss-hero-summary,
body[data-locale="en"].ss-page .ss-pains .ss-heading h2,
body[data-locale="en"].ss-page .ss-scenarios .ss-heading h2,
body[data-locale="en"].ss-page .ss-architecture-heading h2 {
  white-space: normal;
}

body[data-locale="en"].ss-page .ss-hero h1 {
  max-width: 980px;
  font-size: clamp(42px, 4.4vw, 72px);
}

body[data-locale="en"].ss-page .ss-hero h2 { max-width: 920px; }

@keyframes ssHeroBreath { to { transform: scale(1.045); } }
@keyframes ssScrollCue { 0% { transform: translateY(0); } 55%,100% { transform: translateY(200%); } }
@keyframes ssPanelIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .ss-heading > div { grid-template-columns: 1fr; }
  .ss-intro-layout { grid-template-columns: .72fr 1.28fr; gap: 70px; }
  .ss-arch-stage { padding: 25px 18px; }
  .ss-scenario-workbench { grid-template-columns: 260px minmax(0, 1fr); }
  .ss-scenario-tabs button { min-height: 88px; padding-inline: 23px; }
}

@media (max-width: 980px) {
  .ss-container { width: min(100% - 36px, 900px); }
  .ss-hero-copy { max-width: 720px; }
  .ss-hero-shade { background: linear-gradient(90deg, rgba(2,7,16,.97), rgba(2,7,16,.76) 68%, rgba(2,7,16,.42)), linear-gradient(180deg, transparent 55%, rgba(2,7,16,.8)); }
  .ss-heading, .ss-value-heading { grid-template-columns: 1fr; gap: 20px; }
  .ss-pain-grid, .ss-advantage-list, .ss-value-grid { grid-template-columns: repeat(2, 1fr); }
  .ss-intro-layout { grid-template-columns: 1fr; gap: 45px; }
  .ss-arch-grid { grid-template-columns: repeat(2, 1fr); }
  .ss-arch-flow { display: none; }
  .ss-scenario-workbench { grid-template-columns: 1fr; }
  .ss-scenario-tabs { padding: 0; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ss-line); scrollbar-width: none; }
  .ss-scenario-tabs::-webkit-scrollbar { display: none; }
  .ss-scenario-tabs button { min-width: 220px; min-height: 76px; flex: 0 0 auto; }
  .ss-scenario-tabs button::before { inset: auto 0 0; width: auto; height: 3px; transform: scaleX(.45); }
  .ss-scenario-tabs button[aria-selected="true"]::before { transform: scaleX(1); }
  .ss-scenario-panel figure { min-height: 660px; }
}

@media (max-width: 680px) {
  .ss-section { padding: 84px 0; }
  .ss-container { width: calc(100% - 28px); }
  .ss-hero { min-height: 780px; }
  .ss-hero-copy { max-width: none; }
  .ss-hero h1 { font-size: clamp(45px, 13vw, 64px); }
  .ss-hero h2 br { display: none; }
  .ss-scroll-cue { display: none; }
  .ss-heading > div { gap: 20px; }
  .ss-heading h2 { font-size: 44px; }
  .ss-pain-grid, .ss-advantage-list, .ss-value-grid { grid-template-columns: 1fr; }
  .ss-pain, .ss-advantage-list article { min-height: auto; border-left: 1px solid #cbd7e3; border-bottom: 1px solid #cbd7e3; }
  .ss-pain h3, .ss-advantage-list h3 { margin-top: 34px; }
  .ss-principles { grid-template-columns: 1fr; }
  .ss-arch-grid { grid-template-columns: 1fr; }
  .ss-arch-caption { display: none; }
  .ss-scenario-workbench { min-height: 640px; }
  .ss-scenario-panel figure { min-height: 620px; }
  .ss-scenario-panel figcaption { left: 24px; right: 24px; bottom: 30px; }
  .ss-scenario-panel h3 { font-size: 36px; }
  .ss-media-interface { padding: 10px; align-content: start; }
  .ss-media-interface img { height: 62%; }
  .ss-cta-media img { object-position: 58% center; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-hero-media img, .ss-scroll-cue span::after { animation: none; }
  .ss-scenario-panel.is-active { animation: none; }
  .ss-main *, .ss-main *::before, .ss-main *::after { scroll-behavior: auto !important; }
}

/* V0.27.1 — formal public-site composition */
.ss-hero-copy {
  width: 100%;
  max-width: none;
}

.ss-hero h1 {
  margin-top: 0;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(44px, 4.7vw, 76px);
}

.ss-hero h2 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(22px, 2.15vw, 35px);
}

.ss-hero-summary {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(13px, 1.08vw, 16px);
}

.ss-pains .ss-heading,
.ss-scenarios .ss-heading,
.ss-advantages .ss-heading {
  display: block;
}

.ss-pains .ss-heading > div,
.ss-scenarios .ss-heading > div {
  grid-template-columns: minmax(520px, 1fr) minmax(420px, .72fr);
}

.ss-pains .ss-heading h2,
.ss-scenarios .ss-heading h2 {
  white-space: nowrap;
}

.ss-pain-grid {
  gap: 20px;
  border-top: 0;
}

.ss-pain {
  min-height: 320px;
  padding: 38px clamp(24px, 2.2vw, 36px) 34px;
  border: 0 !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(25, 56, 91, .075);
}

.ss-pain:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 58px rgba(25, 56, 91, .12);
}

.ss-pain h3 {
  margin-top: 48px;
}

.ss-architecture {
  background:
    radial-gradient(circle at 88% 18%, rgba(34, 108, 254, .075), transparent 28%),
    #eef3f8;
}

.ss-architecture-heading {
  margin-bottom: clamp(44px, 5vw, 72px);
  text-align: center;
}

.ss-architecture-heading h2 {
  color: var(--ss-paper-text);
  white-space: nowrap;
  font-size: clamp(42px, 4.4vw, 68px);
  line-height: 1.12;
  letter-spacing: -.045em;
}

.ss-architecture-card {
  position: relative;
  min-height: clamp(610px, 47vw, 748px);
  overflow: hidden;
  border: 1px solid rgba(89, 132, 179, .12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(28, 62, 101, .1);
}

.ss-architecture-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 30%, rgba(255,255,255,.28) 46%, transparent 62%);
}

.ss-architecture-copy {
  position: absolute;
  z-index: 2;
  left: clamp(42px, 5vw, 78px);
  top: 50%;
  width: min(34%, 460px);
  transform: translateY(-50%);
}

.ss-architecture-copy h3 {
  color: #0b2239;
  font-size: clamp(30px, 2.7vw, 43px);
  line-height: 1.2;
  letter-spacing: -.035em;
}

.ss-architecture-copy p {
  margin-top: 28px;
  color: #40566c;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 2;
}

.ss-architecture-visual {
  position: absolute;
  inset: 0;
}

.ss-architecture-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
}

.ss-architecture-labels {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 3.2vw, 52px);
  bottom: clamp(24px, 3.2vw, 48px);
  width: min(63%, 880px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-architecture-labels.is-four {
  width: min(72%, 1040px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ss-architecture-labels li {
  min-width: 0;
  padding: 15px 16px 14px;
  border: 1px solid rgba(75, 176, 240, .27);
  border-radius: 8px;
  background: rgba(3, 13, 26, .84);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
}

.ss-architecture-labels b,
.ss-architecture-labels span {
  display: block;
}

.ss-architecture-labels b {
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}

.ss-architecture-labels span {
  margin-top: 6px;
  color: rgba(219, 236, 250, .62);
  font-size: 11px;
  line-height: 1.55;
}

.ss-scenario-panel figure::after {
  background:
    linear-gradient(180deg, rgba(2, 8, 16, .08) 30%, rgba(2, 8, 16, .95) 94%),
    linear-gradient(90deg, rgba(2, 8, 16, .78), transparent 64%);
}

.ss-scenario-panel h3 {
  margin-top: 0;
}

.ss-advantages .ss-heading {
  margin-bottom: clamp(44px, 5vw, 68px);
}

.ss-advantages .ss-heading > div {
  display: block;
}

.ss-advantage-list {
  gap: 20px;
  border-top: 0;
}

.ss-advantage-list article {
  min-height: 270px;
  padding: 38px clamp(24px, 2.3vw, 39px);
  border: 0 !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(25, 56, 91, .075);
  transition: transform .35s var(--ss-ease), box-shadow .35s ease;
}

.ss-advantage-list article:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 58px rgba(25, 56, 91, .12);
}

.ss-advantage-list h3 {
  margin-top: 0;
}

.ss-value-heading {
  display: block;
}

.ss-cta-inner h2 {
  margin-top: 0;
}

@media (max-width: 1180px) {
  .ss-pains .ss-heading > div,
  .ss-scenarios .ss-heading > div {
    grid-template-columns: 1fr;
  }

  .ss-architecture-copy {
    width: 36%;
  }

  .ss-architecture-labels,
  .ss-architecture-labels.is-four {
    right: 24px;
    bottom: 24px;
    width: min(61%, 760px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-architecture-labels li {
    padding: 12px 13px;
  }
}

@media (max-width: 980px) {
  .ss-hero h1,
  .ss-hero h2,
  .ss-hero-summary,
  .ss-pains .ss-heading h2,
  .ss-scenarios .ss-heading h2,
  .ss-architecture-heading h2 {
    white-space: normal;
  }

  .ss-architecture-card {
    min-height: 700px;
  }

  .ss-architecture-card::after {
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 46%, rgba(255,255,255,.16) 72%, transparent);
  }

  .ss-architecture-copy {
    top: 54px;
    right: 54px;
    width: auto;
    transform: none;
  }

  .ss-architecture-visual img {
    object-position: 70% center;
  }

  .ss-architecture-labels {
    left: 34px;
    right: 34px;
    width: auto;
  }

  .ss-architecture-labels.is-four {
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .ss-architecture-card {
    min-height: 820px;
  }

  .ss-architecture-labels {
    grid-template-columns: 1fr;
  }

  .ss-architecture-labels.is-four {
    grid-template-columns: 1fr;
  }
}