/* ===== 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 */
.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;   /* bigger rise than mobile's 28px */
    --reveal-dur: 1.35s;     /* a bit longer than the list’s 0.75s */
    --reveal-delay: .18s;    /* tiny delay so it doesn’t feel instant */
    /* (optional) ease tweak:
       --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 }

/* #pain text/image: wipe-in without shifting layout */
@media (prefers-reduced-motion:no-preference){
  /* Left block: reveal left ➜ right (clip from the RIGHT) */
  #challenges .reveal-left{
    opacity: 0;
    clip-path: inset(0 100% 0 0); /* right inset 100% = fully clipped, anchored left */
    will-change: clip-path, opacity;
    transition:
      clip-path 950ms cubic-bezier(.22,.61,.36,1) .06s,
      opacity   520ms ease .06s;
    transform: translateZ(0); /* GPU hint; no movement */
  }
  #challenges .reveal-left.in{
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  /* Right block: reveal right ➜ left (clip from the LEFT) */
  #challenges .reveal-right{
    opacity: 0;
    clip-path: inset(0 0 0 100%); /* left inset 100% = fully clipped, anchored right */
    will-change: clip-path, opacity;
    transition:
      clip-path 1050ms cubic-bezier(.22,.61,.36,1) .12s,
      opacity   560ms ease .12s;
    transform: translateZ(0);
  }
  #challenges .reveal-right.in{
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  /* prevent sub-pixel overflow while clipping */
  #challenges .pain-copy,
  #challenges .pain-visual { overflow: hidden; }
}

/* Reduced-motion: show immediately without clipping */
@media (prefers-reduced-motion:reduce){
  #challenges .reveal-left,
  #challenges .reveal-right{
    opacity:1;
    clip-path: none;
    transition: none;
  }
}





/* ===== 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-copy-2{ max-width:100% }
.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 } }

.amn-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.6;
}

.amn-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.amn-feature-list li::first-letter {
  font-size: 1.3em;
}

.amn-feature-list strong {
  font-weight: 600;
  color: #fff;
}
.cta-copy{ max-width:680px }
.cta-eyebrow-mm{ font-size:28px;margin:0px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; opacity:.92; display:inline-flex; align-items:center; gap:16px }
.cta-eyebrow-mm::after{ content:""; width:72px; height:4px; border-radius:2px; background:rgba(255,255,255,.75); transform:translateY(-1px) }
.cta-title-mm { margin:0px; font-size:clamp(14px,5.2vw,20px); line-height:1.3; font-weight:700; letter-spacing:.01em;text-align: justify; }
.cta-eyebrow-ext{ font-size:20px;margin:0px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; opacity:.92; display:inline-flex; align-items:center; gap:10px }
.cta-eyebrow-ext::after{ content:""; width:72px; height:4px; border-radius:2px; background:rgba(255,255,255,.75); transform:translateY(-1px) }
.cta-title-ext { margin:0px; font-size:14px; line-height:1.3; font-weight:700; letter-spacing:.01em;text-align: justify; }
/* ===== Why section ===== */

.why-list-mm{ display:grid; gap:10px; margin:0; padding:0; list-style:none }
.why-list-mm li{ display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start }
.why-list-mm .ico{ width:28px; height:28px; display:grid; place-items:center; font-size:20px; line-height:1; transform:translateY(1px) }
.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 }
.eyebrow::after{ content:""; height:4px; width:var(--line); background:#3B5BFF; border-radius:2px }
.two-col-wrap h2{ margin:6px 0 14px; font-size:clamp(22px,4.4vw,32px); line-height:1.08; font-weight:800; color:#081842 }
.section-heading {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #0b1628;
  margin-bottom: .5rem;
}
.section-heading .ico {
  font-size: 1.4rem;
}
.line {
margin: 2.5rem auto;
width: 80%; /* Centered and narrower */
}


/* Option 1 – Simple */
.line-basic {
height: 1px;
background: rgba(0,0,0,0.15);
}


/* Option 2 – Gradient */
.line-gradient {
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.2), transparent);
border-radius: 1px;
}


/* Option 3 – Dotted */
.line-dotted {
border-top: 1px dotted rgba(0,0,0,0.4);
}


