/* SIGNATURE-MOMENTS-01 — deliberate spectacle over the P2 checkpoint */
:root {
  --sig-ease: cubic-bezier(.16, 1, .3, 1);
  --sig-blue: #0069a7;
}

/* HERO / 100% — B as a responsive brand object */
.signature .hero {
  --sig-px: 72%;
  --sig-py: 39%;
  background:
    radial-gradient(ellipse 44% 68% at var(--sig-px) var(--sig-py), rgba(93,127,145,.15), transparent 66%),
    radial-gradient(ellipse 48% 70% at 79% 43%, rgba(77,94,104,.14), transparent 70%),
    linear-gradient(137deg, #020405 0%, #06090b 57%, #090d10 100%);
}
.signature .hero-plane-grid {
  opacity: calc(.68 - var(--p2-hero, 0) * .12);
  -webkit-mask-image: radial-gradient(circle 35vw at var(--sig-px) var(--sig-py), #000 0, rgba(0,0,0,.7) 40%, transparent 82%);
  mask-image: radial-gradient(circle 35vw at var(--sig-px) var(--sig-py), #000 0, rgba(0,0,0,.7) 40%, transparent 82%);
}
.signature .hero-plane-mark {
  opacity: .82;
  isolation: isolate;
  filter: drop-shadow(0 34px 54px rgba(0,0,0,.42));
}
.signature .hero-plane-mark img {
  opacity: calc(.64 + var(--p2-hero, 0) * .14);
  filter: grayscale(1) brightness(.34) contrast(1.55)
    drop-shadow(1px 0 rgba(230,237,240,.34))
    drop-shadow(-2px 0 rgba(0,0,0,.94));
}
.signature .hero-plane-mark::before {
  opacity: calc(.54 + var(--p2-hero, 0) * .28);
  border-color: rgba(182,203,214,.23);
  box-shadow: inset 1px 0 rgba(226,236,241,.09), 0 22px 48px rgba(0,0,0,.26);
}
.signature .hero-plane-mark::after {
  opacity: calc(.2 + var(--p2-hero, 0) * .7);
  background: linear-gradient(108deg,
    transparent 0%,
    transparent calc(var(--p2-light, 16%) - 13%),
    rgba(142,184,207,.07) calc(var(--p2-light, 16%) - 8%),
    rgba(239,246,249,.86) calc(var(--p2-light, 16%) - 1%),
    rgba(105,168,200,.56) calc(var(--p2-light, 16%) + 3%),
    rgba(0,105,167,.34) calc(var(--p2-light, 16%) + 7%),
    transparent calc(var(--p2-light, 16%) + 15%),
    transparent 100%);
}

.signature-depth,
.signature-internal,
.signature-specular,
.signature-activation,
.signature-geometry {
  position: absolute;
  pointer-events: none;
}
.signature-depth,
.signature-internal,
.signature-specular {
  inset: 20% 8%;
  -webkit-mask: url('../logo-icon.png') center / contain no-repeat;
  mask: url('../logo-icon.png') center / contain no-repeat;
}
.signature-depth {
  z-index: 1;
  background:
    radial-gradient(circle 28% at var(--sig-px) var(--sig-py), rgba(197,222,233,.24), transparent 72%),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 32%, rgba(0,0,0,.26) 68%, rgba(142,184,207,.08));
  transform: translate3d(calc(var(--sig-x, 0) * 11px), calc(var(--sig-y, 0) * 8px), 0);
  opacity: calc(.42 + var(--p2-hero, 0) * .28);
}
.signature-internal {
  z-index: 2;
  background-image:
    linear-gradient(rgba(191,216,228,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,216,228,.18) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 34px, rgba(142,184,207,.08) 34px 35px);
  background-size: 38px 38px, 38px 38px, auto;
  opacity: calc(.22 + var(--p2-hero, 0) * .38);
  transform: translate3d(calc(var(--sig-x, 0) * -6px), calc(var(--sig-y, 0) * -4px), 0);
}
.signature-specular {
  z-index: 3;
  background: linear-gradient(110deg, transparent 28%, rgba(235,244,248,.05) 38%, rgba(235,244,248,.76) 48%, rgba(84,151,186,.38) 53%, transparent 64%);
  background-size: 230% 100%;
  background-position: 115% 0;
  mix-blend-mode: screen;
  opacity: .86;
}
.signature-ready .signature-specular { animation: signature-arrival 2.8s .25s var(--sig-ease) both; }
.signature-activation {
  z-index: 4;
  right: 13%;
  top: 48%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sig-blue);
  box-shadow: 0 0 0 1px rgba(142,184,207,.6), 0 0 22px rgba(45,133,184,.52);
  opacity: calc(.25 + var(--p2-hero, 0) * .75);
  transform: scale(calc(.68 + var(--p2-hero, 0) * .45));
}
.signature-geometry {
  z-index: 5;
  inset: 3% -2% 2% 1%;
  width: 101%;
  height: 95%;
  overflow: visible;
  opacity: calc(.38 + var(--p2-hero, 0) * .42);
  transform: translate3d(calc(var(--sig-x, 0) * -4px), calc(var(--sig-y, 0) * -3px), 0);
}
.signature-geometry path,
.signature-geometry circle {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.signature-geometry .silver {
  stroke: rgba(174,202,216,.55);
  stroke-width: 1;
  stroke-dasharray: 430;
  stroke-dashoffset: calc(430 - var(--p2-hero, 0) * 430);
}
.signature-geometry .blue { stroke: rgba(45,133,184,.72); stroke-width: 1.25; }
.signature-geometry circle.blue { fill: #0069a7; }

.signature .hero-plane-axis {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142,184,207,.72), rgba(226,236,241,.28), transparent);
  opacity: calc(.45 + var(--p2-hero, 0) * .4);
}
.signature .hero-plane-measure i {
  background: linear-gradient(90deg, var(--ad-silver-3), #d8e5eb 58%, var(--sig-blue));
}
.signature .hero-exit a span {
  transition: background-color .24s var(--sig-ease), border-color .24s var(--sig-ease), transform .24s var(--sig-ease);
}
.signature .hero-exit a:hover span,
.signature .hero-exit a:focus-visible span { transform: translateY(3px) scale(1.06); }

@keyframes signature-arrival {
  0% { background-position: 115% 0; opacity: 0; }
  18% { opacity: .32; }
  58% { opacity: .95; }
  100% { background-position: -115% 0; opacity: .34; }
}

@keyframes web-signature-arrival {
  0% { background-position: 0 0, 120% 0; opacity: .12; }
  52% { opacity: .92; }
  100% { background-position: 0 0, -115% 0; opacity: calc(.24 + var(--p2-web, 0) * .7); }
}

/* WEB / 65% — a perceptible second signature, clearly below the hero */
.signature .web-feature {
  --sig-web-x: 52%;
  --sig-web-y: 48%;
  overflow: hidden;
}
.signature .feature-watermark {
  opacity: calc(.76 + var(--p2-web, 0) * .2);
  transform: translate3d(calc(var(--p2-web, 0) * -12px), calc((.5 - var(--p2-web, 0)) * 12px), 0)
    scale(calc(.965 + var(--p2-web, 0) * .045));
  filter: drop-shadow(0 26px 32px rgba(0,0,0,.32));
}
.signature .web-signature-light {
  color: transparent;
  z-index: 1;
  opacity: calc(.24 + var(--p2-web, 0) * .7);
  background:
    radial-gradient(circle 18% at var(--sig-web-x) var(--sig-web-y), rgba(234,244,248,.92), rgba(142,184,207,.42) 32%, transparent 72%),
    linear-gradient(108deg, transparent 36%, rgba(213,231,239,.78) 49%, rgba(0,105,167,.38) 54%, transparent 64%);
  background-size: 100% 100%, 230% 100%;
  background-position: 0 0, 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--sig-web-dx, 0) * 8px - var(--p2-web, 0) * 12px), calc(var(--sig-web-dy, 0) * 6px), 0)
    scale(calc(.965 + var(--p2-web, 0) * .045));
}
.signature .web-feature.signature-web-active .web-signature-light {
  animation: web-signature-arrival 2.2s var(--sig-ease) both;
}
.signature .web-title-block h3 {
  position: relative;
  z-index: 2;
  transform: translate3d(calc((.5 - var(--p2-web, 0)) * 10px), calc((.5 - var(--p2-web, 0)) * 5px), 0);
}
.signature .web-title-block h3 em {
  text-shadow: 0 1px rgba(241,246,248,.2), 0 12px 35px rgba(45,133,184,.12);
}
.signature .feature-baseline span {
  height: 1px;
  background: linear-gradient(90deg, var(--ad-silver-3), #dbe7ec 62%, var(--sig-blue));
}
.signature .feature-baseline i {
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  box-shadow: 0 0 0 4px rgba(0,79,132,.12), 0 0 18px rgba(45,133,184,.22);
}

/* PROCESS / 10% — static blueprint paper, built as an editorial surface */
.signature .process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(rgba(63,91,106,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,91,106,.07) 1px, transparent 1px),
    linear-gradient(rgba(63,91,106,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,91,106,.035) 1px, transparent 1px),
    linear-gradient(180deg, #ebecee 0%, #e5e7e8 100%);
  background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px, auto;
}
.signature .process::before,
.signature .process::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.signature .process::before {
  width: min(58vw, 820px);
  aspect-ratio: 1;
  right: -17vw;
  top: -34%;
  border: 1px solid rgba(38,86,111,.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 72px rgba(38,86,111,.025),
    0 0 0 73px rgba(38,86,111,.08),
    inset 0 0 0 24vw rgba(255,255,255,.035);
}
.signature .process::after {
  left: 4%;
  bottom: 10%;
  width: 31%;
  height: 34%;
  border-left: 1px solid rgba(38,86,111,.13);
  border-bottom: 1px solid rgba(38,86,111,.13);
  background:
    linear-gradient(26deg, transparent 49.8%, rgba(38,86,111,.11) 50%, transparent 50.2%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 72%, transparent);
}
.signature .process-layout { position: relative; z-index: 1; }
.signature .process-heading,
.signature .process-sequence { background: rgba(231,233,234,.76); }
.signature .process-heading { box-shadow: 0 0 52px 34px rgba(231,233,234,.68); }
.signature .process-sequence { box-shadow: 0 0 44px 26px rgba(231,233,234,.58); }

/* Selective discoverability; no global hover spectacle */
.signature .header-contact,
.signature .contact-direct > a,
.signature .form-actions button {
  position: relative;
  overflow: hidden;
}
.signature .header-contact::before,
.signature .contact-direct > a::before,
.signature .form-actions button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 20%, rgba(180,215,231,.18) 48%, transparent 72%);
  transform: translateX(-110%);
  transition: transform .62s var(--sig-ease);
}
.signature .header-contact:hover::before,
.signature .header-contact:focus-visible::before,
.signature .contact-direct > a:hover::before,
.signature .contact-direct > a:focus-visible::before,
.signature .form-actions button:hover::before,
.signature .form-actions button:focus-visible::before { transform: translateX(110%); }

