/*
Theme Name: NEXUS AI
Theme URI: https://example.com/
Description: AI活用型資産運用サイト用カスタムテーマ
Version: 2.0
Author: Your Name
*/

/* ==========================
   ポップAIカラーパレット
   ========================== */
:root{
  --primary-dark: #1a1a2e;
  --secondary-dark: #16213e;
  --accent-pink: #ff6b9d;
  --accent-purple: #c44569;
  --accent-orange: #f8b500;
  --accent-cyan: #4facfe;
  --accent-mint: #00f2fe;
  --accent-green: #43e97b;
  --accent-teal: #38f9d7;
  --accent-coral: #ff6b6b;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-muted: #a0a0a0;
  
  /* ポップなグラデーション */
  --gradient-candy: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #f8b500 100%);
  --gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #43e97b 100%);
  --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --gradient-unicorn: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --gradient-neon: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-rainbow: linear-gradient(135deg, #ff6b9d 0%, #4facfe 25%, #43e97b 50%, #f8b500 75%, #c44569 100%);
  
  /* アニメーションとシャドウ */
  --shadow-pop: 0 8px 32px rgba(255, 107, 157, 0.3);
  --shadow-glow: 0 0 20px rgba(79, 172, 254, 0.4);
  --shadow-sparkle: 0 4px 20px rgba(67, 233, 123, 0.3);
  --bounce-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --smooth-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --border-radius: 20px;
  --border-radius-lg: 30px;
}

/* ==========================
   リセット & 基本
   ========================== */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height:1.6;
  color:var(--text-primary);
  overflow-x:hidden;
  background:var(--primary-dark);
  scroll-behavior:smooth;
}

/* スクロールバーのスタイル */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--primary-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-blue);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-purple);
}

/* ==========================
   ポップAI背景とパーティクル
   ========================== */
.ai-particles{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 107, 157, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(79, 172, 254, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(67, 233, 123, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(248, 181, 0, 0.04) 0%, transparent 50%);
}

.particle{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent-pink);
  box-shadow:0 0 15px var(--accent-pink);
  animation:float-particle-pop 20s linear infinite;
}

.particle:nth-child(2n){
  background:var(--accent-cyan);
  box-shadow:0 0 15px var(--accent-cyan);
  animation-duration:25s;
}

.particle:nth-child(3n){
  background:var(--accent-green);
  box-shadow:0 0 15px var(--accent-green);
  animation-duration:30s;
}

.particle:nth-child(4n){
  background:var(--accent-orange);
  box-shadow:0 0 15px var(--accent-orange);
  animation-duration:18s;
}

@keyframes float-particle-pop{
  0%{opacity:0;transform:translateY(100vh) scale(0.3) rotate(0deg)}
  5%{opacity:1;transform:translateY(95vh) scale(1) rotate(45deg)}
  95%{opacity:1;transform:translateY(5vh) scale(1) rotate(315deg)}
  100%{opacity:0;transform:translateY(-5vh) scale(0.3) rotate(360deg) translateX(50px);}
}

/* フローティングUIエレメント */
.floating-elements{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
}

.floating-icon{
  position:absolute;
  width:60px;
  height:60px;
  background:var(--gradient-unicorn);
  border:2px solid var(--accent-pink);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-pop);
  animation:float-icon 8s ease-in-out infinite;
  cursor:pointer;
  transition:var(--bounce-transition);
}

.floating-icon:hover{
  transform:scale(1.2);
  box-shadow:0 10px 30px rgba(255, 107, 157, 0.4);
}

.floating-icon span{
  font-size:1.5rem;
  animation:icon-bounce 2s ease-in-out infinite;
}

.floating-icon:nth-child(1){
  animation-delay:0s;
  animation-duration:6s;
}

.floating-icon:nth-child(2){
  animation-delay:1s;
  animation-duration:8s;
}

.floating-icon:nth-child(3){
  animation-delay:2s;
  animation-duration:7s;
}

.floating-icon:nth-child(4){
  animation-delay:3s;
  animation-duration:9s;
}

.floating-icon:nth-child(5){
  animation-delay:4s;
  animation-duration:7.5s;
}

