/* BuildWise Digital - built from brand/website/design_handoff_buildwise_premium (values verbatim) */
html,body{margin:0;padding:0;background:#0b0c0f;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}a:hover{color:#7c9cff}
*{box-sizing:border-box}
input,textarea,button{font-family:inherit}
body{min-height:100vh;color:#f5f5f7;letter-spacing:-0.01em;padding-top:env(safe-area-inset-top)}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbSpinR{to{transform:rotate(-360deg)}}
@keyframes wisp{0%,100%{transform:translate(-8%,-6%) scale(1) rotate(0deg)}33%{transform:translate(10%,8%) scale(1.15) rotate(120deg)}66%{transform:translate(-6%,12%) scale(.9) rotate(240deg)}}
@keyframes wisp2{0%,100%{transform:translate(10%,6%) scale(1.1)}50%{transform:translate(-12%,-10%) scale(.85)}}
@keyframes ringA{from{transform:rotateX(74deg) rotateZ(0deg)}to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes ringB{from{transform:rotateX(60deg) rotateY(35deg) rotateZ(0deg)}to{transform:rotateX(60deg) rotateY(35deg) rotateZ(-360deg)}}
@keyframes ringC{from{transform:rotateY(72deg) rotateZ(0deg)}to{transform:rotateY(72deg) rotateZ(360deg)}}
@keyframes pulse{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes drift{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-46%,-54%) scale(1.12)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes dots{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* service-card art: looping motion in the same language as the hero */
@keyframes cardMsg{0%{opacity:0;transform:translateY(10px) scale(.96)}10%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(4px) scale(.98)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes avatarPulse{0%,100%{transform:scale(1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5),0 0 0 0 rgba(79,124,255,0.45)}50%{transform:scale(1.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5),0 0 0 8px rgba(79,124,255,0)}}
@keyframes drop{0%{transform:translate(-50%,-22px);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translate(-50%,12px);opacity:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes grow{0%{transform:scaleY(.12)}40%,70%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
@keyframes tick{0%,35%{opacity:0;transform:translateY(3px)}50%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes count{0%,35%{opacity:.35}50%,100%{opacity:1}}
.art-msg{animation:cardMsg 6s cubic-bezier(.2,.8,.2,1) infinite}
.art-avatar{animation:avatarPulse 2.4s ease-in-out infinite}
.art-line{background:linear-gradient(90deg,#dfe2ea 0%,#f3f4f8 50%,#dfe2ea 100%);background-size:200% 100%;animation:shimmer 2.6s linear infinite}
.art-drop{animation:drop 1.8s ease-in-out infinite}
.art-blink{animation:blink 1.6s ease-in-out infinite}
.art-bar{transform-origin:bottom;animation:grow 5.2s ease-in-out infinite}
.art-tick{animation:tick 5.2s ease-in-out infinite}
.art-count{animation:count 5.2s ease-in-out infinite}

/* nav / footer glass mark */
.mark{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,0.35),rgba(255,255,255,0.04) 30%,rgba(79,124,255,0.25) 70%,rgba(139,92,246,0.35) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35),inset -4px -5px 8px rgba(79,124,255,0.35),0 4px 14px rgba(79,124,255,0.35);font-size:9.5px;font-weight:800;letter-spacing:0.02em;color:#fff;text-shadow:0 0 8px rgba(157,180,255,0.9)}
.mark-sheen{position:absolute;left:22%;top:14%;width:34%;height:18%;border-radius:50%;background:rgba(255,255,255,0.85);filter:blur(1.5px);transform:rotate(-28deg)}

/* hover / focus states (were style-hover / style-focus in the prototype) */
.nl{padding:9px 13px;border-radius:999px;font-size:13px;font-weight:500;color:rgba(245,245,247,0.72);background:transparent;transition:background .2s}
.nl:hover,.nl.active{background:rgba(255,255,255,0.1);color:#fff}
.pill-white{background:#f5f5f7;color:#0b0c0f}.pill-white:hover{background:#4f7cff;color:#fff}
.pill-blue{background:#4f7cff;color:#fff}.pill-blue:hover{background:#6b90ff;color:#fff}
.pill-ghost{border:1px solid rgba(255,255,255,0.18);color:#f5f5f7}.pill-ghost:hover{background:rgba(255,255,255,0.08);color:#fff}
.card-lift{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card-lift:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,0.12);color:#0b0c0f}
.art-lift{transition:transform .35s cubic-bezier(.2,.8,.2,1)}.art-lift:hover{transform:translateY(-6px)}
.plan-cta:hover{opacity:.9}
.field{min-height:50px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:#f5f5f7;font-size:16px;outline:none;width:100%}
.field:focus{border-color:#4f7cff}
textarea.field{padding:14px 16px;resize:vertical}
.submit{margin-top:6px;min-height:52px;padding:0 20px;border-radius:999px;border:0;background:#4f7cff;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.submit:hover{background:#6b90ff}
.link-blue:hover{color:#7c9cff}

/* responsive switches (were JS width checks in the prototype) */
.nav-wide{display:flex;align-items:center;gap:16px}
.nav-burger{display:none}
.menu{display:none}
.menu.open{display:grid}
@media (max-width:879px){
  .nav-wide{display:none}
  .nav-burger{display:grid}
}
.hero-text{text-align:left}
.hero-p{margin-inline:0}
.hero-cta{justify-content:flex-start}
@media (max-width:959px){
  .hero-text{text-align:center}
  .hero-p{margin-inline:auto}
  .hero-cta{justify-content:center}
}
.approach-row{grid-template-columns:80px minmax(0,1fr) minmax(0,1.4fr)}
@media (max-width:639px){
  /* keep the hero answer bubble clear of the assistant launcher (fixed bottom-right, 60px + 20px margin) */
  .chat-a-wrap{right:84px !important;max-width:min(60%,300px) !important}
  /* the assistant launcher is fixed bottom-right; keep the form's Send button out from under it */
  #contactForm{padding-bottom:96px !important}
  .approach-row{grid-template-columns:56px minmax(0,1fr)}
  .approach-body{grid-column:2}
}
.burger-bar{display:block;width:18px;height:1.5px;background:#f5f5f7;transform:none;transition:transform .25s}
.nav-burger.open .b1{transform:translateY(3.5px) rotate(45deg)}
.nav-burger.open .b2{transform:translateY(-3.5px) rotate(-45deg)}
.hidden{display:none !important}
.fchip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:rgba(245,245,247,0.8);font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.fchip:hover{background:rgba(255,255,255,0.1);color:#fff}
.fchip.active{background:#f5f5f7;color:#0b0c0f;border-color:#f5f5f7}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-play-state:paused !important;transition:none !important}
}