:root {
  --font-geist-sans: "GeistSans";
  --font-geist-mono: "GeistMono";
}

@font-face {
  font-family: "GeistSans";
  src: url("./assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GeistSans";
  src: url("./assets/fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GeistMono";
  src: url("./assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GeistMono";
  src: url("./assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: #f3f5f8;
  --foreground: #0f172a;
  --surface: #ffffff;
  --muted: #64748b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #eef2f7;
    --foreground: #0f172a;
    --surface: #ffffff;
    --muted: #475569;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 14% 12%, rgba(148, 163, 184, 0.16), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(203, 213, 225, 0.2), transparent 30%),
    linear-gradient(180deg, #f8fafc 0%, var(--background) 40%, #eef2f7 100%);
  color: var(--foreground);
  font-family: var(--font-geist-sans), "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* card effect calibration to match yara-agency sections */
#services article,
#cases article,
#process article {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

#services article:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.45);
}

/* section and card visual lock for screenshots */
#services,
#process {
  border-color: rgba(251, 146, 60, 0.22) !important;
  background-color: rgba(255, 247, 237, 0.62) !important;
}

#cases,
main section:first-of-type {
  background: #ffffff !important;
}

main section:first-of-type article,
#cases article,
#process article {
  background: #f8fafc !important;
  border-color: #d5deea !important;
  border-radius: 20px !important;
}

main section:first-of-type article h3,
#cases article h3,
#process article h3 {
  letter-spacing: 0.01em;
}

#cases img {
  border-radius: 14px !important;
}

#process article p {
  line-height: 1.85;
}

/* enforce content font size */
main p,
main li {
  font-size: 16px !important;
}

@media (max-width: 768px) {
  main section {
    margin-top: 20px !important;
    border-radius: 20px !important;
    padding: 20px !important;
  }

  #hero {
    height: 62vh !important;
    min-height: 420px !important;
  }

  #hero h1 {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }

  #hero p {
    max-width: 100% !important;
  }

  #hero .mt-5.flex a {
    width: 100%;
    justify-content: center;
  }

  #services .md\:grid-cols-3,
  #cases .md\:grid-cols-3,
  #process .md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  #services article,
  #cases article,
  #process article {
    padding: 18px !important;
  }

  #cases img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  main h2 {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: 30px !important;
  }

  main h2 {
    font-size: 30px !important;
  }
}