/* ==========================================================
   VersaForge -Google Ranking Service (page stylesheet)
   ----------------------------------------------------------
   WHY THIS FILE EXISTS
   The site's style.css is a *static, pre-compiled* Tailwind
   build (no JIT at runtime). Any utility class not already in
   that build simply does nothing. This page needs a handful of
   utilities the homepage never used, plus its own components
   (accordion, timeline, counters).

   Rather than regenerate/modify the shared style.css -which
   risks a visual regression on the CEO-approved homepage -
   everything this page needs is defined here and loaded ONLY
   on this page. All values are taken from the existing design
   tokens / homepage palette; no new design language.
   ========================================================== */


/* ==========================================================
   1. UTILITIES MISSING FROM THE COMPILED TAILWIND BUILD
   (same naming + same values Tailwind would generate)
   ========================================================== */

/* Sizing */
.h-auto            { height: auto; }
.w-px              { width: 1px; }
.h-\[3px\]         { height: 3px; }
.w-44              { width: 11rem; }
.w-\[429px\]       { width: 429px; }
.max-w-\[60\%\]    { max-width: 60%; }

/* Spacing */
.gap-3\.5          { gap: 0.875rem; }
.mb-1\.5           { margin-bottom: 0.375rem; }
.mt-1\.5           { margin-top: 0.375rem; }
.pt-14             { padding-top: 3.5rem; }
.pb-20             { padding-bottom: 5rem; }
.pb-7              { padding-bottom: 1.75rem; }
.pl-14             { padding-left: 3.5rem; }
.last\:pb-0:last-child { padding-bottom: 0; }

/* Position */
.top-9             { top: 2.25rem; }
.left-\[8\%\]      { left: 8%; }
.left-\[17px\]     { left: 17px; }