@keyframes float-icon{
  0%,100%{transform:translateY(0px) rotate(0deg);}
  25%{transform:translateY(-10px) rotate(5deg);}
  50%{transform:translateY(-5px) rotate(-3deg);}
  75%{transform:translateY(-12px) rotate(3deg);}
}

@keyframes icon-bounce{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.1);}
}

/* ==========================
   ポップAIヘッダー
   ========================== */
header{
  position:fixed;
  top:0;
  width:100%;
  background:rgba(26, 26, 46, 0.95);
  backdrop-filter:blur(20px);
  z-index:1000;
  border-bottom:2px solid;
  border-image:var(--gradient-rainbow) 1;
  transition:var(--smooth-transition);
}

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 5%;
  max-width:1600px;
  margin:0 auto;
}

.logo{
  font-size:2rem;
  font-weight:900;
  background:var(--gradient-candy);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-decoration:none;
  position:relative;
  transition:var(--bounce-transition);
}

.logo:hover{
  transform:scale(1.05);
}

.logo::after{
  content:'🤖';
  position:absolute;
  right:-35px;
  top:0;
  font-size:1.3rem;
  animation:bounce-robot 2s ease-in-out infinite;
}

@keyframes bounce-robot{
  0%,100%{transform:scale(1) rotate(0deg);}
  25%{transform:scale(1.1) rotate(-10deg);}
  50%{transform:scale(1.15) rotate(0deg);}
  75%{transform:scale(1.1) rotate(10deg);}
}

.nav-links{
  display:flex;
  list-style:none;
  gap:1.5rem;
}

.nav-links a{
  color:var(--text-primary);
  text-decoration:none;
  font-weight:600;
  padding:0.8rem 1.5rem;
  border-radius:var(--border-radius-lg);
  transition:var(--bounce-transition);
  position:relative;
  overflow:hidden;
  background:rgba(255, 255, 255, 0.05);
  border:2px solid transparent;
}

.nav-links a::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:var(--gradient-ocean);
  transition:var(--smooth-transition);
  z-index:-1;
}

.nav-links a:hover::before{
  left:0;
}

.nav-links a:hover{
  color:var(--primary-dark);
  transform:translateY(-3px) scale(1.05);
  border-color:var(--accent-cyan);
  box-shadow:var(--shadow-glow);
}

/* ==========================
   ポップAIヒーロー
   ========================== */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  padding:2rem 0;
  background:
    radial-gradient(ellipse at top left, rgba(255, 107, 157, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(79, 172, 254, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at center, rgba(67, 233, 123, 0.08) 0%, transparent 70%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cdefs%3e%3cpattern id='g' width='60' height='60' patternUnits='userSpaceOnUse'%3e%3cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='%2300d4ff' stroke-width='0.5' opacity='0.1'/%3e%3c/pattern%3e%3c/defs%3e%3crect width='100%25' height='100%25' fill='url(%23g)'/%3e%3c/svg%3e");
  animation:grid-move 30s linear infinite;
}

@keyframes grid-move{
  0%{transform:translate(0,0);}
  100%{transform:translate(60px,60px);}
}

.hero::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:200%;
  height:200%;
  background:
    conic-gradient(from 0deg, 
      transparent 0deg, 
      rgba(0, 212, 255, 0.1) 90deg, 
      transparent 180deg, 
      rgba(139, 92, 246, 0.1) 270deg, 
      transparent 360deg);
  animation:rotate 20s linear infinite;
  transform:translate(-50%, -50%);
  z-index:1;
}

@keyframes rotate{
  from{transform:translate(-50%, -50%) rotate(0deg);}
  to{transform:translate(-50%, -50%) rotate(360deg);}
}

/* AI キャラクター */
.ai-character-image{
  position:absolute;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  width:280px;
  height:420px;
  z-index:3;
  animation:ai-character-float 6s ease-in-out infinite;
}

.ai-hero-character-main{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 50px rgba(102, 126, 234, 0.4));
  opacity:0.8;
  animation:ai-character-glow 4s ease-in-out infinite;
}

@keyframes ai-character-glow{
  0%,100%{filter:drop-shadow(0 0 50px rgba(102, 126, 234, 0.4));}
  50%{filter:drop-shadow(0 0 80px rgba(79, 172, 254, 0.6));}
}

