*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, sans-serif;
  color:white;
  background:
    radial-gradient(circle at 20% 30%, rgba(211,62,82,0.3), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,120,90,0.2), transparent 50%),
    #0f0b10;
}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 60px;
  position:fixed;
  width:100%;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(10px);
  z-index: 100;
}

.logo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight:bold;
  font-size:20px;
  letter-spacing:2px;
}

.logo img {
  width: 35px;
  height: auto;
  display: block;
}

nav a{
  margin-left:20px;
  text-decoration:none;
  color:white;
  padding:10px 18px;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  transition:0.3s;
}

nav a:hover{
  background:#d33e52;
  box-shadow:0 0 20px rgba(211,62,82,0.6);
}

section{
  padding:120px 15%;
}

.hero{
  padding-top:180px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 40px;
}

.hero-text {
  flex: 1;
}

.hero h1{
  font-size:60px;
  margin-bottom:25px;
  color:#fff;
  text-shadow:0 0 30px rgba(211,62,82,0.6);
}

.hero p{
  font-size:18px;
  line-height:1.8;
  margin-bottom:40px;
  color:#ddd;
}

.hero-character {
  flex-shrink: 0;
  width: 527px;
  height: 995px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hero-character img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main-btn{
  padding:16px 40px;
  border-radius:16px;
  background:#d33e52;
  text-decoration:none;
  color:white;
  transition:0.3s;
  display:inline-block;
  box-shadow:0 0 25px rgba(211,62,82,0.5);
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.main-btn:hover{
  transform:scale(1.05);
}

h2{
  font-size:40px;
  margin-bottom:50px;
  text-align:center;
  text-shadow:0 0 20px rgba(211,62,82,0.4);
}

.info-card{
  background:rgba(255,255,255,0.05);
  padding:50px;
  border-radius:25px;
  line-height:1.9;
}

.ip{
  margin-top:15px;
  font-size:22px;
  color:#ff6b7f;
  font-weight:bold;
}

.map-container{
  height:500px;
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 0 40px rgba(211,62,82,0.4);
}

.map-container iframe{
  width:100%;
  height:100%;
}

.shop-grid{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}

.shop-card{
  width:280px;
  padding:35px;
  background:rgba(255,255,255,0.05);
  border-radius:20px;
  text-align:center;
  transition:0.3s;
}

.shop-card:hover{
  transform:translateY(-10px);
  box-shadow:0 0 30px rgba(211,62,82,0.6);
}

.shop-card img{
  width:100px;
  margin-bottom:20px;
}

.links-grid{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
}

.links-grid a{
  padding:15px 35px;
  background:#d33e52;
  border-radius:14px;
  text-decoration:none;
  color:white;
  transition:0.3s;
}

.links-grid a:hover{
  transform:scale(1.08);
}

footer{
  padding:40px;
  text-align:center;
  color:#777;
}