@font-face {
  font-family: "Paytone One";
  src: url("/assets/paytone-one-latin-e997caf9.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary-color: #14b8a6;
  --primary-color-dark: #0e8578;
  --secondary-color: #999999;
  --background-color: #ffffff;
  --text-color: #333333;
  --font-heading: "Paytone One", sans-serif;
  --font-body: "Helvetica", sans-serif;
}

/* Import Font Helvetica from local assets */
@font-face {
  font-family: "Helvetica";
  src: url("/assets/Helvetica-Light-a3e6a5a0.eot");
  src:
    url("/assets/Helvetica-Light-a3e6a5a0.eot?#iefix") format("embedded-opentype"),
    url("/assets/Helvetica-Light-b5f40eef.woff2") format("woff2"),
    url("/assets/Helvetica-Light-d649da80.woff") format("woff"),
    url("/assets/Helvetica-Light-4ffb52e1.ttf") format("truetype"),
    url("/assets/Helvetica-Light-eb5d5a4e.svg#Helvetica-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("/assets/Helvetica-cbdbd0e4.eot");
  src:
    url("/assets/Helvetica-cbdbd0e4.eot?#iefix") format("embedded-opentype"),
    url("/assets/Helvetica-453b7971.woff2") format("woff2"),
    url("/assets/Helvetica-f4098dcf.woff") format("woff"),
    url("/assets/Helvetica-a5705cf2.ttf") format("truetype"),
    url("/assets/Helvetica-e95f083b.svg#Helvetica") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("/assets/Helvetica-Bold-9b8c7e5e.eot");
  src:
    url("/assets/Helvetica-Bold-9b8c7e5e.eot?#iefix") format("embedded-opentype"),
    url("/assets/Helvetica-Bold-fc4640e0.woff2") format("woff2"),
    url("/assets/Helvetica-Bold-a1a63d87.woff") format("woff"),
    url("/assets/Helvetica-Bold-6476c531.ttf") format("truetype"),
    url("/assets/Helvetica-Bold-eb1df339.svg#Helvetica-Bold") format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-body);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top;
}

.po-font {
  font-family: var(--font-heading);
}

.heading-gradient {
  color: #14b8a6;
  background: linear-gradient(
    266.99deg,
    rgba(20, 184, 166, 0.2) -12.65%,
    rgba(14, 133, 120, 0.5) 45.17%,
    #14b8a6 102.99%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-gradient-text {
  color: #14b8a6;
  background: linear-gradient(135deg, #14b8a6, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (forced-colors: active) {
  .heading-gradient,
  .hero-gradient-text {
    background: none;
    -webkit-text-fill-color: unset;
    color: LinkText;
  }
}

.text-secondary {
  color: var(--secondary-color);
}

.shadow-brand {
  box-shadow: 0px 4px 12px 0px #00282333;
}



/* Pages Default style for content */
.page-content {
  h2 {
    font-size: 30px;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
    font-family: var(--font-heading);
  }
  li,
  p {
    font-weight: 300;
    font-size: 20px;
    line-height: 130%;
  }
}

@media (max-width: 768px) {
  .page-content {
    h2 {
      font-size: 22px;
    }
    p {
      font-size: 18px;
    }
  }
}

/* Blog Article Body */
.article-body {
  p {
    margin-bottom: 1.5em;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4b4b4b;
    font-weight: 300;
  }

  h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-top: 2em;
    margin-bottom: 0.75em;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.35rem;
  }

  ul, ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
  }

  li {
    margin-bottom: 0.5em;
    font-weight: 300;
    color: #4b4b4b;
    line-height: 1.7;
  }

  strong, b {
    font-weight: 700;
    color: #333;
  }

  blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 1.25em;
    margin: 1.5em 0;
    font-style: italic;
    color: #666;
  }
}

/* Blog Card hover effects */
.blog-card {
  transition: transform 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
}

/* Validation Report Card */
.validation-report-card {
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.validation-report-card:hover {
  transform: translateY(-4px);
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Scroll-reveal animations (replaces GSAP) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Slide-from-left variant */
.why-anim-left.reveal { transform: translateX(-40px); }
.why-anim-left.revealed { transform: translateX(0); }

/* Slide-from-right variant */
.why-anim-right.reveal { transform: translateX(40px); }
.why-anim-right.revealed { transform: translateX(0); }
.hero-anim-card.reveal { transform: translateX(40px); }
.hero-anim-card.revealed { transform: translateX(0); }

/* ── Hero load animations (no scroll needed) ── */
/* Section and title are always visible (LCP-critical) */
.hero-anim-subtitle,
.hero-anim-ctas,
.hero-anim-trust,
.hero-anim-card,
.hero-anim-badge,
.hero-anim-description,
.hero-anim-input {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-anim-card {
  transform: translateX(40px);
}
.hero-visible .hero-anim-subtitle { opacity: 1; transform: none; transition-delay: 0.1s; }
.hero-visible .hero-anim-ctas { opacity: 1; transform: none; transition-delay: 0.25s; }
.hero-visible .hero-anim-trust { opacity: 1; transform: none; transition-delay: 0.5s; }
.hero-visible .hero-anim-card { opacity: 1; transform: none; transition-delay: 0.15s; }
.hero-visible .hero-anim-badge { opacity: 1; transform: none; transition-delay: 0.05s; }
.hero-visible .hero-anim-description { opacity: 1; transform: none; transition-delay: 0.2s; }
.hero-visible .hero-anim-input { opacity: 1; transform: none; transition-delay: 0.3s; }

/* Back-to-top button transition */
#backToTop {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hero card: no animation on mobile */
@media (max-width: 767px) {
  .hero-anim-card,
  .hero-anim-card.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-anim-subtitle,
  .hero-anim-ctas,
  .hero-anim-trust,
  .hero-anim-card,
  .hero-anim-badge,
  .hero-anim-description,
  .hero-anim-input {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}