@keyframes ai-character-float{
  0%,100%{transform:translateY(-50%) rotate(0deg) scale(1);}
  25%{transform:translateY(-52%) rotate(1deg) scale(1.02);}
  50%{transform:translateY(-48%) rotate(-1deg) scale(0.98);}
  75%{transform:translateY(-51%) rotate(2deg) scale(1.01);}
}

/* ヒーローテキスト */
.hero-content{
  position:relative;
  z-index:4;
  max-width:1000px;
  padding:0 2rem;
}

.hero-badge{
  display:inline-block;
  padding:0.8rem 2rem;
  background:var(--gradient-unicorn);
  border:2px solid var(--accent-pink);
  border-radius:50px;
  margin-bottom:2rem;
  animation:fadeInUp 0.8s ease-out, badge-float 4s ease-in-out infinite;
  box-shadow:var(--shadow-pop);
}

.hero-badge span{
  color:var(--primary-dark);
  font-size:1rem;
  font-weight:700;
  text-shadow:none;
}

@keyframes badge-float{
  0%,100%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-5px) rotate(2deg);}
}

.hero h1{
  font-size:4.8rem;
  margin-bottom:2rem;
  font-weight:900;
  background:var(--gradient-candy);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 0 30px rgba(255, 107, 157, 0.3);
  animation:fadeInUp 1s ease-out, title-bounce 6s ease-in-out infinite;
  letter-spacing:-0.02em;
}

@keyframes title-bounce{
  0%,100%{transform:translateY(0px) scale(1);}
  50%{transform:translateY(-3px) scale(1.02);}
}

.hero .subtitle{
  font-size:1.9rem;
  font-weight:700;
  margin-bottom:2rem;
  background:var(--gradient-ocean);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:fadeInUp 1s 0.3s both;
  text-shadow:0 0 20px rgba(67, 233, 123, 0.2);
}

.hero .description{
  font-size:1.5rem;
  opacity:0.95;
  max-width:750px;
  margin:0 auto 3rem;
  line-height:1.8;
  animation:fadeInUp 1s 0.6s both;
  color:var(--text-secondary);
  font-weight:500;
}

.cta-buttons{
  display:flex;
  gap:2rem;
  justify-content:center;
  animation:fadeInUp 1s 0.9s both;
}

.cta-button{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:1.2rem 2.5rem;
  font-size:1.1rem;
  font-weight:700;
  border-radius:50px;
  text-decoration:none;
  transition:var(--bounce-transition);
  position:relative;
  overflow:hidden;
}

.cta-button i{
  font-style:normal;
  font-size:1.2rem;
  transition:var(--smooth-transition);
}

.cta-primary{
  background:var(--gradient-candy);
  color:var(--primary-dark);
  box-shadow:var(--shadow-pop);
  border:2px solid var(--accent-pink);
}

.cta-primary:hover{
  transform:translateY(-5px) scale(1.05);
  box-shadow:0 15px 40px rgba(255, 107, 157, 0.4);
  background:var(--gradient-sunset);
}

.cta-primary:hover i{
  transform:translateX(8px) rotate(15deg);
}

.cta-secondary{
  background:rgba(79, 172, 254, 0.1);
  color:var(--accent-cyan);
  border:2px solid var(--accent-cyan);
  box-shadow:var(--shadow-glow);
}

.cta-secondary::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:var(--gradient-ocean);
  transition:var(--smooth-transition);
  z-index:-1;
}

.cta-secondary:hover::before{
  left:0;
}

.cta-secondary:hover{
  color:var(--primary-dark);
  transform:translateY(-5px) scale(1.05);
  border-color:var(--accent-green);
}

.cta-secondary:hover i{
  transform:scale(1.3) rotate(20deg);
}

/* ヒーロー統計 */
.hero-stats{
  display:flex;
  gap:2rem;
  justify-content:center;
  margin-top:1.5rem;
  animation:fadeInUp 1s 1.2s both;
}

