/* ===== NON-CRITICAL: polish, hovers, animations, below-the-fold ===== */

/* Header polish */
.header{ backdrop-filter:saturate(130%) blur(6px) }
.logo img{ filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)) }

/* Desktop nav visuals */
.nav>li{ position:relative }
.nav>li>a, .nav>li>button{
  transition: color .15s ease, border-color .15s ease;
}
.nav > li > a:hover,
.nav > li > a:focus-visible,
.nav > li > button:hover,
.nav > li > button:focus-visible,
.nav>li>button:hover{
  color:#fff; font-style:italic;
  border-bottom-color:rgba(255,255,255,.6);
}
.nav > li:hover > :is(a,button),
.nav > li:focus-within > :is(a,button){ border-bottom-color:#fff }

/* Dropdown visual card */
.dropdown{
  position:absolute; top:calc(100% - 6px); right:0; min-width:220px;
  background:#0b0b0f; color:#fff;
  border:1px solid #1c2030; border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.45); padding:8px; display:none; z-index:1200;
}
.dropdown a{ display:block; padding:10px 12px; color:#fff; text-decoration:none; border-radius:8px }
.dropdown a:hover{ background:#12131a }
/* little notch on the dropdown card */
.dropdown.menu-card::before{
  content:"";
  position:absolute; top:-8px; right:42px;
  width:14px; height:14px;
  background:inherit;
  border-left:1px solid rgba(255,255,255,.18);
  border-top:1px solid rgba(255,255,255,.18);
  transform:rotate(45deg);
  border-top-left-radius:2px;
}

/* Hamburger styling */
.hamb{ border-radius:12px; border:1px solid rgba(255,255,255,.14); background:#1d2233 }
.hamb svg{ display:block }
.exp .chev{ width:16px; height:16px; flex:0 0 16px; transform:rotate(0); transition:transform .2s ease }
.exp[aria-expanded="true"] .chev{ transform:rotate(180deg) }

/* Hero CTA hover polish */
.hero-cta:hover, .hero-cta:focus-visible{
  --c1h:#2B5CB0; --c2h:#3182CE;
  background:linear-gradient(135deg,var(--c1h),var(--c2h));
  border-color:#fff; transform:translateY(-1px);
  box-shadow:0 28px 60px -20px rgba(0,0,0,.65), 14px -12px 26px -18px rgba(0,0,0,.45);
}
.hero-cta:active{
  transform:translateY(0);
  box-shadow:0 16px 36px -18px rgba(0,0,0,.55), 8px -8px 18px -16px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion:reduce){ .hero-cta{ transition:none } }

/* Optional hero fade/animation overrides (LCP-safe: image stays static) */

/* Optional hero fade-in polish (image stays static for LCP) */
.hero-img{
  opacity:1;
  transform:none;
  transition:opacity .35s ease, transform .35s ease;
}
.hero-img.in{
  opacity:1;
  transform:none;
}


/* Headline sizing helper */
section h1{ font-size:clamp(30px,4.2vw,56px); line-height:1.1 }

/* Ensure header doesn't clip dropdowns (already set structurally) */
.header{ overflow:visible; contain:layout style }

/* Defer painting for below-the-fold sections */
 .why, .svc, .stats, .stack, .cta-band, .cta-solid, .site-footer{
  content-visibility:auto;
  contain-intrinsic-size:1px 900px;
}

/* ===== Pain section + animations ===== */
#challenges{--list-start:.40s; --list-stagger:.12s; --rise:32px; --dur:.75s}
#challenges .pain-list>li{ opacity:0; transform:translateY(var(--rise)) }
#challenges.is-revealed .pain-list>li{ animation:pain-rise var(--dur) ease-out both }
#challenges.is-revealed .pain-list>li:nth-child(1){ animation-delay:calc(var(--list-start) + 0*var(--list-stagger)) }
#challenges.is-revealed .pain-list>li:nth-child(2){ animation-delay:calc(var(--list-start) + 1*var(--list-stagger)) }
#challenges.is-revealed .pain-list>li:nth-child(3){ animation-delay:calc(var(--list-start) + 2*var(--list-stagger)) }
#challenges.is-revealed .pain-list>li:nth-child(4){ animation-delay:calc(var(--list-start) + 3*var(--list-stagger)) }
#challenges.is-revealed .pain-list>li:nth-child(5){ animation-delay:calc(var(--list-start) + 4*var(--list-stagger)) }
#challenges.is-revealed .pain-list>li:nth-child(6){ animation-delay:calc(var(--list-start) + 5*var(--list-stagger)) }
@keyframes pain-rise{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  #challenges .pain-list>li{ opacity:1; transform:none; animation:none !important }
}

/* Pain visuals + layout */
.pp-card picture, .pp-card img{ display:block; width:100%; height:auto; border-radius:16px; aspect-ratio:1/1; object-fit:cover; box-shadow:0 12px 40px rgba(0,0,0,.18) }
.challenges { background:#fff; color:#1e2a44; padding:30px 0 0 }
.pain-grid{ display:grid; gap:32px; grid-template-columns:1fr }
@media (min-width:1024px){ .pain-grid{ grid-template-columns:1.05fr .95fr; gap:56px } }
.challenges .eyebrow{ --rule:clamp(40px,7vw,80px); --color:#3f50ff; margin:0 0 12px; display:flex; align-items:center; gap:18px; font-weight:800; font-size:clamp(12px,1.1vw,14px); letter-spacing:.35em; text-transform:uppercase; color:var(--color) }
.challenges .eyebrow::after{ content:""; width:var(--rule); height:4px; background:currentColor; border-radius:3px; translate:0 1px }
@media (max-width:480px){ .challenges .eyebrow{ --rule:48px } }
.challenges .lede{ margin:.3rem 0 1.2rem; color:#1e2a44 }
.pain-list{ margin:0; padding:0; list-style:none }
.pain-list li{ display:grid; grid-template-columns:28px 1fr; column-gap:14px; align-items:start; margin:14px 0 }
.pain-list .ico{ width:22px; height:22px; background:none; border:0; color:#081741; display:flex; align-items:center; justify-content:center; align-self:start; margin-top:.2em }
.pain-list .ico svg{ width:22px; height:22px; display:block }
.pain-list b, .pain-list strong{ color:#1e2a44 }
.pain-list p{ margin:0 }
.challenges h2{ color:#1e2a44 }
.challenges em, .challenges .accent{ color:#E10000; font-weight:bold }
.pain-visual .pp-card{ position:relative; border-radius:22px; overflow:hidden; background:#0c1224; box-shadow:0 24px 60px rgba(0,0,0,.35) }
.pain-visual .split{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:rgba(255,255,255,.5); opacity:.55 }
.pain-visual .labels{ position:absolute; inset:14px 16px auto 16px; display:flex; justify-content:space-between; font-weight:800; letter-spacing:.02em }
.pain-visual .labels .left{ color:#e8eefc }
.pain-visual .labels .right{ color:#0e1a33; background:rgba(255,255,255,.9); padding:.2rem .4rem; border-radius:8px }
.pain-visual .badge{ position:absolute; top:14px; left:14px; width:34px; height:34px; border-radius:50%; background:#33c36b; display:grid; place-items:center; color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.25) }
.pain-visual .badge svg{ width:20px; height:20px }

/* ---------- Generic reveal utilities (keep: transform + opacity only) ---------- */
.reveal-up:not(.in){
  opacity: 0;
  transform: translateY(var(--reveal-offset, 40vh));
  transition:
    transform var(--reveal-dur, 2s) var(--reveal-ease, cubic-bezier(.22,.61,.36,1)) var(--reveal-delay, 0s),
    opacity  calc(var(--reveal-dur, 2s) * .6) ease-out var(--reveal-delay, 0s);
  will-change: transform, opacity;
}
.reveal-up.in{ opacity:1; transform:none }

@media (min-width:1024px){
  #challenges .pain-copy.reveal-up,
  #challenges .pain-visual.reveal-up{
    --reveal-offset: 56px;
    --reveal-dur: 1.35s;
    --reveal-delay: .18s;
    /* optional: --reveal-ease: cubic-bezier(.2,.7,.2,1); */
  }
}

@media (prefers-reduced-motion:reduce){
  .reveal-up{ opacity:1; transform:none; transition:none }
}

/* If JS is blocked/late, keep them visible */
:root:not(.js) #challenges .reveal-left,
:root:not(.js) #challenges .reveal-right{ opacity:1; transform:none }

/* ---------- #challenges wipe-in (no clip-path; uses sliding mask) ---------- */
/* Set this to match the section background */
#challenges{ --reveal-mask: #ffffff; }

#challenges .reveal-left,
#challenges .reveal-right{
  position: relative;
  overflow: hidden;              /* contain the mask */
  opacity: 0;                    /* fade in */
  transition: opacity 520ms ease .06s;
}

/* Mask cover */
#challenges .reveal-left::before,
#challenges .reveal-right::before{
  content:"";
  position:absolute; inset:0;
  background: var(--reveal-mask);
  transform: translateX(0);      /* fully covered initially */
  transition: transform 950ms cubic-bezier(.22,.61,.36,1) .06s, opacity 520ms ease .06s;
  will-change: transform, opacity;
}

/* Left block: mask slides left out */
#challenges .reveal-left.in{ opacity:1; }
#challenges .reveal-left.in::before{
  transform: translateX(-101%);
  opacity: 0;
}

/* Right block: mask slides right out */
#challenges .reveal-right.in{ opacity:1; }
#challenges .reveal-right.in::before{
  transform: translateX(101%);
  opacity: 0;
}

/* Reduced motion: show immediately, no transitions */
@media (prefers-reduced-motion:reduce){
  #challenges .reveal-left,
  #challenges .reveal-right{ opacity:1; transition:none }
  #challenges .reveal-left::before,
  #challenges .reveal-right::before{ transition:none; transform:none; opacity:0 }
}


/* ===== Services ===== */
.svc{ background:#fff; padding:64px 0 84px }
.svc .eyebrow{ letter-spacing:.18em; font-weight:800; color:#3e55ff; margin:0 0 6px }
.svc h2{ margin:0 0 28px; font-size:clamp(28px,3.8vw,44px); line-height:1.1; color:var(--ink) }
.svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
@media (max-width:1024px){ .svc-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .svc-grid{ grid-template-columns:1fr } }
.svc-card{
  --bg:#fff; --fg:var(--ink); --muted:#334155; /* AA on white (≈7.1:1 vs #fff) */
  position:relative; display:flex; flex-direction:column; gap:14px; padding:24px; border-radius:var(--card-r);
  background:var(--bg); color:var(--fg);
  box-shadow:0 10px 30px rgba(16,26,57,.08);
  transition:transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
  outline:none; overflow:hidden;
}
.svc-card:focus-visible{ box-shadow:0 0 0 3px rgba(62,85,255,.35), 0 10px 30px rgba(16,26,57,.12) }
.svc-card .svc-ico{ margin-inline:auto }
.svc-ico,.offer-card .ico,.card-ico{
  --size:92px; width:var(--size); height:var(--size); border-radius:9999px; display:grid; place-items:center; position:relative; background:transparent; isolation:isolate; transition:transform .25s ease;
}
.svc-ico::before,.offer-card .ico::before,.card-ico::before{
  content:""; position:absolute; inset:0; border-radius:9999px;
  background:radial-gradient(80% 80% at 50% 85%, rgba(255,255,255,.10) 0 60%, transparent 60%),
             linear-gradient(180deg,#0f1529 0%,#2a3970 55%,#8da3ee 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px rgba(13,19,36,.18);
  transition:opacity .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease; z-index:0;
}
@media (max-width:640px){ .svc-ico,.offer-card .ico,.card-ico{ --size:76px } }
.svc-ico svg,.offer-card .ico svg,.card-ico svg{ position:relative; z-index:1; width:calc(var(--size)*.46); height:calc(var(--size)*.46); color:#fff; filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)); transition:color .22s ease, transform .22s ease, filter .22s ease }
.svc-lede{ color:var(--muted); margin:2px 0 0 }
.svc-list{ margin:4px 0 0; padding:0 0 0 1.2em; color:var(--muted) }
.svc-list li{ margin:.4em 0 }
.svc-badges{ margin-top:8px }
.btn.svc-cta{
  margin-top:auto; align-self:stretch; display:block; text-align:center;
  margin-inline:-24px; margin-bottom:-24px; padding:14px 24px; border-radius:0 0 var(--card-r) var(--card-r);
  border:0; border-top:1px solid rgba(15,22,48,.08); background:#f7f9ff; color:#213257; font-weight:800; letter-spacing:.01em;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.svc-card:hover,.svc-card:focus-within{
  transform:translateY(-4px); background:linear-gradient(180deg,var(--grad-a) 0%, var(--grad-b) 100%); color:#fff; box-shadow: inset 0 0 0 9999px rgba(0,0,0,.30), 0 20px 50px rgba(15,22,48,.25);
}
.svc-card:hover .svc-lede,.svc-card:hover .svc-list,
.svc-card:focus-within .svc-lede,.svc-card:focus-within .svc-list{ color:#fff }
.svc-card:hover .svc-ico::before,.svc-card:focus-within .svc-ico::before{
  opacity:1; background:#fff; box-shadow:inset 0 1px 0 rgba(0,0,0,.06), 0 12px 28px rgba(13,19,36,.12); transform:none
}
.svc-card:hover .svc-ico :is(svg,i),
.svc-card:focus-within .svc-ico :is(svg,i){ color:#2c45df; filter:none; transform:translateY(-1px) }
.svc-card:hover .badge,
.svc-card:focus-within .badge{
  --badge-fg:#ffffff;
  --badge-border:#ffffff;
  color:#fff;
  border-color:#fff;
  background:transparent;
}
.svc-card:hover .badge--filled,.svc-card:focus-within .badge--filled{ color:#0b1220 }
.svc-card:hover .btn.svc-cta,.svc-card:focus-within .btn.svc-cta{
  background:#fff; color:#0b1220; border-top-color:rgba(15,22,48,.20)
}
.svc-card .btn.svc-cta:hover,.svc-card .btn.svc-cta:focus-visible{
  background:linear-gradient(180deg,#ffffff 0%,#f3f6ff 100%); color:#0b1220; border-top-color:rgba(15,22,48,.32);
  box-shadow:0 0 0 3px rgba(62,85,255,.20), 0 12px 24px rgba(13,19,36,.16); transform:translateY(-1px); outline:none
}
.svc-card .btn.svc-cta:active{ transform:translateY(0); box-shadow:0 0 0 2px rgba(62,85,255,.24) inset; background:#f0f4ff }
@media (prefers-reduced-motion:reduce){
  .svc-card, .svc-ico,.svc-ico::before, .svc-ico svg,.svc-ico i, .btn.svc-cta{ transition:none }
}
.svc-ico svg.tight{ width:calc(var(--size)*.56); height:calc(var(--size)*.56) }
.svc-ico .fa{ font-size:calc(var(--size)*.55); line-height:1; color:#fff }
.svc-card:hover .svc-ico .fa{ color:#2c45df }
.svc-ico i,
.offer-card .ico i,
.card-ico i{
  position: relative; z-index:1;
  font-size: calc(var(--size) * .46);
  line-height:1;
  color:#fff;
  transition: color .22s ease, transform .22s ease, filter .22s ease;
}
.svc-card h3{ color:#0b1220; }
.svc-card:hover h3 {
  color: #fff;
}
/* ===== Services: reveal + icon pop (JS-scoped) ===== */
/* Default (no JS): cards stay visible. Animation styles apply only when .js-motion is on <html>. */
.js-motion .svc-card--anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}

.js-motion .svc-card--anim.in {
  opacity: 1;
  transform: translateY(0);
}

/* Icon micro-pop once the card is in */
.js-motion .svc-card--anim.in .svc-ico--anim {
  animation: svcIconPop .6s cubic-bezier(.22,.95,.25,1.25) .2s both;
}

@keyframes svcIconPop {
  0%   { transform: scale(.85); opacity: .5; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .svc-card--anim, .svc-ico--anim { transition: none !important; animation: none !important; }
}


/* ===== Why section ===== */
.why{ padding:clamp(48px,8vw,96px) 0; background:#fff; color:#081741 }
.why-grid{ display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:1fr; grid-template-areas:"copy" "media"; align-items:center }
.why-copy{ grid-area:copy } .why-media{ grid-area:media }
.why-media picture, .why-media img{ display:block; width:100%; height:auto; border-radius:16px; aspect-ratio:3/2; object-fit:cover; box-shadow:0 12px 40px rgba(0,0,0,.18) }
.why h2{ margin:6px 0 14px; font-size:clamp(22px,4.4vw,42px); line-height:1.08; font-weight:800; color:#081842 }
.why .accent{ color:#3B5BFF }
.why .lede{ margin:6px 0 18px; color:#5b6478; font-weight:600 }
.why-list{ display:grid; gap:16px; margin:0; padding:0; list-style:none }
.why-list li{ display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start }
.why-list .ico{ width:28px; height:28px; display:grid; place-items:center; font-size:20px; line-height:1; transform:translateY(1px) }
.why .eyebrow{ --line:64px; margin:0 0 6px; font:700 14px/1.1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.22em; color:#3B5BFF; display:flex; align-items:center; gap:16px }
.why .eyebrow::after{ content:""; height:4px; width:var(--line); background:#3B5BFF; border-radius:2px }
@media (min-width:1024px){
  .why-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); grid-template-areas:"media copy" }
}

/* ===== CTA band (image-set fallbacks) ===== */
.cta-band{ padding:clamp(18px,3vw,28px) 0 }
.cta-band .container{ max-width:1200px }
.cta-card{ position:relative; overflow:hidden; border-radius:18px; padding:clamp(18px,3vw,28px); display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,28px); color:#fff; border:1px solid rgba(255,255,255,.08); box-shadow:0 14px 40px rgba(0,0,0,.25); min-height:100px }
.cta-card::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
    url("/assets/CTA-1-w600.jpg");
  background-image:
    linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
    -webkit-image-set(
      url("/assets/CTA-1-w600.avif") type("image/avif") 1x,
      url("/assets/CTA-1-w600.webp") type("image/webp") 1x,
      url("/assets/CTA-1-w600.jpg")  type("image/jpeg") 1x
    );
  background-image:
    linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
    image-set(
      url("/assets/CTA-1-w600.avif") type("image/avif") 1x,
      url("/assets/CTA-1-w600.webp") type("image/webp") 1x,
      url("/assets/CTA-1-w600.jpg")  type("image/jpeg") 1x
    );
  background-size:cover; background-position:center; background-repeat:no-repeat; filter:saturate(1.05); z-index:0;
}
@media (min-width:768px){
  .cta-card::before{
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      url("/assets/CTA-1-w768.jpg");
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      -webkit-image-set(
        url("/assets/CTA-1-w768.avif") type("image/avif") 1x,
        url("/assets/CTA-1-w768.webp") type("image/webp") 1x,
        url("/assets/CTA-1-w768.jpg")  type("image/jpeg") 1x
      );
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      image-set(
        url("/assets/CTA-1-w768.avif") type("image/avif") 1x,
        url("/assets/CTA-1-w768.webp") type("image/webp") 1x,
        url("/assets/CTA-1-w768.jpg")  type("image/jpeg") 1x
      );
  }
}
@media (min-width:1200px){
  .cta-card::before{
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      url("/assets/CTA-1-w1200.jpg");
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      -webkit-image-set(
        url("/assets/CTA-1-w1200.avif") type("image/avif") 1x,
        url("/assets/CTA-1-w1200.webp") type("image/webp") 1x,
        url("/assets/CTA-1-w1200.jpg")  type("image/jpeg") 1x
      );
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      image-set(
        url("/assets/CTA-1-w1200.avif") type("image/avif") 1x,
        url("/assets/CTA-1-w1200.webp") type("image/webp") 1x,
        url("/assets/CTA-1-w1200.jpg")  type("image/jpeg") 1x
      );
  }
}
.cta-card > *{ position:relative; z-index:1 }
.cta-copy{ max-width:780px }
.cta-eyebrow{ margin:0 0 6px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; opacity:.92; display:inline-flex; align-items:center; gap:16px }
.cta-eyebrow::after{ content:""; width:72px; height:4px; border-radius:2px; background:rgba(255,255,255,.75); transform:translateY(-1px) }
.cta-title{ margin:6px 0 0; font-size:clamp(30px,5.2vw,48px); line-height:1.06; font-weight:700; letter-spacing:.01em }
.cta-title-2{ margin:6px 0 0; font-size:clamp(23px,4.8vw,37px); line-height:1.06; font-weight:700; letter-spacing:.01em }
.cta-card .cta-btn{ margin-left:auto }
@media (max-width:900px){
  .cta-card{ flex-direction:column; align-items:flex-start }
  .cta-btn{ width:100% }
}
/* CTA-band button (separate from .cta-submit in the form) */
.cta-btn__text{
  display:inline-block;
  will-change: transform;
}

.cta-btn{
  /* colors (match earlier design) */
  --c1:#4b68d5;
  --c2:#3b56bf;
  --c1h:#3b56bf;
  --c2h:#4b68d5;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: clamp(48px, 7.2vw, 72px);
  padding: 0 clamp(5px, 2vw, 15px);
  border-radius: 16px;
  font-weight: 800;
  font-size: clamp(16px, 1.3vw, 24px);
  letter-spacing: .01em;
  text-decoration: none;
  color:#fff;

  background: linear-gradient(135deg, var(--c1), var(--c2));
  border: 2px solid rgba(255,255,255,.85);
  box-shadow:
         0 16px 36px -18px rgba(0,0,0,.55),
    8px -8px 18px -16px rgba(0,0,0,.35);

  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

/* hover / active / focus */
.cta-btn:hover{
  background: linear-gradient(135deg, var(--c1h), var(--c2h));
  transform: translateY(-1px);
  color:#D8D1D1;
  border: 4px solid rgba(255,255,255,.85);
}
.cta-btn:active{ transform: translateY(0); }
.cta-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(79,114,255,.35),
    0 16px 36px -18px rgba(0,0,0,.55);
}

/* bounce-in on hover/focus */
.cta-btn:hover .cta-btn__text,
.cta-btn:focus-visible .cta-btn__text{
  animation: cta-text-bounce-in 420ms cubic-bezier(.22,1,.36,1);
}

/* bounce-out when leaving (toggle .leaving via tiny JS if used) */
.cta-btn.leaving .cta-btn__text{
  animation: cta-text-bounce-out 380ms cubic-bezier(.22,1,.36,1);
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .cta-btn__text{ animation: none !important; }
}

/* keyframes */
@keyframes cta-text-bounce-in{
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-4px); }
  60%  { transform: translateY(0); }
  78%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
@keyframes cta-text-bounce-out{
  0%   { transform: translateY(0); }
  40%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

/* mobile full-width helper (mirror your previous behavior) */
@media (max-width: 900px){
  .cta-btn{ width:100%; }
}

/* Base CTA section background (outside the card) */
.cta{
  background-image:url("/assets/cta-1-w900.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
@media (min-width:768px){
  .cta{ background-image:-webkit-image-set(
      url("/assets/cta-1-w900.avif") type("image/avif") 1x,
      url("/assets/cta-1-w900.webp") type("image/webp") 1x,
      url("/assets/cta-1-w900.jpg") type("image/jpeg") 1x
    );
    background-image:image-set(
      url("/assets/cta-1-w900.avif") type("image/avif") 1x,
      url("/assets/cta-1-w900.webp") type("image/webp") 1x,
      url("/assets/cta-1-w900.jpg") type("image/jpeg") 1x
    );
  }
}
@media (min-width:1200px){
  .cta{ background-image:-webkit-image-set(
      url("/assets/cta-1-w1200.avif") type("image/avif") 1x,
      url("/assets/cta-1-w1200.webp") type("image/webp") 1x,
      url("/assets/cta-1-w1200.jpg") type("image/jpeg") 1x
    );
    background-image:image-set(
      url("/assets/cta-1-w1200.avif") type("image/avif") 1x,
      url("/assets/cta-1-w1200.webp") type("image/webp") 1x,
      url("/assets/cta-1-w1200.jpg") type("image/jpeg") 1x
    );
  }
}



/* ===== Badges ===== */
.badge-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:0;padding:0;list-style:none}


/* === Contrast-safe ribbons: dark text, colored accent via --accent === */
.ribbon{
--accent:#1d4ed8; /* default; overridden per theme */
position:relative;display:inline-flex;align-items:center;gap:.5em;
font:600 13px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:#0f172a; /* dark label for 7+:1 on white */
background:#ffffff; /* pure white for reliable contrast */
padding:.5em 1.0em .5em 1.1em;
border:1px solid #e2e8f0; border-radius:8px; min-width:132px;
box-shadow:0 1px 2px rgba(0,0,0,.04);
transition:transform .22s ease, box-shadow .22s ease, clip-path .22s ease, border-color .22s ease, background .22s ease;
}
.ribbon::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;border-radius:8px 0 0 8px;background:var(--accent)}

/* themes (only set the accent, not text color) */
.ribbon--gaap{--accent:#1d4ed8}
.ribbon--ifrs{--accent:#166534}
.ribbon--vat{--accent:#7c2d12}
.ribbon--uae-ct{--accent:#5b21b6}
.ribbon--wcgr { --accent:#0e7490; }
.ribbon--coso { --accent:#004aad }   /* deep corporate blue – control framework */
.ribbon--icfr { --accent:#027a48 }   /* audit green – compliance / assurance */
.ribbon--risk { --accent:#c2410c }   /* orange-brown – risk identification */
.ribbon--pbc { --accent:#1d4ed8 }         /* blue – documentation precision */
.ribbon--tieout { --accent:#047857 }      /* green – accuracy verification */
.ribbon--disclosures { --accent:#92400e } /* amber – reporting clarity */
.ribbon--queries { --accent:#7e22ce }     /* violet – communication & closure */
/* Hover: morph to ticket style using the accent color, keep text dark */
.ribbon:hover{
transform:translateY(-1px);
border:1px dashed var(--accent);
border-radius:6px 0 0 6px;
clip-path:polygon(0% 0%,calc(100% - 10px) 0%,100% 50%,calc(100% - 10px) 100%,0% 100%);
background:#ffffff; /* keep white for max contrast */
box-shadow:0 4px 12px rgba(0,0,0,.10);
}
.ribbon:hover::before{opacity:0}
.ribbon:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  text-underline-offset: 2px;
}

.ribbon abbr {
  color: inherit;
  font-weight: 700;
}

/* Dark mode preview */
.preview-dark{background:#0b1220;color:#e5e7eb;border-color:#1f2937}
.preview-dark .section{background:#0f172a;border-color:#1f2937;box-shadow:none}
.preview-dark .ribbon{background:#111827;color:#e5e7eb;border-color:#334155}
.preview-dark .ribbon:hover{background:#111827}
/* ===== CTA Animation ===== */
/* Accessibility: no motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cta-card--anim,
  .hero-cta--anim { transition: none !important; animation: none !important; }
}

/* CARD: subtle slide-up + fade */
.cta-card--anim {
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease, transform .6s ease;
}
.cta-card--anim.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* Button: slower, more noticeable entrance */
.hero-cta--anim {
  opacity: 0;
  transform: translateY(8px) scale(.90);
  transition:
    opacity .6s ease .35s,                              /* later start so card finishes first */
    transform .9s cubic-bezier(.22,.95,.25,1.25) .35s;  /* longer + gentle overshoot */
  will-change: transform, opacity;
}

/* when the card becomes visible, reveal button */
.cta-card--anim.is-inview .hero-cta--anim {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* runs one time, lightly */
@keyframes ctaPing {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(0) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

/* start the ping ~1s after it becomes visible */
.cta-card--anim.is-inview .hero-cta--anim {
  animation: ctaPing 1.1s cubic-bezier(.22,.6,.2,1) 1 1s both;
}


/* ===== Stats ===== */
.stats{ padding:clamp(20px,4vw,26px) 0; background:#e6eef9; color:#1C2A4F }
.stats-eyebrow{ --rule:clamp(40px,7vw,96px); margin:0 0 6px; font:800 clamp(13px,1.2vw,16px)/1.1 system-ui,sans-serif; letter-spacing:.24em; text-transform:uppercase; display:flex; align-items:center; gap:14px }
.stats-eyebrow::after{ content:""; width:var(--rule); height:4px; background:rgba(12,18,34,.25); border-radius:2px; flex:0 0 auto }
.stats-sub{ margin:4px 0 5px; font-weight:600; font-size:clamp(18px,2.4vw,28px); color:#25306a; opacity:.95 }
.stats-grid{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px,4vw,56px); grid-template-columns:repeat(4,minmax(0,1fr)); text-align:center; align-items:start }
@media (max-width:900px){ .stats-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .stats-grid{ grid-template-columns:1fr } }
.stat-number{ display:inline-block; min-width:3ch; font-weight:800; font-size:clamp(20px,6.5vw,42px); letter-spacing:.01em; color:#282A7D }
.stat-number::after{ content:attr(data-suffix); margin-left:.08em }
.stat p{ margin:.4rem 0 0; color:#2b2f66; font-weight:600 }
@media (prefers-reduced-motion:reduce){ .stat-number{ transition:none } }

/* ===== Stack (carousel) ===== */
.stack{ --rule:88px; --ctrl:56px; --ctrl-gap:12px; padding:clamp(16px,5vw,22px) 0; color:#fff; position:relative; overflow:hidden }
.stack>.container{ position:relative; z-index:1 }
.stack::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
    url("/assets/CTA-2-w600.jpg");
  background-image:
    linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
    -webkit-image-set(
      url("/assets/CTA-2-w600.avif") type("image/avif") 1x,
      url("/assets/CTA-2-w600.webp") type("image/webp") 1x,
      url("/assets/CTA-2-w600.jpg") type("image/jpeg") 1x
    );
  background-image:
    linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
    image-set(
      url("/assets/CTA-2-w600.avif") type("image/avif") 1x,
      url("/assets/CTA-2-w600.webp") type("image/webp") 1x,
      url("/assets/CTA-2-w600.jpg") type("image/jpeg") 1x
    );
  background-size:cover; background-position:center; background-repeat:no-repeat; filter:saturate(1.05); z-index:0;
}
@media (min-width:768px){
  .stack::before{
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      url("/assets/CTA-2-w768.jpg");
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      -webkit-image-set(
        url("/assets/CTA-2-w768.avif") type("image/avif") 1x,
        url("/assets/CTA-2-w768.webp") type("image/webp") 1x,
        url("/assets/CTA-2-w768.jpg")  type("image/jpeg") 1x
      );
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      image-set(
        url("/assets/CTA-2-w768.avif") type("image/avif") 1x,
        url("/assets/CTA-2-w768.webp") type("image/webp") 1x,
        url("/assets/CTA-2-w768.jpg")  type("image/jpeg") 1x
      );
  }
}
@media (min-width:1200px){
  .stack::before{
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      url("/assets/CTA-2-w1200.jpg");
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      -webkit-image-set(
        url("/assets/CTA-2-w1200.avif") type("image/avif") 1x,
        url("/assets/CTA-2-w1200.webp") type("image/webp") 1x,
        url("/assets/CTA-2-w1200.jpg")  type("image/jpeg") 1x
      );
    background-image:
      linear-gradient(120deg, rgba(12,18,34,.78), rgba(30,44,78,.68)),
      image-set(
        url("/assets/CTA-2-w1200.avif") type("image/avif") 1x,
        url("/assets/CTA-2-w1200.webp") type("image/webp") 1x,
        url("/assets/CTA-2-w1200.jpg")  type("image/jpeg") 1x
      );
  }
}
.stack-title{ margin:0 0 8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#e9eefb; display:flex; align-items:center; gap:14px }
.stack-title::after{ content:""; width:var(--rule); height:4px; border-radius:2px; background:#e9eefb; opacity:.9; translate:0 -1px }
.stack-lede{ margin:6px 0 18px; color:#c9d3ee; font-weight:600 }
.stack-wrap{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px }
.stack-viewport{
  --cols:4; overflow:auto; -ms-overflow-style:none; scrollbar-width:none; scroll-snap-type:none;
  padding-inline: calc(var(--ctrl) + var(--ctrl-gap) + 6px);
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
}
.stack-viewport::-webkit-scrollbar{ display:none }
.brand-row{ --gap:clamp(15px,5vw,30px); display:flex; flex-wrap:nowrap; gap:var(--gap); margin:0; padding:6px 4px; list-style:none }
.brand-row>li{ flex:0 0 calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols)); max-width:calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols)); content-visibility:auto; contain-intrinsic-size:0 70px; contain:paint; min-width:0 }
.brand{ display:flex; flex-direction:row; align-items:center; flex-wrap:nowrap; gap:clamp(12px,1.6vw,18px); line-height:1; min-width:0 }
.brand-ico{ display:block; flex:0 0 auto; width:clamp(46px,5.5vw,74px); height:clamp(46px,5.5vw,74px); object-fit:contain }
.brand .brand-ico[alt="Oracle"], .brand .brand-ico[alt="Tally"]{ width:150px; height:100% }
@media (max-width:768px){
  .brand-ico{ width:clamp(38px,12vw,56px); height:clamp(38px,12vw,56px) }
  .brand .brand-ico[alt="Oracle"], .brand .brand-ico[alt="Tally"]{ width:80px; height:100% }
}
.stack.on-dark .brand-ico{ filter:brightness(0) invert(1) }
.brand-name{ display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:800; letter-spacing:.01em; color:#E8EDF6; font-size:clamp(12px,2.2vw,20px) }
.brand-name[data-twoline="1"]{ white-space:pre-line; text-overflow:clip; line-height:1.08 }
@media (max-width:1024px){ .brand-name[data-twoline="1"]{ max-width:16ch } .brand{ flex-direction:column; align-items:center; gap:10px; text-align:center } .brand-row>li{ flex:0 0 clamp(120px,20vw,170px) } .brand-name{ white-space:normal; max-width:16ch } }
.slider-dots{ position:absolute; inset:auto 0 16px; display:flex; gap:10px; justify-content:center }
.slider-dots button{ width:8px; height:8px; border-radius:50%; background:#fff6; border:2px solid #fff9 }
.slider-dots button[aria-current="true"]{ background:#fff; display:none !important }
.stack .stack-btn, .stack .slider-nav button{
  inline-size:var(--ctrl); block-size:var(--ctrl); border-radius:50% !important; display:grid; place-items:center;
  color:#fff !important; background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.25) !important;
  backdrop-filter:blur(6px); box-shadow:0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.stack .stack-btn:hover, .stack .slider-nav button:hover{ background:rgba(255,255,255,.18) !important; transform:translateY(-1px) }
.stack .stack-btn svg, .stack .slider-nav button svg{ width:22px; height:22px; stroke:currentColor; stroke-width:2; fill:none; pointer-events:none }
@media (max-width:768px){
  .stack-viewport{ --cols:2; padding-inline:calc(var(--ctrl)/2 + var(--ctrl-gap) + 6px) }
  .brand-row{ --gap:clamp(10px,4vw,18px) }
  .brand{ gap:10px } .brand-ico{ width:clamp(38px,12vw,56px); height:clamp(38px,12vw,56px) }
  .brand-name{ font-size:clamp(11px,3.6vw,15px) }
  .stack{ --ctrl:44px }
}
@media (max-width:468px){
  .stack-viewport{ --cols:1; padding-inline:calc(var(--ctrl) + var(--ctrl-gap) + 6px) }
  .stack{ --ctrl:40px }
}
/* ===== Brand strip: whole-section reveal (no per-icon motion) ===== */
/* Default visible without JS; motion applies only when js adds .js-motion */
.js-motion .js-stack {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}

.js-motion .js-stack.is-inview {
  opacity: 1;
  transform: none;
}

/* one-time gentle settle wobble on the inner wrap after the reveal */
.js-motion .js-stack.is-inview .stack-wrap {
  animation: stackSettle 800ms cubic-bezier(.22,.7,.2,1) 1 .25s both;
}

@keyframes stackSettle {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(6px); }
  50%  { transform: translateX(-4px); }
  75%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* Optional polish: soft edge fade so items feel framed (no layout change) */
.stack-viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js-stack,
  .stack-wrap { transition: none !important; animation: none !important; }
}

/* ===== Contact / CTA-solid (form) ===== */
.cta-solid{ --bg:#343a4f; --fg:#e9eefb; --muted:#c5cde6; --field:#2d3348; --border:rgba(255,255,255,.30); --border-quiet:rgba(255,255,255,.22); --accent:#4b74ff; --accent-shadow:rgba(75,116,255,.25) }
.cta-solid{ background:#353B5A; color:var(--fg); padding:clamp(20px,3vw,46px) 0 }
.cta-solid .container{ max-width:1200px; margin:0 auto; padding:0 clamp(18px,3.6vw,28px); display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,54px); align-items:start }
.cta-title-3{ margin:0 0 10px; font-size:20px; letter-spacing:.08em; text-transform:uppercase; font-weight:800 }
.cta-title-3::after{ content:""; display:inline-block; width:var(--rule,88px); height:4px; margin-left:14px; background:var(--fg); border-radius:2px; vertical-align:middle; transform:translateY(-1px) }
.cta-points{ margin:20px 0 0; padding:0; list-style:none; display:grid; gap:20px }
.cta-points li{ position:relative; padding-left:28px; color:var(--muted); line-height:1.45 }
.cta-points li b{ color:var(--fg); font-weight:700 }
.cta-points li::before{ content:"✓"; position:absolute; left:0; top:.05em; font-weight:800; color:white }
.cta-form{ display:grid; gap:10px }
.fld{ position:relative; border-radius:12px; border:1px solid var(--border-quiet); transition:border-color .18s ease, box-shadow .18s ease }
.fld input,.fld textarea{ appearance:none; width:100%; border:0; outline:0; background:transparent; color:var(--fg); font:inherit; padding:5px 16px 5px; border-radius:10px }
.fld label{
  position:absolute; left:14px; top:12px; padding:0 3px; line-height:1; color:var(--muted); pointer-events:none; background:var(--bg);
  transform-origin:left center; transition:transform .18s ease, color .18s ease, background .18s ease; z-index:1;
}
.fld:hover{ border-color:var(--border) }
.fld:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-shadow) }
.fld input:focus + label, .fld textarea:focus + label,
.fld input:hover + label, .fld textarea:hover + label,
.fld input:not(:placeholder-shown) + label, .fld textarea:not(:placeholder-shown) + label{
  transform:translateY(-16px) scale(.92); color:var(--accent)
}
.fld-textarea textarea{ padding-top:10px; max-height:90px }
@media (max-width:992px){ .cta-solid .container{ grid-template-columns:1fr } }
@media (max-width:560px){
  .fld label{ left:12px }
  .fld input,.fld textarea{ padding:16px 14px 12px }
}
.form-status{ margin-top:8px; font-size:14px; min-height:1.2em }
.captcha-note{ margin-top:0; font-size:10px; line-height:1; color:var(--muted) }
.captcha-note a{ color:inherit; text-decoration:underline; text-underline-offset:2px }
.captcha-note a:hover{ text-decoration-thickness:2px }
.form-status{ margin-top:0; min-height:1.2em; font-size:14px; color:#ffd7d7 }
.form-status.ok{ color:#9cf3b0 } .form-status.err{ color:#ffd7d7 }
.cta-form .fld.has-error{ border-color:#ff6b6b }
.cta-form .fld-err{ display:block; margin:6px 12px 8px; font-size:12px; color:#ffb3b3 }
.cta-btn[disabled]{ opacity:.6; cursor:not-allowed }
.fld-hint{ display:block; margin:6px 12px 8px; font-size:12px; color:var(--muted) }
.btn-loading{ justify-self:start; display:inline-grid; place-items:center; padding:13px 28px; border-radius:12px; border:1px solid var(--border-quiet); background:rgba(255,255,255,.06); box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08); min-width:160px }
.spinner{ width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .spinner{ animation:none; border:3px solid #fff; border-right-color:rgba(255,255,255,.35) } }
.btn-loading{ display:none; align-items:center; justify-content:center }
[hidden]{ display:none !important }
.btn-loading:not([hidden]){ display:inline-flex }
.cta-submit__label{ display:inline-block; will-change:transform }
.cta-submit{
  --c1:#4b68d5; --c2:#3b56bf; --c1h:#3b56bf; --c2h:#4b68d5;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:clamp(48px,7.2vw,72px); padding:0 clamp(5px,2vw,15px); border-radius:16px; font-weight:800; font-size:clamp(16px,1.3vw,24px);
  letter-spacing:.01em; text-decoration:none; color:#fff; background:linear-gradient(135deg,var(--c1),var(--c2));
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 16px 36px -18px rgba(0,0,0,.55), 8px -8px 18px -16px rgba(0,0,0,.35);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cta-submit:hover{ background:linear-gradient(135deg,var(--c1h),var(--c2h)); transform:translateY(-1px); color:#D8D1D1; border:4px solid rgba(255,255,255,.85) }
.cta-submit:active{ transform:translateY(0) }
.cta-submit:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(79,114,255,.35), 0 16px 36px -18px rgba(0,0,0,.55) }
.cta-submit.is-loading .cta-submit__label{ display:none }
.cta-submit.is-loading::after{ content:none !important }
.cta-submit__dots[hidden], .cta-submit__bar[hidden]{ display:none !important }
.cta-submit__dots{ display:inline-flex; gap:.25em }
.cta-submit__dots i{ font-style:normal; opacity:.25; animation:dotBlink 1.1s infinite ease-in-out }
.cta-submit__dots i:nth-child(2){ animation-delay:.15s }
.cta-submit__dots i:nth-child(3){ animation-delay:.30s }
@keyframes dotBlink{ 0%,80%,100%{ opacity:.25 } 40%{ opacity:1 } }
.cta-submit__bar{ position:relative; inline-size:100%; block-size:12px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden }
.cta-submit__bar-inner{ position:absolute; left:0; top:0; bottom:0; inline-size:0%; background:#fff; z-index:1; transition:inline-size .22s ease }
.cta-submit__bar-text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#0b1220; z-index:2; mix-blend-mode:normal }
.form-alert{ display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:14px; margin-top:10px; box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05); border:1px solid transparent; background:#241f27; color:#f1e9ff }
.form-alert--ok{ border-color:#35c98a; background:#0f1f1a; color:#ccffea }
.form-alert--err{ border-color:#d86464; background:#2b1f22; color:#ffe3e3 }
.form-alert__icon{ width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.1) }
.form-alert--ok .form-alert__icon{ background:rgba(53,201,138,.2); color:#35c98a }
.form-alert--err .form-alert__icon{ background:rgba(216,100,100,.2); color:#ff9a9a }
.form-alert__text b{ display:block; margin-bottom:2px; font-weight:800 }
#cf-status{ margin-top:10px }
/* ===== Contact block motion (JS-scoped, slower + stronger) ===== */
.js-motion .js-cta-solid {
  opacity: 0;
  transform: translateY(40px) scale(.985);
  transition: opacity 0.9s ease, transform 0.9s ease;
  will-change: transform, opacity;
}
.js-motion .js-cta-solid.is-inview {
  opacity: 1;
  transform: none;
}

/* Bullets (left column) */
.js-motion .point--anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.js-motion .js-cta-solid.is-inview .point--anim {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 0.08s);
}

/* Fields (right column) */
.js-motion .fld--anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: transform, opacity;
}
.js-motion .js-cta-solid.is-inview .fld--anim {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--j, 0) * 0.1s);
}

/* Submit button pop */
.js-motion .cta-submit--anim {
  opacity: 0;
  transform: translateY(10px) scale(.92);
  transition:
    opacity 0.8s ease,
    transform 1.1s cubic-bezier(.22,.95,.25,1.25);
}
.js-motion .js-cta-solid.is-inview .cta-submit--anim {
  opacity: 1;
  transform: none;
  animation: ctaSubmitPing 1.2s cubic-bezier(.22,.6,.2,1) 1 1.3s both;
}
@keyframes ctaSubmitPing {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(0) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js-cta-solid, .point--anim, .fld--anim, .cta-submit--anim {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Footer ===== */
.site-footer{ background:#0f0f10; color:#d9d9e0; padding:64px 24px 24px }
.site-footer .ft-wrap{
  max-width:1200px; margin-inline:auto; display:grid;
  grid-template-columns:1.1fr .6fr .9fr; gap:48px 32px;
}
.site-footer .ft-title{ color:#fff; font-size:1.625rem; line-height:1.2; margin:0 0 20px }
.site-footer .ft-text{ color:#a9a9b3; line-height:1.8; margin:0 0 24px }
.ft-social{ display:flex; gap:14px; margin-top:8px }
.ft-social-btn{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#fff; color:#0a56ff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:background .25s ease, color .25s ease, transform .2s ease, box-shadow .2s ease }
.ft-social-btn svg{ display:block }
.ft-social-btn:hover{ background:linear-gradient(135deg,#0a56ff 0%,#b13bff 100%); color:#fff; transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.35) }
.ft-links{ list-style:none; padding:0; margin:0 }
.ft-links li+li{ margin-top:14px }
.ft-links a{ color:#dfe3ec; text-decoration:none; font-size:1.05rem }
.ft-links a:hover{ color:#5b8cff }
.ft-contact-list{ list-style:none; padding:0; margin:0 }
.ft-contact-list li{ display:flex; align-items:center; gap:12px; margin:18px 0 }
.ft-contact-list a{ color:#dfe3ec; text-decoration:none }
.ft-contact-list a:hover{ color:#5b8cff }
.ft-ico{ display:inline-grid; place-items:center; width:28px; height:28px; color:#2e66ff }
.ft-bar{ border-top:1px solid rgba(255,255,255,.08); margin-top:36px; padding-top:18px; text-align:center; color:#c9ccd6; font-size:.98rem }
@media (max-width:992px){ .site-footer .ft-wrap{ grid-template-columns:1fr 1fr } .ft-brief{ grid-column:1 / -1 } }
@media (max-width:600px){ .site-footer{ padding:48px 16px 20px } .site-footer .ft-wrap{ grid-template-columns:1fr; gap:36px } }