:root {
  --page-blue: #64e9ff;
  --page-violet: #8b7cff;
  --page-ink: #080b14;
  --page-card: #0f1421;
  --page-line: rgba(191, 239, 255, .13);
  --page-copy: #9aa3b7;
}

body.inner-page {
  color: #f5f8ff;
  background: var(--page-ink);
}

.inner-page header {
  position: fixed;
  background: rgba(8, 11, 20, .78);
  backdrop-filter: blur(18px);
}

.inner-page nav a.active { color: var(--page-blue); }
.inner-page nav { gap: 26px; }
.inner-page main { overflow: hidden; }

.page-hero {
  min-height: 78vh;
  padding: 180px clamp(24px, 7vw, 110px) 100px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 8vw;
  position: relative;
  border-bottom: 1px solid var(--page-line);
}

.page-hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(92, 77, 255, .3), transparent 29%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 76px 76px, 76px 76px;
  mask-image: linear-gradient(#000, transparent 94%);
}

.page-hero-copy, .page-hero-side { position: relative; z-index: 2; }
.page-kicker { font-size: 10px; letter-spacing: 2.2px; color: var(--page-blue); }
.page-title {
  font-size: clamp(56px, 8.4vw, 126px);
  line-height: .88;
  letter-spacing: clamp(-7px, -.55vw, -3px);
  font-weight: 500;
  margin: 30px 0 0;
}