.stat-item{
  text-align:center;
  padding:1.5rem 1.2rem;
  background:var(--gradient-unicorn);
  border:2px solid var(--accent-pink);
  border-radius:var(--border-radius-lg);
  backdrop-filter:blur(15px);
  transition:var(--bounce-transition);
  position:relative;
  overflow:hidden;
}

.stat-item::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:conic-gradient(from 0deg, transparent, var(--accent-pink), transparent);
  animation:stat-rotate 4s linear infinite;
  z-index:-1;
}

@keyframes stat-rotate{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

.stat-item:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:var(--shadow-pop);
  border-color:var(--accent-orange);
}

.stat-number{
  font-size:2.5rem;
  font-weight:900;
  background:var(--gradient-candy);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:0.5rem;
  animation:stat-pulse 3s ease-in-out infinite;
}

@keyframes stat-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.1);}
}

.stat-label{
  font-size:1rem;
  color:var(--primary-dark);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(50px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes grid-move{
  0%{transform:translate(0,0);}
  100%{transform:translate(60px,60px);}
}

.hero::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:200%;
  height:200%;
  background:
    conic-gradient(from 0deg, 
      transparent 0deg, 
      rgba(0, 212, 255, 0.1) 90deg, 
      transparent 180deg, 
      rgba(139, 92, 246, 0.1) 270deg, 
      transparent 360deg);
  animation:rotate 20s linear infinite;
  transform:translate(-50%, -50%);
  z-index:1;
}

@keyframes rotate{
  from{transform:translate(-50%, -50%) rotate(0deg);}
  to{transform:translate(-50%, -50%) rotate(360deg);}
}

/* 重複削除 - ai-character-imageで統一 */

/* AI マスコット */
.ai-mascot-svg{
  position:absolute;
  left:10%;
  top:50%;
  transform:translateY(-50%);
  width:300px;
  height:300px;
  z-index:3;
  animation:mascot-float 10s ease-in-out infinite;
}

.mascot-image{
  width:100%;
  height:100%;
  filter:drop-shadow(0 0 30px rgba(79, 172, 254, 0.3));
}

@keyframes mascot-float{
  0%,100%{transform:translateY(-50%) rotate(0deg) scale(1);}
  33%{transform:translateY(-55%) rotate(2deg) scale(1.02);}
  66%{transform:translateY(-45%) rotate(-2deg) scale(0.98);}
}

.ai-svg-inner{
  animation:rotate 25s linear infinite;
}

@keyframes rotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.ai-brain{
  fill:url(#brainGradient);
  animation:pulse-brain 3s ease-in-out infinite;
}

@keyframes pulse-brain{
  0%,100%{opacity:0.8;}
  50%{opacity:1;}
}

@keyframes ai-float{
  0%,100%{transform:translateY(-50%) rotate(0deg) scale(1);}
  50%{transform:translateY(-60%) rotate(3deg) scale(1.05);}
}

/* ヒーローテキスト */
.hero-content{
  position:relative;
  z-index:4;
  max-width:1000px;
  padding:0 2rem;
}

.hero-badge{
  display:inline-block;
  padding:0.8rem 2rem;
  background:var(--gradient-unicorn);
  border:2px solid var(--accent-pink);
  border-radius:50px;
  margin-bottom:2rem;
  animation:fadeInUp 0.8s ease-out, badge-float 4s ease-in-out infinite;
  box-shadow:var(--shadow-pop);
}

.hero-badge span{
  color:var(--primary-dark);
  font-size:1rem;
  font-weight:700;
  text-shadow:none;
}

@keyframes badge-float{
  0%,100%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-5px) rotate(2deg);}
}

.hero h1{
  font-size:4.8rem;
  margin-bottom:2rem;
  font-weight:900;
  background:var(--gradient-candy);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 0 30px rgba(255, 107, 157, 0.3);
  animation:fadeInUp 1s ease-out, title-bounce 6s ease-in-out infinite;
  letter-spacing:-0.02em;
}

@keyframes title-bounce{
  0%,100%{transform:translateY(0px) scale(1);}
  50%{transform:translateY(-3px) scale(1.02);}
}

