/*
Theme Name: Hero Hosting Theme
Theme URI: https://example.com/
Description: A custom theme for Hero Hosting services.
Version: 1.0.1
Author: Hero Hosting
Text Domain: hero_hosting
*/

/* Theme CSS variables (overridden via Customizer) */
:root{
  --hero-color-1: #c6ab90;
  --hero-color-2: #0b050e;
  --hero-color-3: #ad3024;
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
  background: linear-gradient(45deg, var(--hero-color-1), var(--hero-color-2), var(--hero-color-3));
  background-size: 300% 300%;
  animation: hero-gradient 12s ease infinite;
  color: #fff;
}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header, .site-footer{
  background: linear-gradient(45deg, var(--hero-color-1), var(--hero-color-2), var(--hero-color-3));
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.site-footer{border-top:1px solid rgba(255,255,255,0.15); border-bottom:none}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-title{font-size:20px;font-weight:700;margin:0}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px}
.nav a{text-decoration:none;opacity:.92}
.nav a:hover{opacity:1;text-decoration:underline}

.hero{
  padding:56px 0;
}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px}
.hero p{max-width:720px;margin:0 0 18px;color:rgba(255,255,255,0.92)}
.btn{
  display:inline-block;
  background: linear-gradient(45deg, var(--hero-color-1), var(--hero-color-2), var(--hero-color-3));
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0.22);
}
.btn:hover{filter:brightness(1.07)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius:16px;
  padding:16px;
  backdrop-filter: blur(6px);
}
.card h3{margin:0 0 8px}
.card p{margin:0 0 12px;color:rgba(255,255,255,0.9)}
.content-area{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(6px);
}

@keyframes hero-gradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}