@font-face {
  font-family: "Reference Roobert";
  src: url("../assets/roobert-reference.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Reference Roobert";
  src: url("../assets/roobert-medium-reference.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

html { scroll-behavior: smooth; }
.build-page {
  --font: "Reference Roobert", "PingFang SC", "Microsoft YaHei", sans-serif;
  --price-line: #d6d6d1;
  --price-muted: #62635e;
  font-family: var(--font);
  scrollbar-color: #767a74 var(--night);
}
.build-page .visual-shade { background: rgba(8, 9, 11, .4); }
.build-page .menu-links > :is(button,a) > span:first-child { letter-spacing: -.035em; }
.build-page .menu-links small { font-size: 11px; }
.build-page .service-content h2 { letter-spacing: -.04em; }
.build-page .chat-context { letter-spacing: -.03em; }

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.build-width { width: min(1224px, calc(100% - 84px)); margin-inline: auto; }
.build-header {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 32px 42px;
}
.build-header .brand { margin-right: auto; }
.brand-icon { width: 25px; height: 25px; }
.page-location { font-size: 13px; }
.build-header .desktop-actions { gap: 30px; }
.build-hero { min-height: 100svh; padding: 142px 0 86px; }
.build-heading { display: grid; grid-template-columns: 1.6fr 1fr; align-items: end; gap: 64px; }
.build-heading h1 {
  margin: 0;
  font-size: clamp(58px, 6.7vw, 96px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.build-introduction { padding-bottom: 7px; }
.build-introduction p { max-width: 22ch; margin: 0 0 30px; font-size: 17px; line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; }
.text-link .icon { transition: transform 350ms var(--ease); }
.text-link:hover .icon { transform: translateY(3px); }

.pricing-panel {
  overflow: hidden;
  margin-top: 44px;
  padding: 0 24px;
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  scroll-margin-top: 24px;
}
.pricing-heading { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 4px; }
.pricing-heading h2 { margin: 0; font-size: 14px; font-weight: 500; }
.pricing-heading > span { color: var(--price-muted); font-size: 12px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.price-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 36px;
  min-width: 0;
  min-height: 220px;
  padding: 28px 22px 24px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  transition: background-color 300ms ease, color 300ms ease, transform 400ms var(--ease);
}
.price-tier + .price-tier::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 0; width: 1px; background: var(--price-line); transition: opacity 250ms ease; }
.tier-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tier-name { font-size: 14px; line-height: 1.4; }
.price-value { display: inline-flex; align-items: baseline; gap: 5px; font-size: clamp(44px, 4.6vw, 66px); line-height: 1.05; letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.currency { font-size: .42em; letter-spacing: 0; }
.tier-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.tier-action .icon { width: 22px; height: 22px; transition: transform 400ms var(--ease); }
.price-tier:focus-visible { outline: 2px solid currentColor; outline-offset: -8px; }
.price-tier:active { transform: scale(.98); background: var(--ink); color: var(--paper); }
.pricing-note { min-height: 70px; display: flex; align-items: center; margin: 0; padding: 0 4px; color: var(--price-muted); font-size: 13px; }

.build-contact { position: relative; padding: 110px 0 40px; background: var(--night); }
.build-contact > .build-width { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
.build-contact h2 { margin: 0; font-size: clamp(52px, 6vw, 84px); font-weight: 400; line-height: 1.08; letter-spacing: -.04em; }
.contact-orb { width: 112px; height: 112px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); }
.contact-orb .icon { width: 50px; height: 50px; stroke-width: 1; transition: transform 500ms var(--ease); }
.contact-orb:hover .icon { transform: rotate(45deg); }
.build-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 60px; padding-top: 18px; border-top: 1px solid #3a3b3c; } /* taste-skill-ignore: Navigation rule continues the user's selected reference. */
.build-page .mobile-dock .icon { width: 18px; height: 18px; }
.build-page .chat-form button { display: grid; place-items: center; }
.build-page .chat-form button .icon { transform: rotate(-45deg); }
.build-page .chat-content { min-height: 200px; }

@media (hover: hover) and (pointer: fine) {
  .price-tier:hover { background: var(--ink); color: var(--paper); }
  .price-tier:hover::before, .price-tier:hover + .price-tier::before { opacity: 0; }
  .price-tier:hover .tier-action .icon { transform: translate(3px, -3px); }
}

@media (max-width: 1000px) {
  .build-width { width: calc(100% - 64px); }
  .build-heading { gap: 32px; }
  .pricing-panel { padding-inline: 18px; }
  .price-tier { padding-inline: 15px; }
  .price-value { font-size: 42px; }
}

@media (max-width: 700px) {
  .build-width { width: calc(100% - 48px); }
  .build-header { gap: 14px; padding: max(24px, env(safe-area-inset-top)) 24px 18px; }
  .build-header .brand { font-size: 13px; gap: 6px; }
  .build-header .brand-icon { width: 20px; height: 20px; }
  .page-location { font-size: 12px; }
  .build-header .desktop-actions { gap: 0; }
  .build-header .header-consult, .build-header .motion-button { display: none; }
  .build-header .menu-orb { width: 44px; height: 44px; }
  .build-hero { min-height: 100svh; padding: 112px 0 96px; }
  .build-heading { display: block; }
  .build-heading h1 { font-size: clamp(46px, 14vw, 60px); }
  .build-introduction { margin-top: 20px; padding: 0; }
  .build-introduction p { max-width: none; margin: 0; font-size: 14px; line-height: 1.7; }
  .build-introduction .text-link { display: none; }
  .pricing-panel { margin-top: 28px; padding: 0 18px; border-radius: 12px; }
  .pricing-heading { min-height: 56px; padding: 0 3px; }
  .pricing-heading h2 { font-size: 13px; }
  .pricing-grid { display: flex; flex-direction: column; }
  .price-tier { min-height: 96px; flex-direction: row; align-items: center; gap: 18px; padding: 12px 3px; border-radius: 7px; }
  .tier-summary { gap: 5px; }
  .tier-name { font-size: 12px; }
  .price-tier + .price-tier::before { left: 3px; right: 3px; top: 0; bottom: auto; width: auto; height: 1px; }
  .price-value { font-size: 44px; }
  .tier-action { gap: 10px; font-size: 12px; }
  .tier-action .icon { width: 20px; height: 20px; }
  .price-tier:active { transform: scale(.985); }
  .pricing-note { min-height: 50px; padding: 0 3px; font-size: 12px; }
  .build-contact { padding: 64px 0 calc(106px + env(safe-area-inset-bottom)); }
  .build-contact > .build-width { gap: 18px; }
  .build-contact h2 { font-size: 39px; }
  .contact-orb { width: 72px; height: 72px; }
  .contact-orb .icon { width: 35px; height: 35px; }
  .build-footer { margin-top: 30px; padding-top: 16px; }
  .build-footer .motion-button { min-height: 44px; }
}

@media (max-width: 359px) {
  .build-width { width: calc(100% - 40px); }
  .build-header { padding-inline: 20px; gap: 10px; }
  .build-header .brand { font-size: 12px; }
  .page-location { font-size: 11px; }
  .build-heading h1 { font-size: 46px; }
  .pricing-panel { padding-inline: 14px; }
  .price-value { font-size: 44px; }
  .tier-action { gap: 6px; }
  .tier-action .icon { width: 18px; height: 18px; }
  .build-contact h2 { font-size: 32px; }
}

@media (prefers-reduced-motion: no-preference) {
  .build-heading { animation: build-enter 850ms cubic-bezier(.16, 1, .3, 1) both; }
  .pricing-panel { animation: panel-enter 1000ms cubic-bezier(.16, 1, .3, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@keyframes build-enter {
  from { opacity: .65; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes panel-enter {
  from { opacity: .6; transform: translateY(36px) scale(.985); clip-path: inset(0 0 10% round 16px); }
  to { opacity: 1; transform: none; clip-path: inset(0 round 16px); }
}