.hero .subtitle{
  font-size:1.9rem;
  font-weight:700;
  margin-bottom:2rem;
  background:var(--gradient-ocean);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:fadeInUp 1s 0.3s both;
  text-shadow:0 0 20px rgba(67, 233, 123, 0.2);
}

.hero .description{
  font-size:1.5rem;
  opacity:0.95;
  max-width:750px;
  margin:0 auto 3rem;
  line-height:1.8;
  animation:fadeInUp 1s 0.6s both;
  color:var(--text-secondary);
  font-weight:500;
}

.cta-buttons{
  display:flex;
  gap:2rem;
  justify-content:center;
  animation:fadeInUp 1s 0.9s both;
}

.cta-button{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:1.2rem 2.5rem;
  font-size:1.1rem;
  font-weight:700;
  border-radius:50px;
  text-decoration:none;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}

.cta-button i{
  font-style:normal;
  font-size:1.2rem;
  transition:var(--transition);
}

.cta-primary{
  background:var(--gradient-candy);
  color:var(--primary-dark);
  box-shadow:var(--shadow-pop);
  border:2px solid var(--accent-pink);
}

.cta-primary:hover{
  transform:translateY(-5px) scale(1.05);
  box-shadow:0 15px 40px rgba(255, 107, 157, 0.4);
  background:var(--gradient-sunset);
}

.cta-primary:hover i{
  transform:translateX(8px) rotate(15deg);
}

.cta-secondary{
  background:rgba(79, 172, 254, 0.1);
  color:var(--accent-cyan);
  border:2px solid var(--accent-cyan);
  box-shadow:var(--shadow-glow);
}

.cta-secondary::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:var(--gradient-ocean);
  transition:var(--smooth-transition);
  z-index:-1;
}

.cta-secondary:hover::before{
  left:0;
}

.cta-secondary:hover{
  color:var(--primary-dark);
  transform:translateY(-5px) scale(1.05);
  border-color:var(--accent-green);
}

.cta-secondary:hover i{
  transform:scale(1.3) rotate(20deg);
}

/* ヒーロー統計 */
.hero-stats{
  display:flex;
  gap:2rem;
  justify-content:center;
  margin-top:1.5rem;
  animation:fadeInUp 1s 1.2s both;
}

.stat-item{
  text-align:center;
  padding:1.5rem 1.2rem;
  background:var(--gradient-unicorn);
  border:2px solid var(--accent-pink);
  border-radius:var(--border-radius-lg);
  backdrop-filter:blur(15px);
  transition:var(--bounce-transition);
  position:relative;
  overflow:hidden;
}

.stat-item::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:conic-gradient(from 0deg, transparent, var(--accent-pink), transparent);
  animation:stat-rotate 4s linear infinite;
  z-index:-1;
}

@keyframes stat-rotate{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

.stat-item:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:var(--shadow-pop);
  border-color:var(--accent-orange);
}

.stat-number{
  font-size:2.5rem;
  font-weight:900;
  background:var(--gradient-candy);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:0.5rem;
  animation:stat-pulse 3s ease-in-out infinite;
}

@keyframes stat-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.1);}
}

.stat-label{
  font-size:1rem;
  color:var(--primary-dark);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(50px);}
  to{opacity:1;transform:translateY(0);}
}

/* ==========================
   ポップAIサービス
   ========================== */
.services{
  padding:120px 5%;
  background:
    radial-gradient(ellipse at center, rgba(255, 107, 157, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse at 80% 20%, rgba(79, 172, 254, 0.06) 0%, transparent 60%),
    linear-gradient(135deg, var(--secondary-dark) 0%, var(--primary-dark) 100%);
  position:relative;
}

.container{
  max-width:1600px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.section-title{
  text-align:center;
  font-size:3.8rem;
  margin-bottom:1rem;
  font-weight:900;
  background:var(--gradient-candy);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.02em;
  animation:title-bounce 6s ease-in-out infinite;
}

.section-subtitle{
  text-align:center;
  font-size:1.5rem;
  background:var(--gradient-ocean);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:5rem;
  opacity:0.9;
  font-weight:600;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(450px, 1fr));
  gap:2rem;
  margin-top:5rem;
}

.service-card{
  background:var(--gradient-unicorn);
  padding:3rem;
  border-radius:var(--border-radius-lg);
  border:3px solid var(--accent-pink);
  backdrop-filter:blur(15px);
  transition:var(--bounce-transition);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-pop);
}

