.developer-page { color: var(--ink); background: var(--paper); }

.developer-hero {
  position: relative;
  display: grid;
  min-height: min(760px, calc(100svh - 70px));
  align-items: center;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 78% 45%, rgba(79, 157, 167, .18), transparent 31%),
    linear-gradient(135deg, #101a1f 0%, #0a1114 68%);
}

.developer-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 72px 72px;
}

.developer-hero-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--shell);
  grid-template-columns: minmax(0, 1fr) minmax(430px, .72fr);
  gap: clamp(55px, 8vw, 125px);
  align-items: center;
  padding: 92px 0 105px;
  margin-inline: auto;
}

.developer-hero h1 { max-width: 850px; margin: 0 0 29px; font-size: clamp(68px, 8.2vw, 124px); line-height: .82; }
.developer-hero h1 em { color: var(--orange); font-style: normal; }
.developer-hero-copy > p:last-of-type { max-width: 720px; margin: 0; color: #c4ced1; font-size: 18px; line-height: 1.7; }
.developer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.developer-actions .action { margin: 0; }

.contract-visual { position: relative; padding: 26px; border: 1px solid var(--line-dark); background: rgba(12, 22, 26, .8); box-shadow: 18px 18px 0 rgba(0, 0, 0, .2); }
.contract-file,
.contract-objects > div { padding: 21px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .035); }
.contract-file span,
.contract-objects span,
.contract-state span { display: block; margin-bottom: 11px; color: #8fa0a5; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
.contract-file b,
.contract-objects b { display: block; color: var(--white); font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1; text-transform: uppercase; }
.contract-file code,
.contract-objects code { display: block; margin-top: 10px; color: var(--cyan); font-size: 12px; }
.contract-line { display: grid; height: 46px; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-inline: 30px; }
.contract-line i { position: relative; border-left: 1px solid rgba(123, 202, 205, .42); }
.contract-line i::after { content: ""; position: absolute; bottom: -1px; left: -4px; width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; }
.contract-objects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contract-objects b { font-size: 22px; }
.contract-state { display: grid; grid-template-columns: 9px 1fr; gap: 5px 12px; align-items: center; padding-top: 22px; }
.contract-state i { width: 9px; height: 9px; grid-row: 1 / 3; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 6px rgba(222, 103, 58, .1); }
.contract-state span { margin: 0; }
.contract-state b { color: #d4dcde; font-family: var(--mono); font-size: 12px; }

.developer-section { padding: 110px 0; }
.developer-section.is-dark { color: var(--white); background: #172126; }
.developer-shell { width: var(--narrow); margin-inline: auto; }
.developer-heading { display: grid; grid-template-columns: minmax(0, .95fr) minmax(350px, .52fr); gap: 72px; align-items: end; margin-bottom: 55px; }
.developer-heading h2 { font-size: clamp(52px, 6vw, 86px); }
.developer-heading > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.is-dark .developer-heading > p { color: #a7b3b6; }

.artifact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.artifact-grid article { display: flex; min-width: 0; min-height: 385px; flex-direction: column; padding: 29px 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.artifact-type { color: var(--orange-soft); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; }
.artifact-grid h3 { margin: 60px 0 14px; font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1; text-transform: uppercase; }
.artifact-grid p { margin: 0 0 30px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.artifact-grid a { display: flex; gap: 15px; align-items: center; justify-content: space-between; padding-top: 17px; margin-top: auto; color: var(--ink); border-top: 1px solid var(--line); text-decoration: none; }
.artifact-grid a code { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.artifact-grid a b { color: var(--orange-soft); font-size: 19px; }
.artifact-grid a:hover { color: var(--orange-soft); }

.example-list { border-top: 1px solid var(--line-dark); }
.example-list article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .5fr); gap: 45px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line-dark); }
.example-list article > div { display: grid; grid-template-columns: 145px minmax(230px, .45fr) minmax(260px, 1fr); gap: 26px; align-items: center; }
.example-list span { color: var(--orange); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; }
.example-list h3 { margin: 0; font-family: var(--display); font-size: 30px; font-weight: 600; text-transform: uppercase; }
.example-list p { margin: 0; color: #a7b3b6; font-size: 13px; line-height: 1.65; }
.example-list a { justify-self: end; color: var(--cyan); font-family: var(--mono); font-size: 12px; text-decoration: none; overflow-wrap: anywhere; }
.example-list a:hover { color: var(--white); }

.proposal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.proposal-grid article { min-height: 265px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proposal-grid span { color: var(--orange-soft); font-family: var(--mono); font-size: 11px; }
.proposal-grid h3 { margin: 47px 0 12px; font-family: var(--display); font-size: 31px; font-weight: 600; text-transform: uppercase; }
.proposal-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.proposal-grid a { color: inherit; }
.preview-boundary { display: grid; grid-template-columns: minmax(300px, .65fr) minmax(350px, 1fr); gap: 60px; align-items: end; padding: 32px; margin-top: 35px; color: var(--white); background: var(--night); }
.preview-boundary span { color: var(--orange); font-family: var(--mono); font-size: 11px; }
.preview-boundary h3 { margin: 13px 0 0; font-family: var(--display); font-size: 34px; font-weight: 600; text-transform: uppercase; }
.preview-boundary p { margin: 0; color: #aab5b8; font-size: 14px; line-height: 1.7; }

.developer-cta { display: flex; width: var(--narrow); gap: 50px; align-items: end; justify-content: space-between; padding: 75px 0; margin-inline: auto; }
.developer-cta h2 { max-width: 850px; font-size: clamp(47px, 5vw, 76px); }
.developer-cta p:last-child { max-width: 720px; margin-bottom: 0; color: var(--muted); line-height: 1.7; }
.developer-cta .action { flex: 0 0 auto; margin: 0; color: var(--night); background: var(--orange); }

@media (max-width: 1000px) {
  .developer-hero-shell { grid-template-columns: 1fr; }
  .contract-visual { width: min(650px, 100%); }
  .developer-heading { grid-template-columns: 1fr; gap: 25px; align-items: start; }
  .artifact-grid { grid-template-columns: 1fr; }
  .artifact-grid article { min-height: 0; }
  .artifact-grid h3 { margin-top: 34px; }
  .example-list article { grid-template-columns: 1fr; gap: 18px; }
  .example-list article > div { grid-template-columns: 125px minmax(200px, .5fr) 1fr; }
  .example-list a { justify-self: start; }
}

@media (max-width: 680px) {
  .developer-hero { min-height: auto; }
  .developer-hero-shell { gap: 48px; padding: 76px 0 85px; }
  .developer-hero h1 { font-size: clamp(58px, 18vw, 85px); }
  .developer-hero-copy > p:last-of-type { font-size: 15px; }
  .contract-visual { padding: 15px; box-shadow: 9px 9px 0 rgba(0, 0, 0, .2); }
  .contract-objects { grid-template-columns: 1fr; }
  .contract-line { grid-template-columns: repeat(2, 1fr); }
  .contract-line i:last-child { display: none; }
  .developer-section { padding: 80px 0; }
  .example-list article > div { grid-template-columns: 1fr; gap: 11px; }
  .proposal-grid { grid-template-columns: 1fr; }
  .proposal-grid article { min-height: 0; }
  .proposal-grid h3 { margin-top: 30px; }
  .preview-boundary { grid-template-columns: 1fr; gap: 25px; padding: 24px; }
  .developer-cta { align-items: flex-start; flex-direction: column; padding: 65px 0; }
}