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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #006aa7;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    position: relative;
    overflow: hidden;
}

.glass-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    pointer-events: none;
    z-index: 9999;
    box-shadow: inset 0 0 200px rgba(255, 255, 255, 0.02);
}

body::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(254, 204, 0, 0.03) 30%, rgba(254, 204, 0, 0.03) 70%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(254, 204, 0, 0.03) 30%, rgba(254, 204, 0, 0.03) 70%, transparent 70%);
    background-size: 100px 100px;
    animation: slide 20s linear infinite;
    opacity: 0.5;
}

.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.particles::before,
.particles::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(254, 204, 0, 0.4);
    box-shadow: 
        100px 200px rgba(254, 204, 0, 0.3),
        300px 100px rgba(254, 204, 0, 0.25),
        500px 300px rgba(254, 204, 0, 0.2),
        700px 150px rgba(254, 204, 0, 0.35),
        900px 400px rgba(254, 204, 0, 0.25),
        200px 450px rgba(254, 204, 0, 0.3),
        600px 350px rgba(254, 204, 0, 0.2),
        800px 50px rgba(254, 204, 0, 0.4),
        1100px 250px rgba(254, 204, 0, 0.3),
        400px 500px rgba(254, 204, 0, 0.25);
    animation: floatParticles 25s infinite ease-in-out;
}

.particles::after {
    animation-delay: -12s;
    opacity: 0.6;
}

.glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.glow-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(254, 204, 0, 0.4) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    animation: floatOrb1 20s infinite ease-in-out;
}

.glow-orb-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(254, 204, 0, 0.3) 0%, transparent 70%);
    bottom: -50px;
    left: -50px;
    animation: floatOrb2 18s infinite ease-in-out;
}

@keyframes floatParticles {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        transform: translateY(-10px) translateX(-15px);
    }
    75% {
        transform: translateY(-30px) translateX(5px);
    }
}

@keyframes floatOrb1 {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(-50px, 80px);
    }
    66% {
        transform: translate(30px, -40px);
    }
}

@keyframes floatOrb2 {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(60px, -50px);
    }
    66% {
        transform: translate(-30px, 70px);
    }
}

@keyframes slide {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

.container {
    text-align: center;
    padding: 2rem;
    max-width: 600px;
    width: 100%;
    position: relative;
    z-index: 1;
}

header h1 {
    font-size: 5rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(254, 204, 0, 0.2);
    letter-spacing: 4px;
    animation: fadeInDown 1s ease-out;
    font-weight: 800;
    margin-top: -1rem;
    transition: all 0.3s ease;
    cursor: default;
}

header h1:hover {
    transform: scale(1.03);
    text-shadow: 
        0 2px 15px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(254, 204, 0, 0.4);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tagline {
    font-size: 1.3rem;
    color: rgba(254, 204, 0, 0.95);
    margin-bottom: 4rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

main {
    background: transparent;
    padding: 5rem 4rem;
    margin: 2rem auto;
    animation: fadeInUp 1s ease-out 0.2s both;
    position: relative;
    max-width: 650px;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexagon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    z-index: 0;
    filter: drop-shadow(0 0 20px rgba(254, 204, 0, 0.4));
}

.hexagon polygon {
    fill: none;
    stroke: #fecc00;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawHexagon 2s ease-out 0.5s forwards, pulse 3s ease-in-out 2.5s infinite;
    transition: filter 0.3s ease;
}

.hexagon:hover polygon {
    filter: brightness(1.2);
}

@keyframes drawHexagon {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        stroke-width: 1.5;
        filter: drop-shadow(0 0 10px rgba(254, 204, 0, 0.6));
    }
    50% {
        stroke-width: 2;
        filter: drop-shadow(0 0 25px rgba(254, 204, 0, 0.8));
    }
}

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

.content {
    position: relative;
    z-index: 1;
    background: transparent;
    width: 100%;
    text-align: center;
    opacity: 0;
    animation: fadeInContent 0.8s ease-out 1.5s forwards;
}

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

.content h2 {
    font-size: 2.5rem;
    color: #fecc00;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(254, 204, 0, 0.3);
    letter-spacing: -0.5px;
}

.content p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.email-contact {
    margin-top: 2rem;
}

.email-contact a {
    position: relative;
    display: inline-block;
    padding: 1.2rem 3rem;
    background: #fecc00;
    color: #006aa7;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(254, 204, 0, 0.4);
    transition: all 0.3s ease;
    overflow: hidden;
    border: 3px solid #fecc00;
}

.email-contact a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #006aa7;
    transition: left 0.3s ease;
    z-index: -1;
}

.email-contact a:hover::before {
    left: 0;
}

.email-contact a:hover {
    color: #fecc00;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(254, 204, 0, 0.6);
}

.email-contact a:active {
    transform: translateY(-1px) scale(1.02);
}
6);
    font-size: 0.9rem;
    margin-top: 2rem;
    font-weight: 300 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    header h1 {
        font-size: 2.5rem;
    }
    
    main {
        padding: 2rem 1.5rem;
    }
    
    .content h2 {
        font-size: 1.5rem;
    }
}