.service-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:var(--gradient-candy);
  opacity:0;
  transition:var(--smooth-transition);
  z-index:-1;
}

.service-card:hover::before{
  opacity:0.1;
}

.service-card:hover{
  transform:translateY(-15px) scale(1.03);
  border-color:var(--accent-orange);
  box-shadow:0 20px 50px rgba(255, 107, 157, 0.3);
}

.service-icon{
  width:90px;
  height:90px;
  border-radius:50%;
  margin-bottom:2rem;
  font-size:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-candy);
  box-shadow:var(--shadow-pop);
  animation:icon-bounce 3s ease-in-out infinite;
}

.service-card:hover .service-icon{
  animation:icon-bounce 0.8s ease-in-out infinite;
}

.service-card h3{
  font-size:2.2rem;
  margin-bottom:1.5rem;
  background:var(--gradient-ocean);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:800;
}

.service-card p{
  color:var(--primary-dark);
  font-size:1.2rem;
  line-height:1.8;
  margin-bottom:2rem;
  font-weight:500;
}

/* ==========================
   会社概要
   ========================== */
.about{
  padding:120px 5%;
  background:
    radial-gradient(ellipse at center, rgba(0, 255, 136, 0.1) 0%, transparent 70%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
  position:relative;
}

.about-content{
  display:grid;
  grid-template-columns:1fr;
  gap:5rem;
  align-items:center;
  position:relative;
  z-index:2;
}

.about-text{
  background:
    linear-gradient(145deg, 
      rgba(0, 255, 136, 0.05) 0%, 
      rgba(0, 212, 255, 0.05) 100%);
  padding:4rem;
  border-radius:25px;
  border:1px solid rgba(0, 255, 136, 0.2);
  backdrop-filter:blur(15px);
}

/* ==========================
   レスポンシブ
   ========================== */
@media(max-width:1200px){
  .services-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .ai-character-image{
    width:240px;
    height:360px;
  }
}

/* モバイルメニューボタン */
.mobile-menu-toggle{
  display:none;
  flex-direction:column;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.5rem;
  z-index:1001;
}

.mobile-menu-toggle span{
  width:25px;
  height:3px;
  background:var(--text-primary);
  margin:3px 0;
  transition:var(--transition);
}

.mobile-menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2){
  opacity:0;
}

.mobile-menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(7px, -6px);
}

/* Header scroll effect */
header.scrolled{
  background:rgba(10, 10, 10, 0.98);
  box-shadow:var(--shadow-soft);
}

@media(max-width:768px){
  .mobile-menu-toggle{
    display:flex;
  }
  
  .nav-links{
    position:fixed;
    top:0;
    right:-100%;
    height:100vh;
    width:100%;
    background:rgba(10, 10, 10, 0.98);
    backdrop-filter:blur(20px);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:var(--transition);
    z-index:1000;
  }
  
  .nav-links.active{
    right:0;
  }
  
  .nav-links li{
    margin:1rem 0;
  }
  
  .nav-links a{
    font-size:1.5rem;
    padding:1rem 2rem;
  }
  
  /* ヒーローレスポンシブ */
  .hero h1{
    font-size:2.5rem;
  }
  
  .hero .subtitle{
    font-size:1.4rem;
  }
  
  .hero .description{
    font-size:1.1rem;
  }
  
  .ai-character-image{
    width:200px;
    height:300px;
    right:5%;
  }
  
  .cta-buttons{
    flex-direction:column;
    align-items:center;
    gap:1rem;
  }
  
  .hero-stats{
    flex-direction:column;
    gap:1rem;
    align-items:center;
    margin-top:1rem;
  }
  
  .stat-item{
    width:100%;
    max-width:180px;
    padding:0.8rem;
  }
  
  .stat-number{
    font-size:1.3rem;
  }
  
  .services-grid{
    grid-template-columns:1fr;
  }
  
  .service-card{
    padding:2rem;
  }
  
  .about-content{
    grid-template-columns:1fr;
    gap:2rem;
  }
  
  .about-text{
    padding:2rem;
  }
  
  .section-title{
    font-size:2.5rem;
  }
  
  .section-subtitle{
    font-size:1.1rem;
  }
}