/* Type */
.lg\:text-\[56px\] { font-size: 56px; }
.underline         { text-decoration-line: underline; }
.underline-offset-2{ text-underline-offset: 2px; }
.decoration-\[\#6A58E4\]\/30 { text-decoration-color: rgba(106,88,228,.3); }

/* Color / opacity */
.opacity-20        { opacity: 0.2; }
.bg-\[\#A78BFA\]   { background-color: #A78BFA; }
.bg-white\/90      { background-color: hsla(0,0%,100%,.9); }
.border-white\/20  { border-color: hsla(0,0%,100%,.2); }
.border-white\/30  { border-color: hsla(0,0%,100%,.3); }

/* Gradient stops used by the hero/dark-band scrims */
.from-\[\#0B0F19\]\/25 { --tw-gradient-from: rgba(11,15,25,.25) var(--tw-gradient-from-position); --tw-gradient-to: rgba(11,15,25,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#0B0F19\]\/50 { --tw-gradient-from: rgba(11,15,25,.50) var(--tw-gradient-from-position); --tw-gradient-to: rgba(11,15,25,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#6A58E4\]\/25 { --tw-gradient-from: rgba(106,88,228,.25) var(--tw-gradient-from-position); --tw-gradient-to: rgba(106,88,228,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#6A58E4\]\/30 { --tw-gradient-from: rgba(106,88,228,.30) var(--tw-gradient-from-position); --tw-gradient-to: rgba(106,88,228,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-\[\#0B0F19\]\/20 { --tw-gradient-to: rgba(11,15,25,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(11,15,25,.20) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-\[\#28A8D9\]\/10  { --tw-gradient-to: rgba(40,168,217,.10) var(--tw-gradient-to-position); }

/* Shadows (brand-tinted, matching the homepage elevation language) */
.grs-shadow-float {
  box-shadow: 0 20px 50px rgba(106,88,228,.18);
}
.grs-shadow-dark-img {
  box-shadow: 0 25px 60px rgba(0,0,0,.5), 0 0 40px rgba(106,88,228,.18);
}

/* Placeholder colour for the dark-band form */
.placeholder\:text-\[\#64748B\]::-moz-placeholder { color: #64748B; }
.placeholder\:text-\[\#64748B\]::placeholder      { color: #64748B; }

/* group-hover translate (used by the FAQ map hover affordance) */
.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* `!important` variants used to re-tint the eyebrow pill on dark bands */
.\!bg-white\/5     { background-color: hsla(0,0%,100%,.05) !important; }
.\!border-white\/10{ border-color: hsla(0,0%,100%,.10) !important; }

/* Responsive utilities */
@media (min-width: 640px) {
  .sm\:pt-20        { padding-top: 5rem; }
  .sm\:pb-28        { padding-bottom: 7rem; }
  .sm\:p-7          { padding: 1.75rem; }
  .sm\:h-24         { height: 6rem; }
  .sm\:w-48         { width: 12rem; }
  .sm\:w-52         { width: 13rem; }
  .sm\:-left-6      { left: -1.5rem; }
  .sm\:-right-6     { right: -1.5rem; }
  .sm\:items-start  { align-items: flex-start; }
  .sm\:col-span-2   { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-\[0\.9fr_1\.1fr\]   { grid-template-columns: 0.9fr 1.1fr; }
  .lg\:grid-cols-\[1fr_0\.9fr\]      { grid-template-columns: 1fr 0.9fr; }
  .lg\:grid-cols-\[0\.85fr_1\.15fr\] { grid-template-columns: 0.85fr 1.15fr; }
}


/* ==========================================================
   2. BUTTON SHINE
   ----------------------------------------------------------
   NOTE: the homepage markup already carries .hover-shine /
   .shine-element and a group-hover:animate-[shine...] class,
   but neither the rule nor @keyframes shine is present in the
   compiled style.css -so the sweep is currently inert on the
   homepage. Defining it here (page-scoped) makes it work on
   this page WITHOUT altering the approved homepage. See the
   report: enabling it site-wide is a one-line change but it
   would visibly alter the homepage, so it needs sign-off.
   ========================================================== */
@keyframes shine {
  0%   { transform: translateX(-100%) skewX(12deg); }
  100% { transform: translateX(400%) skewX(12deg); }
}
.hover-shine .shine-element {
  transform: translateX(-100%) skewX(12deg);
}
.hover-shine:hover .shine-element {
  animation: shine 1.2s ease-in-out;
}


/* ==========================================================
   3. SCROLL REVEAL (replaces the old page's AOS)
   ----------------------------------------------------------
   FAIL-SAFE: [data-reveal] starts hidden and is only meant to
   be revealed by ranking-service.js adding .is-revealed on
   scroll-into-view. If that JS is ever late, blocked, cached
   stale, or errors out, content must NOT stay invisible
   forever -a visitor (or a CEO) must always see the section.
   So every [data-reveal] element also carries a plain CSS
   animation that fades/slides it in on its own after a short
   delay, with no JS involved at all. Whichever mechanism
   fires first wins; once .is-revealed is added the animation
   is neutralised so there's no double-animate/flicker.
   ========================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0,0,.2,1), transform 700ms cubic-bezier(0,0,.2,1);
  will-change: opacity, transform;
  animation: grs-reveal-failsafe 700ms cubic-bezier(0,0,.2,1) 1200ms both;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
@keyframes grs-reveal-failsafe {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accordion collapse fix
   The child that shrinks via overflow:hidden must NOT also carry
   the answer's padding -a padded element can only ever shrink
   down to the size of its own padding (not 0), so a sliver of the
   answer text was leaking past the closed row. Splitting the
   "shrinks to 0" wrapper from the "has padding" paragraph lets a
   closed item fully hide its answer, showing only the question. */
.accordion-content > .accordion-inner {
  overflow: hidden;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================
   4. HERO -animated ranking sparkline
   ========================================================== */
.grs-spark-line {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: grs-draw 2.4s cubic-bezier(0,0,.2,1) forwards;
  animation-delay: .4s;
}
@keyframes grs-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .grs-spark-line { animation: none; stroke-dashoffset: 0; }
}


/* ==========================================================
   5. PROCESS TIMELINE
   ========================================================== */
.vf-timeline-item:last-child .vf-timeline-line { display: none; }


/* ==========================================================
   6. FAQ ACCORDION
   ----------------------------------------------------------
   Same class hooks the old page used (.accordion-item.open,
   .accordion-trigger, .accordion-content, .icon-plus/.icon-minus)
   so the ported JS drives it unchanged -restyled to the new
   design system.
   ========================================================== */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(.4,0,.2,1);
}
.accordion-content > p {
  overflow: hidden;
  min-height: 0;
}
.accordion-item.open .accordion-content {
  grid-template-rows: 1fr;
}

/* Plus / minus icon swap */
.accordion-item .icon-minus { display: none; }
.accordion-item.open .icon-plus { display: none; }
.accordion-item.open .icon-minus { display: inline-flex; }

.accordion-item.open {
  border-color: rgba(106,88,228,.3);
  box-shadow: 0 20px 50px -12px rgba(106,88,228,.10);
}


/* ==========================================================
   7. CONTACT FORM -error state
   (matches the .error hook the ported JS toggles)
   ========================================================== */
.cta-input.error {
  border-color: rgba(239,68,68,.6);
}
.cta-input.error:focus {
  border-color: rgba(239,68,68,.9);
  --tw-ring-color: rgba(239,68,68,.5);
}