/* Partners pattern was near noise: keep its material, suppress the decorative texture. */
.signature .partners::after { opacity: .16; }

@media (max-width: 700px) {
  .signature .hero { --sig-px: 72%; --sig-py: 21%; }
  .signature .hero-plane-grid {
    opacity: .72;
    -webkit-mask-image: radial-gradient(circle 72vw at 73% 22%, #000 0, rgba(0,0,0,.68) 42%, transparent 82%);
    mask-image: radial-gradient(circle 72vw at 73% 22%, #000 0, rgba(0,0,0,.68) 42%, transparent 82%);
  }
  .signature .hero-plane-mark { opacity: .88; filter: drop-shadow(0 24px 35px rgba(0,0,0,.38)); }
  .signature .hero-plane-mark img { opacity: calc(.68 + var(--p2-hero, 0) * .12); }
  .signature-depth,
  .signature-internal,
  .signature-specular { inset: 17% 5%; }
  .signature-depth { opacity: calc(.38 + var(--p2-hero, 0) * .22); transform: none; }
  .signature-internal { opacity: calc(.2 + var(--p2-hero, 0) * .26); background-size: 30px 30px, 30px 30px, auto; transform: none; }
  .signature-geometry { inset: 1% -4% 5% -1%; transform: none; opacity: calc(.34 + var(--p2-hero, 0) * .3); }
  .signature-activation { right: 10%; top: 41%; }
  .signature-ready .signature-specular { animation-duration: 2.3s; }

  .signature .feature-watermark,
  .signature .web-signature-light {
    left: -8%;
    top: 22%;
    font-size: min(104vw, 26rem);
    transform: scale(calc(.98 + var(--p2-web, 0) * .025));
  }
  .signature .feature-watermark { display: block; opacity: calc(.44 + var(--p2-web, 0) * .2); }
  .signature .web-signature-light { display: block; opacity: calc(.14 + var(--p2-web, 0) * .34); }
  .signature .web-title-block h3 { transform: translate3d(0, calc((.5 - var(--p2-web, 0)) * 7px), 0); }

  .signature .process { background-size: 56px 56px, 56px 56px, 14px 14px, 14px 14px, auto; }
  .signature .process::before { width: 125vw; right: -76vw; top: -4%; }
  .signature .process::after { left: 0; width: 65%; height: 22%; }
  .signature .process-heading,
  .signature .process-sequence { background: rgba(231,233,234,.82); }
}

@media (prefers-reduced-motion: reduce) {
  .signature .signature-specular { animation: none; background-position: 52% 0; opacity: .34; }
  .signature .web-feature.signature-web-active .web-signature-light { animation: none; background-position: 0 0, 50% 0; }
  .signature-depth,
  .signature-internal,
  .signature-geometry,
  .signature .feature-watermark,
  .signature .web-signature-light,
  .signature .web-title-block h3 { transform: none; }
  .signature .signature-geometry .silver { stroke-dashoffset: 0; }
  .signature .header-contact::before,
  .signature .contact-direct > a::before,
  .signature .form-actions button::before { display: none; }
}