/* ==========================
   CONTACT FORM (SAFE)
   ========================== */
.contact-neon{
  max-width:800px;
  margin:0 auto;
  font-size:1rem;
  line-height:1.6;
}

.contact-neon label{
  display:block;
  margin-bottom:0.5rem;
  font-weight:600;
  color:var(--accent-blue);
}

.contact-neon .required{
  color:var(--accent-pink);
  font-weight:700;
}

.neon-row{
  margin-bottom:2rem;
}

.neon-row.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}

@media(max-width:768px){
  .neon-row.two-col{
    grid-template-columns:1fr;
  }
}

.neon-input{
  width:100%;
  padding:1rem 1.1rem;
  border-radius:var(--border-radius);
  color:var(--text-primary);
  background:var(--secondary-dark);
  border:2px solid rgba(0, 212, 255, 0.4);
  transition:var(--transition);
}

.neon-input::placeholder{
  color:var(--text-muted);
}

.neon-input:hover{
  border-color:rgba(0, 212, 255, 0.6);
}

.neon-input:focus{
  outline:none;
  border-color:var(--accent-blue);
  box-shadow:0 0 15px rgba(0, 212, 255, 0.3);
}

.neon-note{
  text-align:center;
  font-size:0.85rem;
  color:var(--text-secondary);
  margin-top:0.5rem;
}

.neon-note a{
  color:var(--accent-blue);
  text-decoration:none;
}

.neon-submit{
  text-align:center;
  margin-top:1.5rem;
}

.neon-btn{
  background:var(--gradient-3);
  color:var(--primary-dark);
  padding:1rem 3.5rem;
  font-weight:700;
  border:none;
  cursor:pointer;
  border-radius:50px;
  box-shadow:var(--shadow-medium);
  transition:var(--transition);
}

.neon-btn:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hard);
}

/* ==========================
   フッター
   ========================== */
.site-footer{
  background:
    linear-gradient(135deg, var(--secondary-dark) 0%, var(--primary-dark) 100%);
  padding:4rem 5% 2rem;
  margin-top:5rem;
  position:relative;
}

.site-footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--gradient-3);
}

.footer-content{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:2rem;
  max-width:1600px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.footer-section h3{
  color:var(--accent-blue);
  font-size:1.5rem;
  margin-bottom:1rem;
  font-weight:800;
}

.footer-section h4{
  color:var(--accent-blue);
  font-size:1.2rem;
  margin-bottom:1.5rem;
  font-weight:700;
}

.footer-section p{
  color:var(--text-secondary);
  margin-bottom:1rem;
  line-height:1.6;
}

.footer-logo p{
  color:var(--text-muted);
  font-style:italic;
}

.footer-social{
  display:flex;
  gap:1rem;
  margin-top:1.5rem;
}

.social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:rgba(0, 212, 255, 0.1);
  border:1px solid rgba(0, 212, 255, 0.3);
  border-radius:50%;
  text-decoration:none;
  transition:var(--transition);
}

.social-link:hover{
  background:var(--accent-blue);
  transform:translateY(-2px);
}

.social-link span{
  font-size:1.2rem;
}

.footer-links{
  list-style:none;
  padding:0;
}

.footer-links li{
  margin-bottom:0.8rem;
}

.footer-links a{
  color:var(--text-secondary);
  text-decoration:none;
  transition:var(--transition);
  display:block;
  padding:0.3rem 0;
}

.footer-links a:hover{
  color:var(--accent-blue);
  transform:translateX(5px);
}

.contact-info p{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-bottom:1rem;
}

.footer-bottom{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid rgba(0, 212, 255, 0.2);
  text-align:center;
}

.footer-bottom p{
  color:var(--text-muted);
  margin-bottom:0.5rem;
}

@media(max-width:768px){
  .footer-content{
    grid-template-columns:1fr;
    gap:2rem;
  }
  
  .footer-section{
    text-align:center;
  }
  
  .footer-social{
    justify-content:center;
  }
}