/* A purposeful development scene, separate from readable hero content. */
.navy-theme .premium-hero { padding: 64px 0 48px; }
.builder-hero-layout { display: grid; grid-template-columns: 1fr 1.12fr; align-items: center; gap: 40px; text-align: left; }
.navy-theme .builder-hero-copy .hero-title { font-size: clamp(2.6rem, 4.3vw, 4.5rem); line-height: 1.07; margin-bottom: 22px; max-width: 100%; }
.builder-hero-copy .hero-tag { margin-bottom: 22px; }
.builder-hero-copy .hero-subtitle { margin: 0 0 26px; padding: 0; font-size: 16px; max-width: 500px; }
.builder-hero-copy .hero-btns, .builder-hero-copy .contact-actions { justify-content: flex-start; gap: 12px; }
.builder-hero-copy .hero-btns { flex-wrap: wrap; }
.builder-hero-copy .contact-actions { margin-top: 18px; }
.builder-hero-copy .contact-action { padding: 11px 15px; min-height: 54px; }
.builder-hero-copy .contact-action span { font-size: 13px; }
.builder-hero-copy .contact-action small { font-size: 11px; }
.web-builder { margin: 0; width: 100%; min-width: 0; }
.builder-stage { position: relative; width: 100%; aspect-ratio: 1.12; isolation: isolate; }
.builder-stage::before { content: ''; position: absolute; inset: 9% -3% 0; border-radius: 50%; background: radial-gradient(ellipse, #c6a2ee38, transparent 68%); z-index: -1; }
.builder-window { position: absolute; top: 8%; left: 1%; width: 92%; border: 1px solid #ffffff70; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 22px 55px #240b473d; transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); }
.builder-toolbar { height: 32px; padding: 0 12px; display: flex; gap: 4px; align-items: center; background: #eee5f7; color: #6c4e89; }
.builder-toolbar > span { width: 5px; height: 5px; border-radius: 50%; background: #b899d6; }
.builder-toolbar > div { margin: 0 auto; background: #fff; border-radius: 5px; width: 61%; text-align: center; font-size: 8px; padding: 2px; }
.builder-toolbar > b { font-size: 11px; }
.builder-canvas { padding: 15px; min-height: 275px; }
.build-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 15px; color: #492078; font-size: 7px; }
.build-nav b { font-size: 9px; letter-spacing: .04em; }
.build-nav b span { margin-left: 6px; color: #915bcc; }
.build-banner { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 20px; background: #eee5f7; border-radius: 8px; color: #321452; }
.build-eyebrow { font-size: 6px; font-weight: 800; letter-spacing: .13em; }
.build-banner strong { position: relative; z-index: 1; font-size: clamp(15px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.04em; }
.build-copy { font-size: 7px; }
.build-demo-button { background: #5f259f; color: #fff; border-radius: 5px; padding: 6px 9px; font-size: 6px; align-self: flex-start; }
.build-art { position: absolute; right: 4%; top: 8%; font-size: clamp(60px, 8vw, 115px); line-height: 1; color: #b68bdc; transform: rotate(12deg); }
.build-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.build-tile { border: 1px solid #e7d9f3; border-radius: 7px; padding: 10px 7px; color: #492078; }
.build-tile i { display: block; font: 800 9px monospace; color: #9768c3; margin-bottom: 7px; }
.build-tile b { display: block; font-size: 6px; margin-bottom: 7px; }
.build-tile > span { display: block; width: 90%; height: 3px; background: #eee5f7; border-radius: 3px; margin-top: 4px; }
.build-tile > span:last-child { width: 65%; }
.builder-code { position: absolute; left: -3%; bottom: 8%; width: 48%; z-index: 3; background: #28133f; border: 1px solid #bb98e0; border-radius: 10px; box-shadow: 0 12px 32px #260c4840; overflow: hidden; }
.builder-code > div { padding: 8px 10px; border-bottom: 1px solid #ffffff20; font-size: 6px; font-weight: 800; letter-spacing: .08em; color: #eee5f7; }
.builder-code > div span { color: #c1a0e4; margin-right: 6px; }
.builder-code code { display: block; color: #dfcdec; font: 9px/1.8 monospace; padding: 10px 13px; white-space: nowrap; }
.builder-code code span { color: #c49fea; }
.builder-code em { color: #a6ead9; font-style: normal; }
.builder-code > i { display: block; height: 3px; background: #c49fea; transform-origin: left; animation: builder-progress 12s linear infinite; }
.builder-phone { position: absolute; width: 22%; height: 48%; right: 0; bottom: 6%; z-index: 3; border: 5px solid #31184e; border-radius: 19px; background: #fff; padding: 14px 7px 10px; color: #492078; box-shadow: 0 15px 25px #260c4840; animation: builder-phone 12s ease-in-out infinite; }
.builder-phone > div { position: absolute; top: 4px; width: 25%; height: 3px; left: 37%; background: #31184e; border-radius: 4px; }
.builder-phone b { font-size: 5px; display: block; margin-bottom: 12px; }
.phone-title { display: block; font-size: 10px; font-weight: 800; line-height: 1.2; }
.phone-block { display: block; background: #dfcdec; height: 30%; margin: 8px 0; border-radius: 5px; }
.phone-line { display: block; background: #eee5f7; height: 3px; margin-top: 4px; width: 90%; }
.phone-cta { display: block; margin-top: 8px; background: #5f259f; border-radius: 3px; height: 10px; width: 65%; }
.builder-assistant { position: absolute; width: 43%; height: 80%; right: 10%; bottom: 4%; z-index: 4; }
.builder-assistant img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 15px 14px #220d4338); transform-origin: 50% 85%; animation: builder-assist 12s ease-in-out infinite; }
.builder-tool { position: absolute; left: -1%; top: 27%; padding: 5px 8px; background: #eee5f7; color: #5f259f; border: 1px solid #fff; border-radius: 8px; font: 800 13px monospace; animation: builder-tool 12s ease-in-out infinite; }
.builder-pointer { position: absolute; z-index: 5; top: 29%; left: 40%; color: #5f259f; font-size: 23px; line-height: 1; filter: drop-shadow(0 1px 1px #fff); animation: builder-pointer 12s ease-in-out infinite; }
.builder-pointer small { display: block; margin: -2px 0 0 16px; white-space: nowrap; font: 700 7px/1.4 sans-serif; padding: 4px 6px; border-radius: 4px; background: #5f259f; color: #fff; }
.builder-complete { position: absolute; top: 0; right: 2%; border: 1px solid #fff8; background: #eee5f7; color: #492078; border-radius: 50px; padding: 7px 13px; font-size: 9px; font-weight: 800; animation: builder-complete 12s ease-in-out infinite; }
.builder-process { display: flex; align-items: center; justify-content: center; gap: 13px; color: #dfcdec; font-size: 10px; margin-top: 22px; }
.builder-process b { color: #fff; margin-left: 4px; font-size: 11px; }
.builder-process i { width: 25px; height: 1px; background: #fff5; }
.build-piece { animation: builder-piece 12s ease-in-out infinite; --arrive: 0px; }
.build-banner { animation-name: builder-banner; }
.build-tile { animation-name: builder-tiles; }
.build-tile:nth-child(2) { animation-delay: .25s; }
.build-tile:nth-child(3) { animation-delay: .5s; }
@keyframes builder-piece { 0%,5% { opacity: 0; transform: translateY(-10px); } 12%,90% { opacity: 1; transform: none; } 98%,100% { opacity: 0; transform: none; } }
@keyframes builder-banner { 0%,16% { opacity: 0; transform: translateY(18px) scale(.97); } 28%,90% { opacity: 1; transform: none; } 98%,100% { opacity: 0; transform: none; } }
@keyframes builder-tiles { 0%,32% { opacity: 0; transform: translateY(20px); } 44%,88% { opacity: 1; transform: none; } 97%,100% { opacity: 0; transform: none; } }
@keyframes builder-phone { 0%,52% { opacity: 0; transform: translateY(18px); } 65%,90% { opacity: 1; transform: none; } 98%,100% { opacity: 0; transform: none; } }
@keyframes builder-complete { 0%,67% { opacity: 0; transform: translateY(6px); } 75%,90% { opacity: 1; transform: none; } 98%,100% { opacity: 0; transform: none; } }
@keyframes builder-progress { 0% { transform: scaleX(.03); } 72%,90% { transform: scaleX(1); } 100% { transform: scaleX(.03); } }
@keyframes builder-pointer { 0%,10% { translate: -20px -30px; } 28% { translate: 5px 20px; } 45% { translate: 60px 100px; } 60%,90% { translate: 100px 120px; opacity: 1; } 97%,100% { opacity: 0; } }
@keyframes builder-assist { 0%,100% { transform: rotate(-.7deg); } 30%,55% { transform: rotate(.8deg) translateY(-2px); } 75% { transform: rotate(-.4deg); } }
@keyframes builder-tool { 0%,100% { transform: rotate(-8deg); } 40%,60% { transform: translate(-10px,-8px) rotate(7deg); } }
.motion-paused .web-builder *, .motion-paused .web-builder *::after { animation-play-state: paused !important; }
@media (max-width: 991px) {
  .builder-hero-layout { grid-template-columns: 1fr; gap: 32px; }
  .builder-hero-copy { text-align: center; }
  .builder-hero-copy .hero-subtitle { margin-inline: auto; }
  .builder-hero-copy .hero-btns, .builder-hero-copy .contact-actions { justify-content: center; }
  .web-builder { width: min(540px, 100%); margin: 0 auto; }
  .build-banner strong { font-size: 24px; }
  .build-art { font-size: 100px; }
}
@media (max-width: 575px) {
  .navy-theme .premium-hero { padding-top: 58px; }
  .builder-hero-layout { gap: 24px; }
  .builder-canvas { min-height: 220px; padding: 10px; }
  .build-banner { padding: 14px; gap: 6px; }
  .build-banner strong { font-size: 18px; }
  .build-art { font-size: 75px; }
  .build-nav { padding-bottom: 10px; }
  .builder-stage { aspect-ratio: .95; }
  .builder-code { left: 0; bottom: 3%; width: 50%; }
  .builder-code code { font-size: 7px; padding: 8px; }
  .builder-assistant { right: 10%; bottom: 4%; width: 43%; height: 68%; }
  .builder-phone { width: 24%; height: 43%; bottom: 3%; }
  .builder-process { gap: 8px; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-builder *, .web-builder *::after { animation: none !important; }
  .builder-pointer { display: none; }
}