body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #0b0f17;
  color: #f5f5f5;
}

/* ===== NAV ===== */
.nav{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 44px;
  padding: 0 40px;
  background: rgba(7,10,16,0.85);
}

.logo img {
  height: 45px;
}

.nav-links a {
  margin-left: 25px;
  text-decoration: none;
  color: #ccc;
  font-weight: 500;
}

.nav-links a:hover {
  color: #ff7a18;
}

.btn-primary{
  background: linear-gradient(135deg, #ff7a18, #ffb347);
  color: #000;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.btn-secondary {
  margin-left: 20px;
  color: #ff7a18;
  text-decoration: none;
}

/* ===== HERO ===== */
.hero{
  padding: 10px 20px 46px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(closest-side at 50% 24%,
      rgba(255,122,24,0.28) 0%,
      rgba(255,122,24,0.14) 28%,
      rgba(255,122,24,0.06) 55%,
      rgba(255,122,24,0.00) 78%);
  filter: blur(22px);
  opacity: 0.9;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(11,15,23,0.95) 0%,
    rgba(11,15,23,0.10) 28%,
    rgba(11,15,23,0.10) 72%,
    rgba(11,15,23,0.95) 100%
  );
  pointer-events:none;
}

.hero-content{
  position: relative;
  z-index: 1;
}

.hero-logo{
  width: clamp(520px, 44vw, 720px);
  height: auto;
  display: block;
  margin: 0 auto 0;
  position: relative;
  top: -48px;
  filter: drop-shadow(0 0 70px rgba(255,122,24,0.45));
}

.hero h1{
  font-size: 3rem;
  margin: 0;
  position: relative;
  top: -26px;
}

.hero h2 {
  font-weight: 400;
  color: #ff7a18;
  margin: 0 0 16px;
}

.hero p {
  max-width: 700px;
  margin: 0 auto 24px;
  color: #aaa;
}

/* ===== SECTIONS (tightened) ===== */
.section{
  padding: 34px 20px;   /* tighter overall */
}

/* Specifically tighten the space ABOVE the first section after hero ("What We Do") */
.hero + .section{
  padding-top: 18px;
}

/* Headings tighter */
.section h2{
  margin: 0 0 18px;
}

/* Alternate section background */
.alt{
  background: #111827;
}

/* Container */
.container{
  max-width: 1100px;
  margin: 0 auto;
}

/* Cards layout tighter */
.cards{
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Cards a bit less puffy */
.card{
  background: #161b22;
  padding: 22px;
  border-radius: 10px;
  flex: 1;
  min-width: 250px;
  box-shadow: 0 0 20px rgba(255,122,24,0.05);
}

/* Featured card */
.featured{
  border: 1px solid rgba(255,122,24,0.4);
}

/* ===== BOTTOM SECTION + FOOTER (tightened) ===== */
/* If your "Why EmberStack Exists" is the last .section on the page,
   this tightens it without affecting the other sections */
.section:last-of-type{
  padding-top: 26px;
  padding-bottom: 18px;
}

footer{
  text-align: center;
  padding: 18px 20px;  /* tighter footer */
  background: #0b0f17;
  color: #777;
}

footer a{
  color: #ff7a18;
  text-decoration: none;
}

footer a:hover{
  text-decoration: underline;
}

/* ===== Mobile Fixes ===== */
@media (max-width: 768px){

  .hero-logo{
    width: 85vw;          /* responsive width */
    max-width: 420px;     /* prevent it from exploding */
    top: -24px;           /* smaller offset on mobile */
    margin: 0 auto;       /* force center */
  }

  .hero h1{
    top: -10px;           /* tighten headline spacing */
  }

}