/* Main website styles for Minecraft server site - Sakura Theme */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&family=Playfair+Display:wght@400;700&display=swap');

:root{
  --bg1: #fff0f5; /* Lavender Blush */
  --bg2: #ffe4e1; /* Misty Rose */
  --text-main: #5d4037; /* Brownish dark */
  --text-light: #8d6e63;
  --accent: #ff80ab; /* Pink Accent */
  --accent-2: #ff4081; /* Deep Pink Accent */
  --card-bg: rgba(255, 255, 255, 0.65);
  --card-border: rgba(255, 255, 255, 0.8);
  --shadow-color: rgba(255, 182, 193, 0.4);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:'Montserrat',sans-serif;
  background:linear-gradient(135deg, #fff5f7 0%, #ffeef2 100%);
  color:var(--text-main);
  overflow-x:hidden;
}

.header{
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.header-content{
  max-width:1200px;
  width:100%;
  display:flex;
  gap:40px;
  align-items:center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding:0 20px;
}

/* Hero Background Carousel */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 240, 245, 0.5), rgba(255, 228, 225, 0.4));
  z-index: 1;
  backdrop-filter: blur(2px);
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
}

.left{flex:1}
.right{flex:0 0 460px;display:flex;align-items:center;justify-content:center;max-width:100%} /* Fixed width for right side */

.logo{
  font-family:'Playfair Display',serif;
  font-size:32px;
  color:var(--accent-2);
  letter-spacing:1px;
  font-weight: 700;
  text-shadow: 2px 2px 0px rgba(255,255,255,0.8);
}
.title{
  font-size:52px;
  margin:12px 0 16px 0;
  line-height:1.1;
  background: -webkit-linear-gradient(45deg, #ec407a, #ab47bc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.subtitle{color:var(--text-light);font-size:18px;margin-bottom:24px;line-height: 1.6;}

.cta{display:flex;gap:16px;align-items:center}
.btn{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  padding:14px 28px;
  border-radius:50px;
  border:none;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 25px var(--shadow-color);
  text-decoration:none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px var(--shadow-color);
}
.btn.secondary{
  background:rgba(255,255,255,0.5);
  color:var(--accent-2);
  border:2px solid var(--accent);
  box-shadow: none;
}
.btn.secondary:hover {
  background: var(--accent);
  color: #fff;
}

.hero-features{display:flex;gap:12px;margin-top:24px;flex-wrap: wrap;}
.hero-feature{
  background:rgba(255,255,255,0.6);
  padding:8px 16px;
  border-radius:20px;
  font-weight:600;
  color:var(--text-light);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.hero-feature strong{color:var(--accent-2)}

.card{
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius:24px;
  padding:24px;
  box-shadow:0 20px 50px -10px var(--shadow-color);
}

.stats{display:flex;gap:20px;align-items:center}
.stat .value{font-size:24px;font-weight:800;color:var(--accent-2)}
.stat .label{font-size: 13px; color: var(--text-light); font-weight: 600;}

.particles{position:absolute;inset:0;z-index:0;pointer-events:none}

.section{padding:80px 20px}
.container{max-width:1120px;margin:0 auto}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.feature-card{
  padding:24px;
  border-radius:20px;
  background:rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.6);
  transition:transform .4s, box-shadow .4s;
}
.feature-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(255, 128, 171, 0.25);
  background: rgba(255,255,255,0.8);
}
.feature-card h3{margin:12px 0; color: var(--text-main);}
.feature-card p { color: var(--text-light); line-height: 1.6; }

.preview{
  height:240px;
  border-radius:16px;
  background:linear-gradient(90deg, #fce4ec, #f8bbd0);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-2);
  font-weight:700;
}

/* Larger carousel for hero preview */
/* .carousel-card .preview removed as it is now full screen background */

.carousel{position:relative;height:100vh;width:100%;overflow:hidden;border-radius:0}
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease, transform 1.5s ease;transform:scale(1.1);height:100vh;width:100%}
.carousel-slide.active{opacity:1;transform:none;z-index:0} /* z-index 0 to be below overlay */
.carousel-slide img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}

.carousel-controls{position:absolute;inset:0;pointer-events:none; z-index: 2;}
.carousel-btn{
  pointer-events:auto;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
  color:#fff;
  font-size:28px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:50%;
  cursor:pointer;
  transition: background 0.3s, transform 0.3s;
  font-weight: bold;
}
.carousel-btn.prev{left:30px}
.carousel-btn.next{right:30px}
.carousel-btn:hover{background:rgba(255,255,255,0.8); color: var(--accent-2); transform: translateY(-50%) scale(1.15);}