/* Option 4 – Centered Short Bar */
.line-center {
width: 80px;
height: 3px;
background: #0b1628;
margin: 3rem auto;
border-radius: 2px;
}
/* ===== Accent color variations (brand shades) ===== */
.accent{ color:#3B5BFF }
.accent2 { color: #FF3B3B; }   /* vivid red accent */
.accent3 { color: #062371; }   /* dark navy accent */

/* ===== Eyebrow color variations (brand shades) ===== */
.eyebrow2 {
  --line: 64px;
  margin: 0 0 6px;
  font: 700 14px/1.1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #FF3B3B; /* bright red */
  display: flex;
  align-items: center;
  gap: 16px;
}
.eyebrow2::after {
  content: "";
  height: 4px;
  width: var(--line);
  background: #FF3B3B; /* same red line */
  border-radius: 2px;
}

.eyebrow3 {
  --line: 64px;
  margin: 0 0 6px;
  font: 700 14px/1.1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #062371; /* deep blue */
  display: flex;
  align-items: center;
  gap: 16px;
}
.eyebrow3::after {
  content: "";
  height: 4px;
  width: var(--line);
  background: #062371; /* matching deep blue bar */
  border-radius: 2px;
}

.packages { background: #f7f9fc; padding: 20px 0px 20px 0px; }
.packages .pkg-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
.packages .pkg-card { position: relative; border-radius: 22px; padding: 14px 18px 30px; min-width: min(92%, 520px); scroll-snap-align: center; scroll-snap-stop: always; transition: box-shadow 0.25s ease, transform 0.25s ease; box-shadow: 0 10px 30px rgba(14, 22, 80, 0.08); }


@media (min-width: 1024px) {
  .packages .pkg-row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 800px) and (max-width: 1023px) {
.packages .pkg-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.packages .pkg-card:nth-child(3) {
grid-column: 1 / -1;
justify-self: center;
width: 80%;
}
}

/* STARTER PACKAGE */
 .pkg-card.starter { background:#fff; color:#1b2340; position:relative; }
 .pkg-card.starter::before, .packages .pkg-card.starter::after { content:""; position:absolute; width:64px; height:64px; background:linear-gradient(135deg,#5e7ae9,#6a91ff); transition:background .3s ease; }
 .pkg-card.starter::before { top:0; right:0; border-top-right-radius:22px; border-bottom-left-radius:64px; }
 .pkg-card.starter::after { bottom:0; left:0; border-bottom-left-radius:22px; border-top-right-radius:64px; }
.pkg-card.starter:hover::before, .packages .pkg-card.starter:hover::after { background:linear-gradient(135deg,#ff3b3b,#ff5a5a); }
 .pkg-card.starter .pkg-title { font-size:20px; font-weight:700; color:#2735d0; }
.pkg-card.starter .pkg-sub { color:#5e677c; font-size:13px; margin-bottom:12px; }
.pkg-card.starter .pkg-price { display:flex; align-items:baseline; gap:8px; margin:10px 0 14px; }
 .pkg-card.starter .pkg-price .amount { font-size:34px; font-weight:800; color:#0f1e82; }
.pkg-card.starter .pkg-price .period { font-size:13px; color:#4860ff; font-weight:600; }
 .pkg-card.starter .feat-list { list-style:none; padding:0; margin:0 0 20px 0; display:grid; gap:10px; }
.pkg-card.starter .feat-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; }
.pkg-card.starter .feat-list li::before { content:"✔"; display:inline-block; flex:0 0 24px; width:24px; text-align:center; font-size:13px; color:#5e7ae9; line-height:1; margin-top:3px; transition:color .3s ease; }
.pkg-card.starter .feat-list li.bestfor { align-items: center; flex-wrap: nowrap; }
.pkg-card.starter .pkg-cta { margin-top:24px; display:flex; justify-content:start; }
.pkg-card.starter .pkg-cta .cta-btn { border:none; border-radius:14px; padding:14px 22px; font-weight:600; color:#fff; background:linear-gradient(135deg,#6ea0ff,#2f49b9); cursor:pointer; transition:transform .2s ease, filter .2s ease; box-shadow:0 8px 20px rgba(20,46,150,0.18); margin-bottom:16px; }
.pkg-card.starter .pkg-cta .cta-btn:hover { transform:translateY(-1px); filter:saturate(1.05); }
.pkg-card.starter:hover .feat-list li::before { color:#ff3b3b !important; }
.pkg-card.starter:hover .feat-list li.bestfor::before { filter:none; color:#ff3b3b !important; }
.pkg-card.starter .feat-list li.bestfor::before {
  /* force text presentation so color works */
  content: "👥︎"; /* 👥 + VS15 (text style) */
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  text-align: center;
  font-size: 16px;
  color: #5e7ae9;           /* same blue as ticks */
  line-height: 1;
  margin-top: 0;
  transition: color .3s ease;
}



/* PROFESSIONAL PACKAGE */
.packages .pkg-card.pro { background: linear-gradient(180deg,#1e3a8a 0%,#274fc7 100%); color:#fff; box-shadow:0 20px 60px rgba(14,22,80,0.25); position:relative; overflow:hidden; transition:background .4s ease,transform .25s ease; }
.packages .pkg-card.pro::after { content:""; position:absolute; inset:0; background:rgba(110,160,255,0); transition:background .4s ease; border-radius:22px; z-index:0; }
.packages .pkg-card.pro:hover::after { background:rgba(110,160,255,0.25); }
.packages .pkg-card.pro * { position:relative; z-index:1; }
.packages .pkg-card.pro .pkg-title { color:#fff; }
.packages .pkg-card.pro .pkg-sub { color:rgba(255,255,255,.85); }
.packages .pkg-card.pro .pkg-price { display:flex; align-items:baseline; gap:8px; margin:10px 0 14px; }
.packages .pkg-card.pro .pkg-price .amount { font-size:34px; font-weight:800; color:#ffffff; letter-spacing:0.2px; text-shadow:0 1px 0 rgba(0,0,0,.12); }
.packages .pkg-card.pro .pkg-price .period { font-size:13px; color:rgba(255,255,255,0.92); font-weight:600; }
.packages .pkg-card.pro .feat-list { list-style:none; padding:0; margin:0 0 20px 0; display:grid; gap:10px; }
.packages .pkg-card.pro .feat-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; }
.packages .pkg-card.pro .feat-list li::before { content:"✔"; display:inline-block; flex:0 0 24px; width:24px; text-align:center; font-size:13px; color:#fff; opacity:.9; line-height:1; margin-top:3px; }
.packages .pkg-card.pro .feat-list li.bestfor { align-items: center; flex-wrap: nowrap; }
.packages .pkg-card.pro .feat-list li.bestfor::before { content:"👥︎"; display:inline-block; flex:0 0 24px; width:24px; text-align:center; font-size:16px; color:inherit; line-height:1; margin-top:0; filter:brightness(0) invert(1); }
.packages .pkg-card.pro .pkg-cta { margin-top:24px; display:flex; justify-content:start; }
.packages .pkg-card.pro .pkg-cta .cta-btn { border:none; border-radius:14px; padding:14px 22px; font-weight:600; color:#fff; background:rgba(255,255,255,0.15); cursor:pointer; transition:background .3s ease,transform .2s ease; box-shadow:0 8px 20px rgba(0,0,0,0.18); margin-bottom:16px; backdrop-filter:blur(4px); }
.packages .pkg-card.pro .pkg-cta .cta-btn:hover { background:rgba(255,255,255,0.3); transform:translateY(-1px); }

  
/* ENTERPRISE PACKAGE */
.packages .pkg-card.enterprise { background:#fff; color:#1b2340; transition:background .4s ease,color .4s ease; }
.packages .pkg-card.enterprise:hover { background: linear-gradient(180deg,#1e3a8a 0%,#274fc7 100%); color:#fff; }
.packages .pkg-card.enterprise:hover .pkg-title, 
.packages .pkg-card.enterprise:hover .pkg-sub, 
.packages .pkg-card.enterprise:hover .pkg-price .amount, 
.packages .pkg-card.enterprise:hover .pkg-price .period, 
.packages .pkg-card.enterprise:hover .feat-list li::before { color:#fff; }
.packages .pkg-card.enterprise .pkg-title { font-size:20px; font-weight:700; color:#2735d0; }
.packages .pkg-card.enterprise .pkg-sub { color:#5e677c; font-size:13px; margin-bottom:12px; }
.packages .pkg-card.enterprise .pkg-price { display:flex; align-items:baseline; gap:8px; margin:10px 0 14px; }
.packages .pkg-card.enterprise .pkg-price .amount { font-size:34px; font-weight:800; color:#0f1e82; }
.packages .pkg-card.enterprise .pkg-price .period { font-size:13px; color:#4860ff; font-weight:600; }
.packages .pkg-card.enterprise .feat-list { list-style:none; padding:0; margin:0 0 20px 0; display:grid; gap:10px; }
.packages .pkg-card.enterprise .feat-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; }
.packages .pkg-card.enterprise .feat-list li::before { content:"✔"; display:inline-block; flex:0 0 24px; width:24px; text-align:center; font-size:13px; color:#5e7ae9; opacity:.9; line-height:1; margin-top:3px; }
.packages .pkg-card.enterprise:hover .feat-list li::before { color:#fff; }
.packages .pkg-card.enterprise .feat-list li.bestfor { align-items: center; flex-wrap: nowrap; }
.packages .pkg-card.enterprise .feat-list li.bestfor::before  {
  /* force text presentation so color works */
  content: "👥︎"; /* 👥 + VS15 (text style) */
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  text-align: center;
  font-size: 16px;
  color: #5e7ae9;           /* same blue as ticks */
  line-height: 1;
  margin-top: 0;
  transition: color .3s ease;
}
.pkg-card.enterprise:hover .feat-list li::before { color:#fff !important; }
.pkg-card.enterprise:hover .feat-list li.bestfor::before { filter:none; color:#fff !important; }

.packages .pkg-card.enterprise .pkg-cta { margin-top:24px; display:flex; justify-content:start; }
.packages .pkg-card.enterprise .pkg-cta .cta-btn { border:none; border-radius:14px; padding:14px 22px; font-weight:600; color:#fff; background:linear-gradient(135deg,#6ea0ff,#2f49b9); cursor:pointer; transition:transform .2s ease, filter .2s ease; box-shadow:0 8px 20px rgba(20,46,150,0.18); margin-bottom:16px; }
.packages .pkg-card.enterprise .pkg-cta .cta-btn:hover { transform:translateY(-1px); filter:saturate(1.05); }


.packages-addon { background: #f7f9fc; padding: 16px; }
.pkg-addon-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
.packages-addon .pkg-card { position: relative; border-radius: 22px; padding: 24px 28px 50px; min-width: min(92%, 520px); scroll-snap-align: center; scroll-snap-stop: always; transition: box-shadow 0.25s ease, transform 0.25s ease; box-shadow: 0 10px 30px rgba(14, 22, 80, 0.08); }
.pkg-center {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
 
}


@media (min-width: 1024px) {
  .pkg-addon-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.pkg-addon-row {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}

}
/* Full-width background */
.two-col-wrap {
  background: #fff;          /* your desired full background color */
  width: 100%;
  padding: 10px 10px;  
  color:black;/* outer padding */
  text-align: justify;
}

/* Centered inner container */
.two-col-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  max-width: 1200px;            /* limits text width */
  margin: 0 auto;               /* centers content */
}

/* Columns */
.two-col-inner .col {
  flex: 1 1 48%;
  min-width: 300px;
}

/* Responsive stacking */
@media (max-width: 900px) {
  .two-col-inner {
    flex-direction: column;
    gap: 12px;
  }
  .two-col-inner .col {
    flex: 1 1 100%;
  }
}

/* Full-width background; constrain inner content only */
.faq-wrap {
  background: #fff; /* change if you want a tinted band */
  width: 100%;
  padding: clamp(8px, 2vw, 20px) 10px;
  
}

.faq-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  align-items: flex-start;
}

/* Two columns: left ~40%, right ~60% on desktop/tablets */
.faq-left { flex: 0 0 40%; }
.faq-right { flex: 1 1 60%; }

/* Stack on mobile */
@media (max-width: 768px) {
  .faq-inner { flex-direction: column; }
  .faq-left, .faq-right { flex: 1 1 100%; }
}


.faq-title {
  font-size: clamp(24px, 4vw, 44px);
  line-height: 1.05;
  color: #23306b;
  margin: 0 0 18px;
}
.btn-primary {
  display: inline-block;
  background: #232d6b;
  color: #fff;
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.btn-primary:hover {
  background: #fff;
  color: black;
  border:2px solid #000;
  
}

/* Accordion base */
.accordion { width: 100%; }
.acc-item + .acc-item { margin: 0px; }

.acc-btn {
  all: unset;
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  align-items: center;
  width: 100%;
  padding: 5px 5px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  /* gradient bar like screenshot */
  background: linear-gradient(135deg, #263a8a 0%, #4668c7 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  
}

/* Left icon (+) */
.acc-btn::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  font-weight: 800;
  
}

/* Right chevron */
.acc-btn::after {
  content: "›";
  justify-self: end;
  transform: rotate(0deg);
  transition: transform .25s ease;
  font-size: 20px;
  opacity: 0.9;
}

/* Expanded state visuals */
.acc-btn[aria-expanded="true"]::before { content: "–"; }
.acc-btn[aria-expanded="true"]::after { transform: rotate(90deg); }

/* Panel (answer) */
.acc-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease, opacity .2s ease;
  opacity: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  margin-top: -17px;
  text-align: justify;

}

.acc-panel p {
  color: #4a4f63;
  font-size: 18px;
  line-height: 1.6;
}

/* When open (JS adds .open) */
.acc-panel.open {
  opacity: 1;
  padding: 2px 10px;
  /* max-height set inline by JS to scrollHeight for smooth animation */
}

.section-single {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px) 16px;
  text-align: left;
}

.section-single .section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  line-height: 1.1;
  margin-bottom: 5px;
}

.section-single .why-list-mm {
  margin-top: 0;
}

.section-single .why-list-mm li {
  color: #444;
  font-size: 1.1rem;
}


.acc-item ul {
	list-style:none;
 color: #4a4f63;
  font-size: 18px;
  line-height: 1.6;}