.page-title em { color: var(--page-blue); font-style: normal; }
.page-hero-side { border-left: 1px solid var(--page-line); padding-left: 34px; }
.page-hero-side p { color: var(--page-copy); font-size: 17px; line-height: 1.75; max-width: 490px; }
.page-index { margin-top: 42px; display: flex; gap: 18px; color: #697185; font-size: 10px; letter-spacing: 1.5px; }
.page-index b { color: var(--page-blue); }

.inner-section { padding: 130px clamp(24px, 7vw, 110px); position: relative; }
.inner-section.light { background: #f3f6f8; color: #10131b; }
.inner-section.soft { background: #0b0f19; }
.inner-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; margin-bottom: 75px; }
.inner-head h2 { font-size: clamp(42px, 5.5vw, 78px); line-height: .98; letter-spacing: -4px; font-weight: 500; }
.inner-head h2 em { color: #6654e8; font-style: normal; }
.inner-head > p { color: var(--page-copy); line-height: 1.75; max-width: 540px; margin-left: auto; }
.light .inner-head > p { color: #666d78; }

.value-grid, .service-list, .proof-grid { border-top: 1px solid var(--page-line); }
.value-row {
  display: grid;
  grid-template-columns: 90px .7fr 1.3fr;
  gap: 35px;
  padding: 36px 0;
  border-bottom: 1px solid var(--page-line);
  align-items: start;
}
.value-row > span { color: var(--page-blue); font-size: 10px; letter-spacing: 1.5px; }
.value-row h3 { font-size: 25px; font-weight: 500; }
.value-row p { color: var(--page-copy); line-height: 1.7; max-width: 650px; }

.metric-band { display: grid; grid-template-columns: repeat(4, 1fr); }
.metric-band > div { padding: 45px 30px; border: 1px solid rgba(16, 19, 27, .12); border-left: 0; }
.metric-band strong { display: block; font-size: clamp(50px, 6vw, 84px); letter-spacing: -5px; font-weight: 500; }
.metric-band span { color: #727985; font-size: 11px; }

.service-detail {
  display: grid;
  grid-template-columns: 80px .75fr 1.15fr auto;
  gap: 35px;
  padding: 45px 0;
  align-items: start;
  border-bottom: 1px solid var(--page-line);
}
.service-detail > span { color: var(--page-blue); font-size: 11px; }
.service-detail h2 { font-size: clamp(30px, 3.2vw, 48px); font-weight: 500; letter-spacing: -2px; }
.service-detail p { color: var(--page-copy); line-height: 1.7; max-width: 590px; }
.service-detail ul { list-style: none; padding: 0; margin: 0; min-width: 170px; }
.service-detail li { color: #c2c8d5; font-size: 11px; padding: 7px 0; }
.service-detail li:before { content: '↗'; color: var(--page-blue); margin-right: 9px; }

.process-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; }
.process-strip article { border-left: 1px solid rgba(16,19,27,.14); padding: 0 28px 30px; min-height: 220px; }
.process-strip span { color: #6654e8; font-size: 11px; }
.process-strip h3 { font-size: 24px; margin: 50px 0 13px; }
.process-strip p { color: #6e7480; line-height: 1.6; font-size: 13px; }

.case-list { display: grid; gap: 24px; }
.case-card {
  --case: #755ddb;
  min-height: 520px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--page-line);
  border-radius: 16px;
  background: linear-gradient(125deg, var(--case), #111522 62%);
}
.case-card:nth-child(2) { --case: #be4e27; }
.case-card:nth-child(3) { --case: #1873a6; }
.case-card:nth-child(4) { --case: #26865c; }
.case-copy { padding: clamp(35px, 5vw, 70px); z-index: 2; }
.case-copy > span { font-size: 9px; letter-spacing: 2px; color: rgba(255,255,255,.65); }
.case-copy h2 { font-size: clamp(44px, 5vw, 75px); letter-spacing: -4px; font-weight: 500; margin: 55px 0 18px; }
.case-copy p { color: rgba(255,255,255,.7); line-height: 1.7; }
.case-copy a { display: inline-block; margin-top: 30px; font-size: 12px; border-bottom: 1px solid; padding-bottom: 6px; }
.case-art { margin: 50px 50px 0 0; border-radius: 12px 12px 0 0; border: 1px solid rgba(255,255,255,.3); background: #0d111d; transform: rotate(-3deg); position: relative; overflow: hidden; }
.case-art:before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, white, var(--case) 30%, #111522 68%); right: -40px; bottom: -35px; box-shadow: 0 0 90px var(--case); }
.case-art strong { position: absolute; top: 25%; left: 9%; z-index: 2; font-size: clamp(30px, 4vw, 58px); line-height: 1; font-weight: 500; letter-spacing: -3px; }
.case-art small { position: absolute; top: 28px; left: 28px; letter-spacing: 2px; }
.case-art.has-screenshot:before { display: none; }
.case-art.has-screenshot { background: #fff; }
.case-art.has-screenshot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; }
.contact-intro h2 { font-size: clamp(46px, 6vw, 82px); font-weight: 500; letter-spacing: -5px; line-height: 1; }
.contact-intro h2 em { color: var(--page-blue); font-style: normal; }
.contact-details { margin-top: 65px; display: grid; gap: 22px; }
.contact-details a, .contact-details span { color: #c1c8d6; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.contact-details b { display: block; color: #fff; font-size: 10px; letter-spacing: 1.7px; margin-bottom: 9px; }
.project-form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 22px; }
.field { display: grid; gap: 10px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #71798b; font-size: 9px; letter-spacing: 1.6px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--page-line);
  background: transparent;
  color: #fff;
  padding: 13px 0;
  outline: none;
  font: inherit;
}
.field select option { color: #111; }
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--page-blue); }
.form-submit { grid-column: 1 / -1; border: 0; background: var(--page-blue); color: #071016; padding: 17px 22px; font-weight: 700; cursor: pointer; justify-self: start; }
.form-note { grid-column: 1 / -1; color: #6f7788; font-size: 10px; }

.faq { max-width: 920px; margin-left: auto; }
.faq details { border-top: 1px solid var(--page-line); padding: 25px 0; }
.faq details:last-child { border-bottom: 1px solid var(--page-line); }
.faq summary { cursor: pointer; font-size: 18px; list-style: none; display: flex; justify-content: space-between; }
.faq summary:after { content: '+'; color: var(--page-blue); }
.faq details[open] summary:after { content: '−'; }
.faq p { color: var(--page-copy); line-height: 1.7; max-width: 700px; padding-top: 20px; }

.process-roadmap { position: relative; }
.process-roadmap:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(var(--page-blue), var(--page-violet), transparent);
}
.roadmap-step {
  min-height: 440px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9vw;
  align-items: center;
  position: relative;
}
.roadmap-step:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 2px solid var(--page-blue);
  border-radius: 50%;
  background: var(--page-ink);
  box-shadow: 0 0 25px var(--page-blue);
  transform: translate(-50%, -50%);
}
.roadmap-step:nth-child(even) .roadmap-copy { grid-column: 2; }
.roadmap-step:nth-child(even) .roadmap-output { grid-column: 1; grid-row: 1; }
.roadmap-copy { padding: 55px 0; }
.roadmap-copy > span { color: var(--page-blue); font-size: 10px; letter-spacing: 2px; }
.roadmap-copy h2 { font-size: clamp(47px, 6vw, 82px); font-weight: 500; letter-spacing: -5px; margin: 28px 0; }
.roadmap-copy p { color: var(--page-copy); line-height: 1.75; max-width: 520px; }
.roadmap-output {
  border: 1px solid var(--page-line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(139,124,255,.11), rgba(100,233,255,.025));
  padding: 34px;
}
.roadmap-output > span { color: #656f84; font-size: 9px; letter-spacing: 1.8px; }
.roadmap-output ul { list-style: none; padding: 0; margin: 26px 0 0; }
.roadmap-output li { padding: 14px 0; border-top: 1px solid var(--page-line); color: #c4cad6; font-size: 13px; }
.roadmap-output li:before { content: '✓'; color: var(--page-blue); margin-right: 12px; }

.collab-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(16,19,27,.14); }
.collab-grid article { padding: 35px 35px 35px 0; border-right: 1px solid rgba(16,19,27,.14); }
.collab-grid article:not(:first-child) { padding-left: 35px; }
.collab-grid span { color: #6654e8; font-size: 10px; }
.collab-grid h3 { font-size: 25px; font-weight: 500; margin: 46px 0 17px; }
.collab-grid p { color: #6e7480; line-height: 1.7; font-size: 13px; }

.page-cta { padding: 130px 24px; text-align: center; position: relative; }
.page-cta:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50%, rgba(100,233,255,.12), transparent 35%); }
.page-cta h2 { position: relative; font-size: clamp(48px, 7vw, 98px); letter-spacing: -6px; line-height: 1; font-weight: 500; margin-bottom: 42px; }
.page-cta h2 em { color: var(--page-blue); font-style: normal; }
.page-cta a { position: relative; }

.inner-page footer { background: #070a12; }
.page-reveal { opacity: 0; transform: translateY(28px); transition: .7s ease; }
.page-reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .page-hero, .inner-head, .contact-layout { grid-template-columns: 1fr; }
  .page-hero { min-height: 720px; align-content: end; }
  .page-hero-side { border-left: 0; border-top: 1px solid var(--page-line); padding: 28px 0 0; }
  .value-row { grid-template-columns: 60px 1fr; }
  .value-row p { grid-column: 2; }
  .service-detail { grid-template-columns: 55px 1fr; }
  .service-detail p, .service-detail ul { grid-column: 2; }
  .metric-band, .process-strip { grid-template-columns: repeat(2, 1fr); }
  .case-card { grid-template-columns: 1fr; }
  .case-art { min-height: 330px; margin: 0 30px; }
  .process-roadmap:before { left: 15px; }
  .roadmap-step { grid-template-columns: 1fr; gap: 24px; padding: 55px 0 55px 55px; }
  .roadmap-step:before { left: 15px; }
  .roadmap-step:nth-child(even) .roadmap-copy, .roadmap-step:nth-child(even) .roadmap-output { grid-column: 1; grid-row: auto; }
  .roadmap-copy { padding: 0; }
  .collab-grid { grid-template-columns: 1fr; }
  .collab-grid article, .collab-grid article:not(:first-child) { border-right: 0; border-bottom: 1px solid rgba(16,19,27,.14); padding: 30px 0; }
}

@media (max-width: 600px) {
  .inner-page header { position: fixed; }
  .page-hero { padding-top: 140px; min-height: 680px; }
  .page-title { font-size: 58px; letter-spacing: -4px; }
  .inner-section { padding-top: 90px; padding-bottom: 90px; }
  .inner-head h2, .contact-intro h2 { letter-spacing: -3px; }
  .metric-band { grid-template-columns: 1fr 1fr; }
  .metric-band > div { padding: 30px 15px; }
  .process-strip { grid-template-columns: 1fr; }
  .process-strip article { border-bottom: 1px solid rgba(16,19,27,.14); }
  .value-row { grid-template-columns: 40px 1fr; gap: 15px; }
  .service-detail { gap: 18px; }
  .project-form { grid-template-columns: 1fr; }
  .field, .field.full, .form-submit, .form-note { grid-column: 1; }
  .case-card { min-height: 690px; }
  .case-art { min-height: 300px; margin: 0 18px; }
  .page-cta h2 { letter-spacing: -3px; }
}
.form-trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{display:none;grid-column:1/-1;margin:16px 0 0;font-size:13px;line-height:1.5}
.form-status.success,.form-status.error{display:block}
.form-status.success{color:#257a4b}
.form-status.error{color:#c53f3f}
.form-submit:disabled{cursor:wait;opacity:.65}