/* Verapath marketing — gradients, dropdown, flow transitions (design_handoff_v8 v8-vp-luxe.css). */
/* ===================================================================
   VERAPATH — LUXE / FLOW layer (shared)
   Mirrors the v3 homepage: one continuous flowing gradient canvas +
   de-blocked, floating frosted cards. Link this AFTER each page's own
   <style>/vp-site.css so it wins on equal specificity.
   =================================================================== */

/* ---------- nav Industries dropdown (CSS-only, hover/focus) ---------- */
.B .navlinks .has-drop{position:relative}
.B .navlinks .has-drop > .trg{display:inline-flex;align-items:center;gap:.32em;cursor:pointer}
.B .navlinks .has-drop > .trg::after{content:"";width:.42em;height:.42em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.7;transition:transform .25s var(--ease)}
.B .navlinks .has-drop:hover > .trg::after,.B .navlinks .has-drop:focus-within > .trg::after{transform:rotate(225deg) translateY(-1px)}
.B .navlinks .drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;min-width:300px;
  box-shadow:0 30px 70px -34px rgba(34,48,41,.45);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease) .28s,transform .22s var(--ease) .28s,visibility .22s .28s;display:flex;flex-direction:column;gap:2px;z-index:60}
/* invisible bridge so the cursor can travel from trigger to menu without dropping hover */
.B .navlinks .has-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;display:none}
.B .navlinks .has-drop:hover::after{display:block}
.B .navlinks .has-drop:hover .drop,.B .navlinks .has-drop:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(6px);transition-delay:0s}
.B .navlinks .drop a{display:block;padding:11px 14px;border-radius:12px;color:var(--forest)!important;font-size:.95rem;font-weight:650;line-height:1.2}
.B .navlinks .drop a small{display:block;color:var(--mute);font-weight:400;font-size:.8rem;margin-top:2px}
.B .navlinks .drop a:hover{background:var(--mint-2)}
.B .navlinks .drop a[aria-current=page]{background:color-mix(in srgb,var(--mint-2) 70%,transparent)}

/* ---------- scroll-to-top button ---------- */
.B .to-top{position:fixed;right:26px;bottom:30px;z-index:80;width:52px;height:52px;border-radius:50%;border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);background:var(--forest);color:var(--lime);display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 40px -16px rgba(34,48,41,.6);opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,background .25s,color .25s}
.B .to-top.show{opacity:1;visibility:visible;transform:none}
.B .to-top:hover{background:var(--lime);color:var(--forest);transform:translateY(-3px)}
.B .to-top svg{width:22px;height:22px}
@media(max-width:640px){.B .to-top{right:16px;bottom:18px;width:46px;height:46px}}


/* one continuous, fixed gradient canvas behind the whole page
   (identical values to the v3 homepage) */
.B{background:
  radial-gradient(80% 50% at 88% 6%, rgba(163,233,107,.10) 0%, transparent 55%),
  radial-gradient(70% 55% at 6% 38%, rgba(14,166,101,.07) 0%, transparent 55%),
  radial-gradient(90% 60% at 92% 78%, rgba(34,48,41,.05) 0%, transparent 55%),
  linear-gradient(176deg, #fbfbf7 0%, #f3f6ef 30%, #f7f4ef 60%, #eef3ec 100%);
  background-attachment:fixed;background-color:#f7f7f2}

/* ---- page hero: let the gradient flow through, soften the tech grid ---- */
.B .phero{background:transparent;padding:200px 0 80px}
.B .phero .grid-deco{opacity:.32;
  mask-image:radial-gradient(72% 80% at 64% 0%,#000 22%,transparent 70%)}

/* ---- nav: keep the light, translucent treatment consistent ---- */
.B nav[data-nav].scrolled{background:color-mix(in srgb,#f7f7f2 80%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid rgba(34,48,41,.07)}

/* ---- footer: hard rule -> soft center fade ---- */
.B footer{border-top:none;position:relative}
.B footer::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--forest) 12%,transparent),transparent)}
.B .fbar{border-top:none;position:relative}
.B .fbar::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--forest) 9%,transparent) 30%,color-mix(in srgb,var(--forest) 9%,transparent) 70%,transparent)}

/* =========================== ABOUT =========================== */
/* statement: drop the boxed border-block */
.B .statement{border-block:none}
/* paths: hairline table -> three floating frosted cards */
.B .paths{border:none;border-radius:0;overflow:visible;background:transparent;gap:18px}
.B .path{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.7);border-radius:22px;
  box-shadow:0 24px 60px -42px rgba(34,48,41,.45);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.B .path:hover{background:rgba(255,255,255,.9);transform:translateY(-6px);
  box-shadow:0 36px 80px -46px rgba(34,48,41,.5)}
/* origin photo: lose the border, gain a cinematic float */
.B .origin .ph{border:none;box-shadow:0 34px 80px -46px rgba(34,48,41,.55)}

/* =========================== NEWS =========================== */
.B .featwrap{border:none;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  border-radius:28px;box-shadow:0 34px 84px -50px rgba(34,48,41,.5);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.B .featwrap:hover{transform:translateY(-5px);box-shadow:0 44px 100px -52px rgba(34,48,41,.55)}
.B .ncard{border:none;background:rgba(255,255,255,.66);backdrop-filter:blur(6px);
  border-radius:22px;box-shadow:0 22px 56px -42px rgba(34,48,41,.42)}
.B .ncard:hover{transform:translateY(-6px);background:rgba(255,255,255,.9);
  box-shadow:0 32px 74px -46px rgba(34,48,41,.5)}
/* subscribe band: hard rule -> soft fade, floating input */
.B .sub-band{border-top:none;position:relative}
.B .sub-band::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--forest) 12%,transparent),transparent)}
.B .subrow input{background:rgba(255,255,255,.7);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 34px -28px rgba(34,48,41,.4)}

/* ====================== REQUEST A DEMO ====================== */
.B .formcard{border:none;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);
  border-radius:28px;box-shadow:0 40px 96px -52px rgba(34,48,41,.55)}
.B .formhead{background:transparent;border-bottom:1px solid rgba(34,48,41,.08)}
.B .fld input,.B .fld textarea{background:rgba(255,255,255,.6);border:1px solid rgba(34,48,41,.12)}
/* fix leftover dark-theme focus bg so focused fields stay light */
.B .fld input:focus,.B .fld textarea:focus{background:#fff;
  border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 16%,transparent)}
.B .sent{background:color-mix(in srgb,#f7f7f2 88%,transparent)}
.B .sent .trace{background:rgba(255,255,255,.7);border:1px solid rgba(34,48,41,.1)}
.B .quote{border-left-color:var(--green)}