/* ORYA minimal stylesheet
   Place this file at: /assets/orya.css
   Your HTML should include:
   <link rel="stylesheet" href="assets/orya.css">
*/

/* Optional: self-host Satoshi (uncomment when you add the font file)
@font-face{
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
html { font-family: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, sans-serif; }
*/

/* Tidy images */
img { display:block; max-width:100%; height:auto; }

/* Smooth fade-to-white at the bottom of the hero background */
.hero-bg{
  /* Two backgrounds: a white fade overlay + the gradient image */
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 70%, #ffffff 100%),
    url('images/orya-gradient.webp');
  background-size: cover;
  background-position: center;
}

/* Slightly stronger fade on large screens */
@media (min-width: 1024px){
  .hero-bg{
    background:
      linear-gradient(to bottom, rgba(255,255,255,0) 75%, #ffffff 100%),
      url('images/orya-gradient.webp');
  }
}

/* Button styling */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 2rem; border-radius:9999px;
  background:#000; color:#fff; font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  transition: all 0.3s ease;
}
.btn-primary:hover{
  transform: scale(1.05);
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}

/* Muted footer text */
.footer-muted{ color:#6b7280; }  /* neutral-500 */