* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
overflow-x: hidden;
background: linear-gradient(to bottom, #0a0a2a, #1a1a4a);
color: white;
min-height: 100vh;
position: relative;
}

canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}

.container {
position: relative;
z-index: 10;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

header {
text-align: center;
padding: 3rem 0;
margin-bottom: 2rem;
}

.logo {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}

.logo-inner {
background: linear-gradient(135deg, #ff0000, #ffffff);
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
animation: pulse 2s infinite alternate;
}

.logo-inner span {
font-size: 3rem;
font-weight: bold;
background: linear-gradient(45deg, #ffffff, #ff0000);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
background: linear-gradient(to right, #ff9999, #ffffff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

.subtitle {
font-size: 1.8rem;
margin-bottom: 2rem;
color: #ffcccb;
font-weight: 300;
}

.intro-text {
max-width: 800px;
margin: 0 auto 3rem;
text-align: center;
font-size: 1.2rem;
line-height: 1.8;
background: rgba(10, 10, 42, 0.7);
padding: 2rem;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}

.feature-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 2rem;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(255, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.1);
}

.feature-card h3 {
color: #ff9999;
margin-bottom: 1rem;
font-size: 1.5rem;
}

.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: #ff6666;
}

.timeline {
position: relative;
max-width: 800px;
margin: 4rem auto;
padding: 2rem;
background: rgba(10, 10, 42, 0.7);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline h2 {
text-align: center;
margin-bottom: 2rem;
color: #ffcccb;
}

.timeline-item {
padding: 1.5rem;
margin: 2rem 0;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border-left: 4px solid #ff0000;
}

.timeline-item h3 {
color: #ff9999;
margin-bottom: 0.5rem;
}

.quote-section {
text-align: center;
padding: 4rem 2rem;
margin: 4rem 0;
background: rgba(255, 0, 0, 0.1);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.quote {
font-size: 2rem;
font-style: italic;
max-width: 800px;
margin: 0 auto;
color: #ffcccb;
}

.author {
margin-top: 1.5rem;
font-size: 1.2rem;
color: #ff9999;
}

footer {
text-align: center;
padding: 3rem 0;
margin-top: 4rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-text {
margin-bottom: 1.5rem;
font-size: 1.1rem;
color: #aaa;
}

.indonesia-flag {
display: inline-block;
width: 30px;
height: 20px;
background: linear-gradient(to bottom, #ff0000 50%, #ffffff 50%);
margin: 0 5px;
border-radius: 2px;
vertical-align: middle;
}

.scroll-hint {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
color: #ffcccb;
animation: bounce 2s infinite;
}

.scroll-hint i {
font-size: 2rem;
margin-bottom: 10px;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
40% {transform: translateY(-20px) translateX(-50%);}
60% {transform: translateY(-10px) translateX(-50%);}
}

@keyframes pulse {
0% {transform: scale(1); box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);}
100% {transform: scale(1.05); box-shadow: 0 0 40px rgba(255, 0, 0, 0.8);}
}

@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}

.subtitle {
font-size: 1.4rem;
}

.features {
grid-template-columns: 1fr;
}

.quote {
font-size: 1.5rem;
}
}