/* BoltWeb — high-converting service page */
.page-bw{--bw-teal:#2DD4BF;--bw-glow:rgba(243,112,33,.35)}
.bw-sticky{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.bw-sticky a{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;font-weight:700;font-size:.9rem;text-decoration:none;box-shadow:0 12px 32px -12px rgba(0,0,0,.55);transition:transform .15s,filter .15s}
.bw-sticky a:hover{transform:translateY(-2px);filter:brightness(1.05)}
.bw-sticky .bw-audit{background:var(--orange,#F37021);color:#fff}
.bw-sticky .bw-wa{background:#25D366;color:#fff}
.bw-sticky .bw-audit svg,.bw-sticky .bw-wa svg{width:18px;height:18px;flex:none}
@media(max-width:640px){.bw-sticky{right:10px;bottom:10px;left:10px;align-items:stretch}.bw-sticky a{justify-content:center}}

/* Cinematic hero */
.bw-hero{position:relative;overflow:hidden;padding:7.5rem 0 4.5rem;background:radial-gradient(1200px 600px at 80% -10%,rgba(243,112,33,.22),transparent 60%),radial-gradient(900px 500px at 10% 20%,rgba(45,212,191,.12),transparent 55%),linear-gradient(165deg,#071421 0%,#0B1F33 55%,#0a1828 100%)}
.bw-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%);pointer-events:none}
.bw-hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
.bw-hero .hero-eyebrow{color:var(--orange);letter-spacing:.14em;font-weight:700;font-size:.75rem;margin:0 0 .8rem}
.bw-hero h1{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.8rem);line-height:.95;color:#fff;margin:0 0 1rem;letter-spacing:.02em}
.bw-hero h1 .accent{color:var(--orange)}
.bw-hero .hero-lead{font-size:1.08rem;color:#c9d4e3;line-height:1.6;margin:0 0 1.1rem;max-width:36rem}
.bw-hero .bw-outcomes{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.35rem}
.bw-hero .bw-outcomes span{padding:.4rem .75rem;border-radius:999px;border:1px solid rgba(243,112,33,.35);background:rgba(243,112,33,.08);color:#ffe4cc;font-size:.78rem;font-weight:600}
.bw-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:.6rem}
.bw-stage{perspective:1200px;position:relative;min-height:380px}
.bw-mock{position:absolute;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0a1522;box-shadow:0 30px 60px -24px rgba(0,0,0,.7),0 0 0 1px rgba(243,112,33,.15);transform-style:preserve-3d;transition:transform .35s ease;will-change:transform}
.bw-mock img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.bw-mock .bw-chrome{height:28px;background:linear-gradient(180deg,#1a2a3d,#122033);display:flex;align-items:center;gap:6px;padding:0 10px}
.bw-mock .bw-chrome i{width:8px;height:8px;border-radius:50%;background:#445}
.bw-mock .bw-chrome i:nth-child(1){background:#ff5f57}.bw-mock .bw-chrome i:nth-child(2){background:#febc2e}.bw-mock .bw-chrome i:nth-child(3){background:#28c840}
.bw-mock.m1{width:78%;height:72%;left:0;top:8%;z-index:3;transform:rotateY(-12deg) rotateX(6deg) translateZ(20px)}
.bw-mock.m2{width:58%;height:52%;right:0;top:0;z-index:2;transform:rotateY(14deg) rotateX(8deg) translateZ(0)}
.bw-mock.m3{width:48%;height:42%;right:8%;bottom:0;z-index:4;transform:rotateY(-6deg) rotateX(4deg) translateZ(40px)}
.bw-stage:hover .bw-mock.m1{transform:rotateY(-8deg) rotateX(4deg) translateZ(28px) translateY(-4px)}
.bw-stage:hover .bw-mock.m2{transform:rotateY(10deg) rotateX(6deg) translateY(-6px)}
.bw-stage:hover .bw-mock.m3{transform:rotateY(-2deg) rotateX(2deg) translateZ(48px) translateY(-8px)}
@keyframes bwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.bw-mock.m1{animation:bwFloat 7s ease-in-out infinite}
.bw-mock.m2{animation:bwFloat 8.5s ease-in-out infinite .6s}
.bw-mock.m3{animation:bwFloat 6.5s ease-in-out infinite 1.1s}
@media(max-width:980px){
  .bw-hero .container{grid-template-columns:1fr;gap:2rem}
  .bw-stage{min-height:280px;max-width:420px;margin:0 auto}
  .bw-mock.m1{width:82%;height:70%}
  .bw-mock.m2{width:55%;height:48%}
  .bw-mock.m3{width:46%;height:40%}
}

/* Before / After */
.bw-ba{max-width:920px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--border);position:relative;user-select:none;touch-action:none;aspect-ratio:16/9;background:#0a1522}
.bw-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.bw-ba .bw-ba-after{clip-path:inset(0 0 0 50%)}
.bw-ba .bw-ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--orange);transform:translateX(-50%);z-index:3;cursor:ew-resize}
.bw-ba .bw-ba-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--orange);box-shadow:0 8px 24px rgba(243,112,33,.45);border:3px solid #fff}
.bw-ba .bw-ba-label{position:absolute;top:12px;z-index:4;padding:.35rem .7rem;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bw-ba .bw-ba-label.before{left:12px;background:rgba(0,0,0,.55);color:#fff}
.bw-ba .bw-ba-label.after{right:12px;background:var(--orange);color:#fff}
.bw-ba-note{text-align:center;margin:.85rem auto 0;max-width:40rem;font-size:.85rem;color:var(--muted)}

/* Portfolio — 3D tilt / spotlight / shine (no hover-scroll) */
.bw-folio{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;perspective:1200px}
.bw-card{
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg;--lift:0px;
  position:relative;display:block;border-radius:18px;text-decoration:none;color:inherit;
  transform-style:preserve-3d;isolation:isolate;
  transform:translate3d(0,var(--lift),0) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .18s ease-out, box-shadow .25s ease;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.65);
  will-change:transform;
}
.bw-card.is-hot{
  --lift:-10px;
  box-shadow:0 28px 60px -22px rgba(0,0,0,.75),0 0 0 1px rgba(243,112,33,.35),0 0 40px -10px rgba(243,112,33,.45);
  z-index:2;
}
.bw-card-inner{
  position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-light),var(--navy-mid));
  border:1px solid rgba(255,255,255,.08);
  transform:translateZ(0);
}
/* animated gradient border */
.bw-card::before{
  content:"";position:absolute;inset:-1px;border-radius:19px;padding:1.5px;
  background:conic-gradient(from var(--ang,0deg),#F37021,transparent 25%,#2DD4BF 50%,transparent 75%,#F37021);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s;pointer-events:none;z-index:3;
}
.bw-card.is-hot::before{opacity:1;animation:bwBorderSpin 3.5s linear infinite}
@keyframes bwBorderSpin{to{--ang:360deg}}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.bw-card .bw-frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:#061018}
.bw-card .bw-frame img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transform:scale(1.02) translate3d(0,0,0);
  transition:transform .45s ease-out;
  will-change:transform;
}
.bw-card.is-hot .bw-frame img{transform:scale(1.08) translate3d(calc((var(--mx) - 50%) * -.08), calc((var(--my) - 50%) * -.08), 0)}
/* cursor spotlight */
.bw-card .bw-spot{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .25s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(243,112,33,.28),rgba(45,212,191,.08) 35%,transparent 60%);
  mix-blend-mode:screen;
}
.bw-card.is-hot .bw-spot{opacity:1}
/* shine sweep */
.bw-card .bw-shine{
  position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;border-radius:18px;
}
.bw-card .bw-shine::after{
  content:"";position:absolute;top:-20%;left:-40%;width:40%;height:140%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.28),rgba(255,255,255,.08),transparent);
  transform:translateX(-120%) skewX(-18deg);opacity:0;
}
.bw-card.is-hot .bw-shine::after{animation:bwShine .9s ease forwards}
@keyframes bwShine{0%{transform:translateX(-120%) skewX(-18deg);opacity:0}20%{opacity:1}100%{transform:translateX(320%) skewX(-18deg);opacity:0}}
/* info panel slides up */
.bw-card .bw-meta{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:1.1rem 1.15rem 1.15rem;
  background:linear-gradient(180deg,transparent 0%,rgba(6,16,28,.55) 28%,rgba(6,16,28,.94) 100%);
  transform:translateY(18px);opacity:.92;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s;
}
.bw-card.is-hot .bw-meta,.bw-card.is-tap .bw-meta{transform:translateY(0);opacity:1}
.bw-card .bw-meta .tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.bw-card .bw-meta h3{font-family:var(--display);font-size:1.25rem;color:#fff;margin:.2rem 0 .25rem}
.bw-card .bw-meta p{margin:0;font-size:.86rem;color:rgba(201,212,227,.9);line-height:1.4;max-height:2.8em;overflow:hidden}
.bw-card .bw-visit{
  display:inline-flex;align-items:center;gap:6px;margin-top:.75rem;
  padding:.55rem 1rem;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:#F37021;box-shadow:0 10px 24px -10px rgba(243,112,33,.7);
  transform:translateY(10px);opacity:0;transition:transform .35s .05s cubic-bezier(.2,.8,.2,1),opacity .25s .05s,filter .15s;
}
.bw-card.is-hot .bw-visit,.bw-card.is-tap .bw-visit{transform:translateY(0);opacity:1}
.bw-card .bw-visit:hover{filter:brightness(1.08)}
.bw-card .bw-visit svg{width:14px;height:14px}
@media(max-width:800px){
  .bw-folio{grid-template-columns:1fr;perspective:none}
  .bw-card{transform:none!important}
  .bw-card .bw-meta{transform:none;opacity:1}
  .bw-card .bw-visit{transform:none;opacity:1}
  .bw-card::before{opacity:.55;animation:none}
}
@media(prefers-reduced-motion:reduce){
  .bw-card,.bw-card .bw-frame img,.bw-card .bw-meta,.bw-card .bw-visit{transition:none!important;transform:none!important;animation:none!important}
  .bw-card::before,.bw-card .bw-shine::after{animation:none!important}
  .bw-card .bw-spot{display:none}
  .bw-card .bw-meta{transform:none;opacity:1}
  .bw-card .bw-visit{opacity:1;transform:none}
}

/* Outcomes / trust — no fake numbers */
.bw-outgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.bw-out{padding:1.3rem 1.2rem;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.bw-out h3{font-family:var(--display);font-size:1.15rem;color:#fff;margin:0 0 .4rem}
.bw-out p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.bw-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1.25rem}
.bw-trust li{list-style:none;display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1rem;border-radius:12px;border:1px solid var(--border);background:var(--navy-mid);font-size:.9rem;color:var(--text);line-height:1.45}
.bw-trust li::before{content:"✓";color:var(--orange);font-weight:800;flex:none}
@media(max-width:800px){.bw-outgrid,.bw-trust{grid-template-columns:1fr}}

/* Multi-step form */
.bw-steps{display:flex;gap:.5rem;margin:0 0 1rem}
.bw-steps span{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.12)}
.bw-steps span.on{background:var(--orange)}
.bw-step-panel[hidden]{display:none!important}
.bw-form-nav{display:flex;gap:.6rem;margin-top:.4rem}
.bw-form-nav .pill-btn{flex:1}

/* Exit intent */
.bw-exit{position:fixed;inset:0;z-index:120;background:rgba(7,18,30,.72);display:none;align-items:center;justify-content:center;padding:20px}
.bw-exit.open{display:flex}
.bw-exit-card{max-width:420px;width:100%;background:linear-gradient(165deg,#0f2438,#0B1F33);border:1px solid rgba(243,112,33,.45);border-radius:18px;padding:1.6rem 1.5rem;box-shadow:0 30px 80px rgba(0,0,0,.55);position:relative}
.bw-exit-card h3{font-family:var(--display);font-size:1.6rem;color:#fff;margin:0 0 .5rem}
.bw-exit-card p{color:#c9d4e3;margin:0 0 1rem;line-height:1.5}
.bw-exit-card .bw-x{position:absolute;top:10px;right:12px;background:transparent;border:0;color:#fff;font-size:1.4rem;cursor:pointer;line-height:1}
.bw-build{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.bw-build-card{background:linear-gradient(160deg,var(--navy-light),var(--navy-mid));border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem 1.25rem;transition:transform .25s,border-color .25s}
.bw-build-card:hover{transform:translateY(-3px);border-color:var(--orange)}
.bw-build-card .wd-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(243,112,33,.12);color:var(--orange);margin-bottom:.85rem}
.bw-build-card .wd-ico svg{width:22px;height:22px}
.bw-build-card h3{font-family:var(--display);font-size:1.15rem;color:#fff;margin:0 0 .45rem}
.bw-build-card p{margin:0;font-size:.92rem;color:var(--text);line-height:1.55}
.est-price.wd-quote{font-size:1.35rem}
.est-price.wd-quote .wd-ask{color:var(--orange);font-weight:800}
@media(max-width:900px){.bw-build{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .bw-mock{animation:none!important}
  }

/* BoltWeb builds: breathing room inside the animated frame, balanced grid. */
#what-we-build .bw-build{
  padding:clamp(14px,1.7vw,24px);
  border-radius:calc(var(--radius) + 8px);
}
/* cb-fx.css copies the wrapper radius onto every tilt element; keep the
   cards on the page's own card radius instead of the bigger frame radius. */
#what-we-build .bw-build-card{border-radius:var(--radius)}
@media(max-width:900px){
  #what-we-build .bw-build{padding:clamp(12px,3vw,18px)}
}
