:root{
  --bg:#fffaf2;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#eadfcf;
  --accent:#f5b301;
  --accent-dark:#d89200;
  --max:900px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    width: auto;
    height: 70px;
    object-fit: contain;

}


body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg,#fffaf2 0%,#ffffff 100%);
  color:var(--text);
  line-height:1.7;
}

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

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 0 10px;
  flex-wrap:wrap;
}

.brand{
  font-size:1.2rem;
  font-weight:700;
  color:#111827;
  text-decoration:none;
}

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

nav a{
  text-decoration:none;
  color:#374151;
  margin-left:14px;
  font-size:.95rem;
}

nav a:hover{
  color:#111827;
}

.hero,
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.hero{
  padding:32px;
  margin-top:10px;
}

.badge{
  display:inline-block;
  background:#fff3cd;
  color:#8a5a00;
  border:1px solid #f1d28a;
  padding:6px 12px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  margin-bottom:14px;
}

h1{
  font-size:2rem;
  line-height:1.2;
  margin:0 0 12px;
}

h2{
  font-size:1.25rem;
  margin:0 0 12px;
  color:#111827;
}

p{
  margin:0 0 14px;
}

.muted{
  color:var(--muted);
}

.grid{
  display:grid;
  gap:18px;
  margin-top:22px;
}

.card{
  padding:24px;
}

ul{
  padding-left:20px;
  margin:8px 0 0;
}

li{
  margin-bottom:8px;
}

.contact-box{
  background:#fff8e8;
  border:1px solid #f0dfb2;
  border-radius:16px;
  padding:18px;
  margin-top:10px;
}

.cta a{
  display:inline-block;
  margin-top:10px;
  padding:12px 16px;
  border-radius:12px;
  background:var(--accent);
  color:#111827;
  text-decoration:none;
  font-weight:700;
  transition:transform .2s ease, background .2s ease;
}

.cta a:hover{
  background:#e5a700;
  transform:translateY(-1px);
}

.footer{
  text-align:center;
  color:var(--muted);
  font-size:.92rem;
  padding:28px 0 10px;
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

@media (max-width: 640px){
  h1{
    font-size:1.65rem;
  }

  .hero,
  .card{
    padding:20px;
  }

  nav a{
    margin-left:0;
    margin-right:14px;
  }
}