.carousel-dots{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;gap:12px; z-index: 2;}
.carousel-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer; border: none; padding: 0; transition: all 0.3s;}
.carousel-dot.active{background:#fff;box-shadow:0 0 10px rgba(255,255,255,0.8); transform: scale(1.3);}

/* Responsive smaller height */
@media(max-width:900px){
  .carousel-card .preview{height:260px}
}


.footer{padding:40px 20px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0.5));color:var(--text-light)}
.footer .inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.badge{display:inline-block;background:rgba(255,64,129,0.1);padding:6px 14px;border-radius:40px;color:var(--accent-2);font-weight:700}

/* Responsive */
@media (max-width:900px){
  .header-content{flex-direction:column;text-align:center;gap:20px}
  .title{font-size:36px}
  .right{order:2;flex:0 0 auto;width:100%;max-width:360px}
  .left{order:1}
  .cta { justify-content: center; }
  .hero-features { justify-content: center; }
}

/* CTA animation */
.cta .btn.download{animation:float 3s ease-in-out infinite}
@keyframes float{0%{transform:translateY(-4px)}50%{transform:translateY(4px)}100%{transform:translateY(-4px)}}

/* subtle fade-in scroll */
.fadeUp{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.fadeUp.visible{opacity:1;transform:none}

/* styled code block */
.code{
  background: #fff;
  padding:16px;
  border-radius:12px;
  font-family:monospace;
  color:var(--accent-2);
  border: 1px solid #fce4ec;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.02);
}

/* quick loader / floating cube */
.block-cube{
  width:96px;
  height:96px;
  background:linear-gradient(135deg,#f8bbd0,#f48fb1);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#fff;
  box-shadow:0 20px 60px rgba(244, 143, 177, 0.4);
  transform: rotate(-5deg);
}

/* small nav */
nav{display:flex;gap:16px;align-items:center}
nav a{color:var(--text-light);text-decoration:none;padding:8px 12px;border-radius:12px; font-weight: 600; transition: all 0.3s;}
nav a:hover{background: rgba(255,64,129,0.08);color:var(--accent-2);}

/* media */
.screenshots{display:flex;gap:12px;flex-wrap:wrap}
.screenshots img{width:calc(33% - 8px);border-radius:12px;border:2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
@media(max-width:900px){.screenshots img{width:100%}}

/* small animation for feature badges */
.feature-card .badge-mini{display:inline-block;background:rgba(255,64,129,0.1);padding:6px 12px;border-radius:8px;color:var(--accent-2);font-weight:700; font-size: 12px; margin-bottom: 8px;}

/* subtle glass-like circles in hero */
.hero-glass{
  position:absolute;
  right:-50px;
  top:-50px;
  width:500px;
  height:500px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,192,203,0.4) 0%, rgba(255,255,255,0) 70%);
  filter:blur(60px);
  opacity:0.6;
  z-index: -1;
}

/* small credit */
.credit{font-size:14px;color:var(--text-light)}

/* Server card styles */
.server-card{text-align:center}
.server-card .block-cube{margin:0 auto 16px}
.server-card-title{margin-bottom:20px;font-size:14px;color:var(--text-light)}
.server-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.server-stat{padding:12px;background:rgba(255,240,245,0.5);border-radius:12px;border:1px solid rgba(255,192,203,0.3)}
.server-stat-label{font-size:12px;color:var(--text-light);margin-bottom:4px}
.server-stat-value{font-size:20px;font-weight:800;color:var(--accent-2);margin-bottom:4px}
.server-stat-desc{font-size:11px;color:var(--text-light)}
.server-address{padding:16px;background:linear-gradient(135deg,rgba(255,64,129,0.15),rgba(255,80,171,0.1));border-radius:12px;border:1px solid rgba(255,64,129,0.25)}
.server-address-label{font-size:11px;color:var(--text-light);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.server-address-value{font-size:24px;font-weight:800;color:var(--accent-2);font-family:monospace;line-height:1.4;word-break:break-all}

h2 { font-size: 32px; color: var(--text-main); margin-bottom: 8px; }
h3 { color: var(--text-main); }
h4 { color: var(--text-main); margin-bottom: 8px; }
p { line-height: 1.6; color: var(--text-light); }
ol li { margin-bottom: 8px; color: var(--text-light); }
hr { background: rgba(0,0,0,0.05) !important; }