* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height: 1.6; color: #1b1b1f; background: #f6f7fb; }
.container { width: min(1120px, 94vw); margin: 0 auto; padding: 4rem 0; }
.hero { 
    color: #fff; 
    min-height: 100vh;
    display: flex;
    align-items: center;     /* vertical centering */
    justify-content: center; /* horizontal centering */
    text-align: center;
    padding: 40px 20px; 
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.hero p { font-size: 1.25rem; margin-bottom: 1.75rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.btn { display: inline-block; padding: 0.9rem 1.6rem; color: #0b0c10; background: #fff; border-radius: 999px; text-decoration: none; font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 2rem; }
.card { 
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--dragon-color);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.card h2 { margin-bottom: 0.75rem; color: #3d47ff; }
.newsletter { background: #fff; border-radius: 18px; padding: 1.75rem; margin-top: 2.5rem; border: 1px solid #dfe3ee; text-align: center; }
.newsletter input[type="email"] { width: min(420px, 100%); max-width: 100%; padding: 0.8rem; border: 1px solid #ccd0e5; border-radius: 8px; margin-right: 0.5rem; }
.newsletter button { margin-top: 0.7rem; padding: 0.8rem 1.35rem; border: 0; background: #5a6bfa; color: #fff; border-radius: 8px; font-weight: 700; cursor: pointer; }
.footer { margin-top: 2rem; text-align: center; color: #677083; }
footer { padding: 1rem 0; text-align: center; color: #6f7589; }
@media (max-width: 640px) { .container { padding: 2rem 0; } .newsletter input, .newsletter button { width: 100%; margin-right: 0; } .newsletter button { margin-top: 0.7rem; }}
#randomImage {
  display: block;
  margin: 30px auto;

  width: min(90%, 650px);
  height: auto;
}
.dark-section {
  background: linear-gradient(180deg, #0f172a, #020617);
}
footer {
  padding: 40px 20px;
  text-align: center;
  color: #aaa;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.peel {
  color: var(--dragon-color, #f97316);
  text-shadow: 0 0 6px var(--dragon-color, #f97316)33;
}
.about {
  padding: 60px 20px;
  text-align: center;
}

.pricing {
  padding: 60px 20px;
  text-align: center;
}

.pricing-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 30px;
}

.price-card {
  border: 2px solid rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.price-card .price {
  font-size: 2rem;
  font-weight: bold;
  margin: 10px 0;
}
.price-card:hover {
  border-color: var(--dragon-color);
  transform: translateY(-4px);
}


.price {
  font-size: 2rem;
  font-weight: bold;
  color: var(--dragon-color);
}
.price-card ul {
  list-style: none;
  padding: 0;
}

.price-card li {
  margin: 6px 0;
}

.price-card li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--dragon-color);
}

.price-card.featured {
  border: 2px solid rgba(0,0,0,0.08);
}