.hero-section {
 background:transparent;
 padding:100px 0 80px;
 text-align:center;
 position:relative;
}

.hero-content {
 max-width:800px;
 margin:0 auto;
}


.profile-images {
 display:flex;
 justify-content:center;
 align-items:center;
 gap:40px;
 margin-bottom:30px;
 flex-wrap:wrap;
}


.profile-image {
 width:150px;
 height:150px;
 border-radius:50%;
 border:3px solid var(--primary-orange);
 background:rgba(0, 66, 123, 0.2);
 display:flex;
 align-items:center;
 justify-content:center;
 color:var(--primary-orange);
 font-size:14px;
 text-align:center;
}

.profile-image img {
 width:100%;
 height:100%;
 border-radius:50%;
 object-fit:cover;
}


.character-image {
 flex-shrink:0;
}

.character-art {
 width:200px;
 height:auto;
 max-height:300px;
 object-fit:contain;
}


.streamer-name {
 font-size:3rem;
 margin-bottom:10px;
 background:linear-gradient(45deg, #fff, var(--primary-orange));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}

.streamer-tag {
 font-size:1.2rem;
 color:var(--primary-blue);
 margin-bottom:15px;
 opacity:0.8;
}

.streamer-description {
 font-size:1.1rem;
 margin-bottom:30px;
 color:rgba(255, 255, 255, 0.9);
}


.stats {
 display:flex;
 justify-content:center;
 gap:40px;
 margin-top:30px;
}

.stat-item {
 text-align:center;
}

.stat-number {
 display:block;
 font-size:2rem;
 font-weight:bold;
 color:var(--primary-orange);
}

.stat-label {
 display:block;
 font-size:0.9rem;
 opacity:0.7;
 margin-top:5px;
}


.profile-section {
 background-color:rgba(0, 66, 123, 0.05);
}

.profile-content {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:40px;
 margin-top:40px;
}

.profile-info, .activity-info {
 background-color:rgba(0, 66, 123, 0.1);
 padding:30px;
 border-radius:15px;
 border-left:4px solid var(--primary-blue);
}

.profile-info h3, .activity-info h3 {
 color:var(--primary-orange);
 margin-bottom:20px;
 font-size:1.3rem;
}

.profile-info ul, .activity-info ul {
 list-style:none;
 padding:0;
}

.profile-info li, .activity-info li {
 padding:8px 0;
 border-bottom:1px solid rgba(255, 255, 255, 0.1);
}

.profile-info li:last-child, .activity-info li:last-child {
 border-bottom:none;
}


.sns-section {
 background-color:rgba(221, 101, 0, 0.05);
}

.sns-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:25px;
 margin-top:40px;
}


.sns-card {
 display:block;
 padding:25px;
 border-radius:15px;
 text-decoration:none;
 color:white;
 transition:transform 0.2s ease;
 border:2px solid transparent;
 position:relative;
 overflow:hidden;
}

.sns-card:hover {
 transform:translateY(-2px);
}


.sns-card.twitter {
 background:linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%);
 border-color:#1DA1F2;
}

.sns-card.twitter-sub {
 background:linear-gradient(135deg, #FF6B6B 0%, #ee5a52 100%);
 border-color:#FF6B6B;
}

.sns-card.twitter-utopia {
 background:linear-gradient(135deg, #8B5A3C 0%, #6b4226 100%);
 border-color:#8B5A3C;
}

.sns-card.youtube {
 background:linear-gradient(135deg, #FF0000 0%, #cc0000 100%);
 border-color:#FF0000;
}

.sns-card.utopia {
 background:linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
 border-color:#9B59B6;
}

.sns-icon {
 font-size:2.5rem;
 margin-bottom:15px;
 display:block;
}

.sns-card h3 {
 font-size:1.3rem;
 margin-bottom:8px;
}

.sns-card p {
 margin-bottom:10px;
 opacity:0.9;
}

.followers {
 font-size:0.9rem;
 opacity:0.8;
}


.shop-section {
 background-color:rgba(155, 89, 182, 0.05);
}

.shop-info {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:40px;
 margin-top:40px;
}

.shop-details, .shop-description {
 background-color:rgba(155, 89, 182, 0.1);
 padding:30px;
 border-radius:15px;
 border-left:4px solid #9B59B6;
}

.shop-details h3, .shop-description h3 {
 color:#9B59B6;
 margin-bottom:20px;
 font-size:1.3rem;
}

.shop-details ul {
 list-style:none;
 padding:0;
}

.shop-details li {
 padding:8px 0;
 border-bottom:1px solid rgba(255, 255, 255, 0.1);
}

.shop-details li:last-child {
 border-bottom:none;
}

.shop-description p {
 margin-bottom:15px;
 line-height:1.6;
}


.twitter-section {
 background-color:rgba(0, 26, 51, 0.3);
}

.twitter-embed {
 display:flex;
 justify-content:center;
 margin-top:40px;
}


.support-section {
 background:linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
 text-align:center;
}

.support-content p {
 font-size:1.1rem;
 margin-bottom:30px;
 max-width:600px;
 margin-left:auto;
 margin-right:auto;
}

.support-buttons {
 display:flex;
 gap:20px;
 justify-content:center;
 flex-wrap:wrap;
}

.support-btn {
 display:inline-block;
 padding:15px 30px;
 border-radius:30px;
 text-decoration:none;
 font-weight:bold;
 transition:all 0.2s ease;
 border:2px solid transparent;
}

.twitter-btn {
 background-color:#1DA1F2;
 color:white;
 border-color:#1DA1F2;
}

.twitter-btn:hover {
 background-color:transparent;
 color:#1DA1F2;
 border-color:#1DA1F2;
}

.youtube-btn {
 background-color:#FF0000;
 color:white;
 border-color:#FF0000;
}

.youtube-btn:hover {
 background-color:transparent;
 color:#FF0000;
 border-color:#FF0000;
}

.utopia-btn {
 background-color:#9B59B6;
 color:white;
 border-color:#9B59B6;
}

.utopia-btn:hover {
 background-color:transparent;
 color:#9B59B6;
 border-color:#9B59B6;
}


.site-footer {
 background-color:rgba(0, 10, 30, 0.9);
 padding:40px 0;
 text-align:center;
}

.footer-logo {
 margin-bottom:20px;
}


@media (max-width:768px) {
 .hero-section {
 padding:120px 0 60px;
 }
 
 .profile-images {
 flex-direction:column;
 gap:20px;
 }
 
 .character-art {
 width:150px;
 }
 
 .streamer-name {
 font-size:2.2rem;
 }
 
 .stats {
 gap:20px;
 }
 
 .profile-content {
 grid-template-columns:1fr;
 gap:20px;
 }
 
 .shop-info {
 grid-template-columns:1fr;
 gap:20px;
 }
 
 .sns-grid {
 grid-template-columns:1fr;
 }
 
 .support-buttons {
 flex-direction:column;
 align-items:center;
 }
}

@media (max-width:480px) {
 .profile-image {
 width:120px;
 height:120px;
 }
 
 .character-art {
 width:120px;
 }
 
 .streamer-name {
 font-size:1.8rem;
 }
 
 .stats {
 flex-direction:column;
 gap:15px;
 }
 
 .stat-number {
 font-size:1.5rem;
 }
}