*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:system-ui,-apple-system,sans-serif;
}

body{
  background:
    radial-gradient(circle at 20% 30%, rgba(212,175,55,0.08), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,178,0,0.06), transparent 40%),
    #f5f7fa;
  color:#222;
  line-height:1.6;
}

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

/* Hero */
.hero{
  background:linear-gradient(135deg,#d4af37,#ffb200);
  color:white;
  padding:90px 20px;
  text-align:center;
}

.hero h1{
  font-size:3rem;
  font-weight:700;
}

.tagline{
  margin-top:10px;
  font-size:1.2rem;
  opacity:0.95;
}

.update-time{
  margin-top:15px;
  font-size:0.9rem;
  opacity:0.85;
}

/* Sections */
.price-section{
  margin:80px 0;
}

.price-section h2{
  font-size:2rem;
  margin-bottom:30px;
  border-left:6px solid #d4af37;
  padding-left:12px;
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

/* Card */
.rate-card{
  background:white;
  padding:28px;
  border-radius:20px;
  box-shadow:0 10px 35px rgba(0,0,0,0.08);
  transition:all 0.35s ease;
}

.rate-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 45px rgba(0,0,0,0.15);
}

.rate-card h3{
  font-size:1.3rem;
}

.price{
  margin-top:18px;
  font-size:1.5rem;
  font-weight:700;
  color:#d4af37;
}

.vori{
  margin-top:6px;
  font-size:1rem;
  color:#555;
}

/* Footer */
.footer{
  background:#111;
  color:#aaa;
  padding:50px 20px;
  text-align:center;
  margin-top:100px;
}

/* Responsive */
@media(max-width:768px){
  .hero h1{font-size:2.2rem;}
  .price-section h2{font-size:1.6rem;}
}

@media(max-width:480px){
  .rate-card{padding:22px;}
}