:root {
  --bg: #ffffff;
  --bg-alt: #f9fafb;
  --text: #111827;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --accent: #0d9488;
  --accent-dark: #0f766e;
  --accent-bg: #f0fdfa;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(17, 24, 39, 0.06);
  --shadow-hover: 0 12px 28px rgba(17, 24, 39, 0.1);
  --max-width: 1140px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-dark);
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

h1 { font-size: 44px; }
h2 { font-size: 30px; }
h3 { font-size: 19px; }

@media (max-width: 480px) {
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
}

p {
  margin: 0 0 1rem;
  color: var(--text-muted);
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.04);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.logo span {
  color: var(--accent);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding: 4px 0;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}

.main-nav a.active {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text);
}

@media (max-width: 800px) {
  .main-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
    display: none;
  }
  .main-nav.open {
    display: flex;
  }
  .main-nav a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-toggle {
    display: block;
  }
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.25);
}

.btn-primary:hover {
  background: var(--accent-dark);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Hero */

.hero {
  padding: 76px 0 56px;
  text-align: center;
  background: linear-gradient(180deg, var(--accent-bg) 0%, #ffffff 70%);
}

.hero h1 {
  max-width: 720px;
  margin: 0 auto 20px;
}

/* Homepage hero only (`.hero` without `.hero-product`) - the icon sits behind the heading as a
   large, low-opacity watermark instead of stacked above it in flow, and the headline runs much
   bigger than the site-wide h1 default. */
.hero:not(.hero-product) {
  position: relative;
  overflow: hidden;
}

.hero:not(.hero-product) .hero-icon-wrap {
  position: absolute;
  inset: 0;
  align-items: center;
  margin: 0;
  z-index: 0;
  opacity: 0.22;
  pointer-events: none;
}

.hero:not(.hero-product) .hero-icon-wrap img {
  width: clamp(260px, 42vw, 480px);
}

.hero:not(.hero-product) > .wrap > div:not(.hero-icon-wrap) {
  position: relative;
  z-index: 1;
}

.hero:not(.hero-product) h1 {
  font-size: 48px;
  max-width: 760px;
}

@media (max-width: 480px) {
  .hero:not(.hero-product) h1 { font-size: 32px; }
}

.hero p.lead {
  max-width: 560px;
  margin: 0 auto 32px;
  font-size: 18px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Product-page hero: the animated illustration (`.hero-icon-wrap`, only used on these product
   pages) sits above the product name and lead text, in normal flow - order is icon, then
   heading, then lead text. */
.hero-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.hero-icon-wrap img {
  width: 320px;
  max-width: 80%;
  height: auto;
}

.hero-product h1 {
  color: var(--accent);
}

.hero-product p.lead {
  margin-bottom: 8px;
}

/* Sections */

section {
  padding: 60px 0;
}

section.alt {
  background: var(--bg-alt);
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 36px;
}

.section-head h2 {
  margin-bottom: 14px;
}

.eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow-row-grid {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.eyebrow-row .eyebrow {
  margin-bottom: 0;
}

.collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s ease;
}

.collapse-toggle:hover {
  background: var(--accent-bg);
}

.collapse-toggle i {
  font-size: 13px;
  transition: transform 0.2s ease;
}

.collapse-toggle.is-collapsed i {
  transform: rotate(180deg);
}

.collapsible.is-collapsed {
  display: none;
}

/* Card grid */

.grid {
  display: grid;
  gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

.card .icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}

/* Larger icon treatment for the Software product cards specifically (homepage + software.html) -
   a plain .card .icon bump would also affect the unrelated Services page cards, which use the
   same base .card component. Laid out as a single-column grid: the animated hero illustration
   centered at the top, the glyph icon pulled out of flow entirely and enlarged into a big,
   low-opacity background watermark, and title/description/link stacked beneath. */
.product-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-areas:
    "anim"
    "title"
    "desc"
    "link";
  /* Explicit row sizes, not 4 implicit "auto" tracks. The outer grid-3 row stretches every card to
     match its tallest sibling's height (align-items defaults to stretch); since .product-card is
     itself a grid, that leftover height then gets redistributed across ALL of its own "auto" rows
     by default (align-content: normal behaves like stretch for grid) - not just the description
     row whose text length is the actual reason cards differ in height. That inflated the icon and
     heading rows on shorter-description cards, visibly misaligning their headings against a card
     with a longer description (found via Certificate Discovery's card sitting ~50px higher than
     Validator/Manager). Only "desc" is 1fr so it alone absorbs the stretch; icon/title/link stay a
     fixed, content-driven size on every card regardless of description length.
  */
  grid-template-rows: auto auto 1fr auto;
  padding-top: 18px;
}

.product-card .icon {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 210px;
  height: 210px;
  margin: 0;
  border-radius: 36px;
  font-size: 100px;
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

.product-card .icon-animated {
  grid-area: anim;
  display: block;
  width: 208px;
  max-width: 100%;
  /* Fixed, not height:auto - these are viewBox-only SVGs (no explicit width/height attributes),
     so the grid's "auto" row-sizing algorithm doesn't reliably use the same aspect-ratio-derived
     156px across every card: some product cards ended up with an inflated "anim" row (up to 24px
     taller than the rendered image), pushing that card's heading down relative to its siblings and
     breaking the shared row alignment across the grid. Pinning both dimensions removes any
     dependency on that quirk - every card's icon row is now identically 208x156 by construction. */
  height: 156px;
  margin: 0 auto;
  opacity: 0.5;
  pointer-events: none;
}

.product-card h3 {
  grid-area: title;
  margin-top: 0;
  color: var(--accent);
}

.product-card p:first-of-type {
  grid-area: desc;
}

.product-card p:last-of-type {
  grid-area: link;
}

/* Makes the whole product card clickable, not just the "Learn more" link text -
   the link's hit area is stretched to cover the entire card via ::after, while the
   link itself stays a real, visible, keyboard-focusable anchor (no JS, no nested <a>).
   ::after is positioned absolute WITHOUT the link itself being a positioned ancestor,
   so it anchors to .product-card (already position:relative) and covers the full card
   instead of just the small link's own box. */
.product-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  margin-bottom: 0;
  font-size: 14.5px;
}

.card.featured {
  border: 2px solid var(--accent);
  position: relative;
}

.card-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
}

/* Team */

.founder-profile {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  max-width: 780px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 620px) {
  .founder-profile {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
}

.person {
  text-align: center;
}

.person img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 20px;
  object-fit: cover;
}

.person .role {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* CTA band */

.cta-band {
  background: var(--text);
  color: #fff;
  border-radius: 20px;
  padding: 44px 36px;
  text-align: center;
}

.cta-band h2 {
  color: #fff;
  margin-bottom: 14px;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 480px;
  margin: 0 auto 28px;
}

/* Forms */

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 22px;
  background: var(--bg-alt);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 32px;
}

@media (max-width: 700px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

.footer-grid h4 {
  font-size: 14px;
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Scroll-reveal animation */

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade"] {
  transform: none;
}

.stagger > * {
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* Utility */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.small-note {
  font-size: 13px;
  color: var(--text-muted);
}