/* Global, aesthetic CSS for a product-first Launchpad site */
/* Beach Sun theme colors are provided by design-tokens.css */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Vazir, ui-sans-serif, system-ui, -apple-system, Roboto, Arial;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg) 0%, var(--surface) 60%, var(--bg) 100%);
  direction: rtl;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.section { padding: 40px 20px; }
.header, header { width: 100%; }
header { position: sticky; top: 0; z-index: 40; }
.hero { padding: 72px 20px 40px; }
.hero-copy {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 20px;
  min-height: 180px;
}
.card {
  background: var(--surface-2);
  border-radius: 12px;
}
.grid { display: grid; gap: 16px; }
.grid img { display: block; width: 100%; height: auto; border-radius: 8px; }
.feature { text-align: center; padding: 20px; }
.feature strong { display: block; margin-top: 8px; }
.brand { font-weight: 700; }
.nav { display: flex; gap: 18px; align-items: center; list-style: none; padding: 0; margin: 0; }
.nav a { color: #fff; text-decoration: none; opacity: .9; }
.download-banner { display: inline-block; }
.btn { display: inline-block; padding: 12px 18px; border-radius: 6px; text-decoration: none; color: #fff; background: var(--secondary); }
.hero-glow { position: relative; width: 100%; height: 340px; }

@keyframes float {
  0% { transform: translateY(0) translateX(0); opacity: 0.9; }
  100% { transform: translateY(-12px) translateX(12px); opacity: 1; }
}
@media (max-width: 1024px) {
  .container { padding: 0 16px; }
  .hero { padding: 60px 16px; }
  .hero-copy { min-height: auto; }
  #home-hero .hero-copy { order: 1; }
}
@media (max-width: 700px) {
  .container { grid-template-columns: 1fr; }
  .hero { padding: 40px 12px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Semantic layout enhancements (no inline styles) */
#site-header { background: rgba(0,0,0,.25); backdrop-filter: saturate(1.2) blur(2px); }
#home-hero { padding: 72px 0 40px; display: flex; align-items: center; justify-content: center; }
#home-hero-inner { max-width: 1100px; width: 100%; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; padding: 0 20px; }
#hero-copy { padding: 20px; background: rgba(255,255,255,.04); border-radius: 20px; border: 1px solid rgba(255,255,255,.08); }
#hero-visual { height: 340px; position: relative; }
#hero-glow { position: absolute; inset: 0; border-radius: 20px; background: radial-gradient(circle at 30% 20%, rgba(106, 90, 205, .6), transparent 40%), radial-gradient(circle at 70% 70%, rgba(0,0,0,.25), transparent 40%); animation: float 8s ease-in-out infinite; }
#features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
#gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.download-container { text-align: center; padding: 40px 0; }