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

body {
    background: #0a0c0f;
    font-family: 'Space Grotesk', sans-serif;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}
/* 3D parallax layers */

.parallax-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    transform-style: preserve-3d;
}

.layer-1 {
    background: radial-gradient(circle at 20% 30%, #1a4f6e 0%, transparent 40%), radial-gradient(circle at 80% 70%, #2d1b3c 0%, transparent 40%);
    opacity: 0.4;
    transform: translateZ(-2px) scale(2);
}

.layer-2 {
    background: repeating-linear-gradient(0deg, rgba(0, 255, 200, 0.03) 0px, transparent 2px, transparent 8px);
    transform: translateZ(-1px) scale(1.5);
}

.grid-3d {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 255, 200, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 200, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: rotateX(60deg) translateZ(-10px) scale(2);
    transform-origin: center;
    animation: gridMove 20s linear infinite;
    pointer-events: none;
}

@keyframes gridMove {
    0% {
        transform: rotateX(60deg) translateZ(-10px) translateY(0) scale(2);
    }
    100% {
        transform: rotateX(60deg) translateZ(-10px) translateY(50px) scale(2);
    }
}

/*Note code*/
.wrapper{
    width:90%;
    margin:auto;
    position:relative;
    height:100px;
    overflow:hidden;
    margin-top: 5rem;
}

.scroll-item{
    display: flex;
    width:max-content;
    height:100px;
    position: absolute;
    animation: scrollleft 30s linear infinite;
}

.text{
    white-space: nowrap;
    padding-right: 40px;
}

/* animation distance */
@keyframes scrollleft{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}

/*---------------------------*/
/* floating orbs */

.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
    animation: orbFloat 10s ease-in-out infinite alternate;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: rgba(0, 180, 255, 0.15);
    top: -200px;
    right: -200px;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: rgba(255, 0, 180, 0.12);
    bottom: -200px;
    left: -200px;
    animation-delay: -5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: rgba(100, 255, 200, 0.1);
    top: 40%;
    left: 40%;
    animation-duration: 15s;
}

@keyframes orbFloat {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-50px) scale(1.2);
    }
}

.parallax-layer,
.grid-3d,
.orb {
    pointer-events: none !important;
    position: fixed;
    z-index: -1 !important;
}
/* main container */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 10;
}
/* navbar - glass 3d */

.navbar {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 100;
    background: rgba(10, 15, 20, 0.6);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 60px;
    padding: 12px 28px;
    box-shadow: 0 20px 40px -20px rgba(0, 255, 200, 0.3), 0 0 0 1px rgba(0, 255, 200, 0.1) inset;
    transform: translateZ(10px);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-weight: 700;
    font-size: 1.6rem;
    background: linear-gradient(135deg, #a0f0ff, #c0a0ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: #c0d0e0;
    font-weight: 500;
    transition: 0.3s;
    text-shadow: 0 0 10px rgba(0, 255, 200, 0.3);
}

.nav-links a:hover {
    color: #9ffff0;
    text-shadow: 0 0 20px #00ffc3;
}

.nav-register {
    background: linear-gradient(145deg, #00ccb0, #0088cc);
    color: black !important;
    padding: 12px 32px;
    border-radius: 40px;
    font-weight: 600;
    box-shadow: 0 10px 30px -10px #00ffff, 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

.nav-register:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 40px -10px #00ffff;
}

.hamburger {
    display: none;
    color: white;
    background: none;
    border: 1px solid #33ffdd;
    padding: 10px;
    border-radius: 30px;
}
/* mobile menu */

.mobile-menu {
    display: none;
}

.btn-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.register-link {
    background: linear-gradient(145deg, #00ffc3, #0099ff);
    color: #0a0c0f;
    font-weight: 700;
    padding: 18px 52px;
    border-radius: 60px;
    text-decoration: none;
    font-size: 1.1rem;
    box-shadow: 0 20px 40px -10px #00ffff, 0 0 0 1px white inset;
    transition: 0.3s;
    border: none;
    display: inline-block;
    cursor: pointer;
}

.register-link:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 30px 60px -10px #00ffff;
}

.explore-link {
    background: transparent;
    border: 2px solid #33ffdd;
    color: #ccffff;
    padding: 18px 52px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: 0.3s;
    display: inline-block;
    cursor: pointer;
}

.explore-link:hover {
    background: rgba(0, 255, 200, 0.1);
    box-shadow: 0 0 30px #33ffdd;
}

.prize-badge {
    margin-top: 60px;
    background: rgba(0, 255, 200, 0.1);
    border: 1px solid cyan;
    border-radius: 60px;
    padding: 16px 40px;
    display: inline-block;
    backdrop-filter: blur(10px);
}

.code-block-text {
    color: #33ffdd;
}

.code-block-var {
    color: #ff99ff;
}

.code-block-string {
    color: #aaffaa;
}

.faq-item {
    background: rgba(0, 20, 30, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid cyan;
    border-radius: 40px;
    padding: 22px 32px;
    margin-bottom: 16px;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    cursor: pointer;
}

.faq-plus {
    color: cyan;
}

.faq-answer {
    display: none;
    margin-top: 16px;
    color: #b0d0e0;
}

.contact-box {
    background: rgba(0, 20, 30, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid cyan;
    border-radius: 80px;
    padding: 60px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.contact-location {
    font-size: 1.3rem;
}

.contact-links {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin: 40px 0;
}

.contact-link {
    color: #33ffdd;
    text-decoration: none;
}

.team-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.team-contact {
    font-size: 0.8rem;
    margin-top: 12px;
}

.team-role {
    color: #33ffdd;
}

.prize-card-third {
    font-size: 4rem;
}

.prize-card-grid {
    grid-template-columns: repeat(4, 1fr);
}

.footer-title {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #33ffdd, #ff99ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-text {
    color: #90b0d0;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}
/* hero */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.hero .container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-content {
    width: min(900px, 90%);
    margin: auto;
    text-align: center;
}

.hero-content {
    max-width: 900px;
    transform-style: preserve-3d;
    transform: translateZ(30px) rotateX(2deg);
    animation: floatIn 1.2s ease-out;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateZ(0) rotateX(5deg) translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateZ(30px) rotateX(2deg) translateY(0);
    }
}

.hero-badge {
    display: inline-block;
    background: rgba(0, 255, 200, 0.1);
    border: 1px solid #33ffdd;
    border-radius: 60px;
    padding: 8px 24px;
    font-size: 0.9rem;
    color: #9ffff0;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(0, 255, 200, 0.2);
}

.hero-title {
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #ffffff, #a0f0ff, #cc99ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.hero-sub {
    font-size: 1.5rem;
    color: #c0d0e0;
    max-width: 780px;
    /* <-- MAIN FIX */
    margin: 0 auto 40px;
    text-align: center;
    text-wrap: balance;
    /* smart line break */
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 50px;
}

.meta-item {
    background: rgba(20, 30, 40, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 60px;
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d0e0ff;
    box-shadow: 0 10px 30px -15px #00ffff;
}
/* 3D countdown */

.countdown-3d {
    display: flex;
    gap: 20px;
    margin: 60px 0 40px;
    perspective: 800px;
}

.countdown-item {
    background: rgba(10, 20, 30, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid #33ffdd;
    border-radius: 30px;
    padding: 20px 10px;
    min-width: 110px;
    text-align: center;
    transform: rotateY(10deg) rotateX(5deg) translateZ(10px);
    box-shadow: 0 20px 40px -20px #00ffff, 0 0 0 1px #33ffdd inset;
    transition: 0.3s;
}

.countdown-item:hover {
    transform: rotateY(5deg) rotateX(0) translateZ(20px);
    box-shadow: 0 30px 60px -20px #00ffff;
}

.countdown-value {
    font-size: 3.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff, #9ffff0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.countdown-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #99ccff;
    letter-spacing: 2px;
}
/*-----------------------------------------------------------------------------*/
.btn-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-primary {
    background: linear-gradient(145deg, #00ffc3, #0099ff);
    color: #0a0c0f;
    font-weight: 700;
    padding: 18px 52px;
    border-radius: 60px;
    text-decoration: none;
    font-size: 1.1rem;
    box-shadow: 0 20px 40px -10px #00ffff, 0 0 0 1px white inset;
    transition: 0.3s;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 30px 60px -10px #00ffff;
}

.btn-outline {
    background: transparent;
    border: 2px solid #33ffdd;
    color: #ccffff;
    padding: 18px 52px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: 0.3s;
}

.btn-outline:hover {
    background: rgba(0, 255, 200, 0.1);
    box-shadow: 0 0 30px #33ffdd;
}

.register-link-hero {
    position: relative;
    z-index: 999;
}
/* sections */

section {
    padding: 100px 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 70px;
}

.section-label {
    color: #33ffdd;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.8rem;
    margin-bottom: 16px;
    text-shadow: 0 0 10px cyan;
}

.section-title {
    font-size: 3.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff, #aafff0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* about 3d card */

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.about-text {
    background: rgba(15, 25, 35, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid #33ffdd33;
    border-radius: 50px;
    padding: 40px;
    transform: rotateY(5deg) translateZ(10px);
    box-shadow: 0 40px 60px -30px #00ffff;
}

.about-intro {
    font-size: 1.2rem;
    margin-bottom: 24px;
}

.about-highlight {
    color: #33ffdd;
}

.about-description {
    color: #b0d0e0;
}

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

.stat-card {
    background: rgba(0, 20, 30, 0.6);
    border: 1px solid #33ffdd;
    border-radius: 30px;
    padding: 24px;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #33ffdd;
}

.code-block {
    background: #0f1a24;
    border-radius: 40px;
    padding: 40px;
    border: 1px solid #33ffdd;
    font-family: monospace;
    font-size: 1rem;
    box-shadow: 0 30px 60px -30px #021a1a;
    transform: rotateY(-5deg) translateZ(15px);
}
/* timeline 3d */

.timeline-3d {
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    transform-style: preserve-3d;
    transition: 0.3s;
}

.timeline-dot {
    width: 24px;
    height: 24px;
    background: #33ffdd;
    border-radius: 50%;
    box-shadow: 0 0 30px cyan;
    margin-top: 15px;
    position: relative;
}

.timeline-dot::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 100px;
    background: linear-gradient(180deg, cyan, transparent);
    left: 11px;
    top: 24px;
}

.timeline-item:last-child .timeline-dot::after {
    display: none;
}

.timeline-content {
    background: rgba(15, 25, 40, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid #33ffdd;
    border-radius: 40px;
    padding: 28px 36px;
    flex: 1;
    transform: translateX(-10px) rotateY(3deg);
    box-shadow: 0 20px 40px -20px cyan;
}

.timeline-title {
    font-size: 1.6rem;
}

/* domains */

#domains{
  padding:80px 20px;
  background: transparent;
}

.section-title{
  text-align:center;
  font-size:40px;
  color:#ff4d00;
  margin-bottom:50px;
}

/* GRID */

.domains-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

/* CARD */
.readMoreBtn{
    background: linear-gradient(145deg,rgba(28, 89, 181, 0.6),#302f2f);;
    color: rgb(242, 240, 240);
    border-radius: 5px;
    padding: 8px;
}
.domain-card{
  position:relative;
  background:linear-gradient(145deg,rgba(12, 26, 47, 0.6),#000000);
  border:1px solid rgba(240, 233, 235, 0.945);
  border-radius:16px;
  padding:40px 20px;
  text-align:center;
  cursor:pointer;
  transition:0.4s;
}

.domain-card::before{
content:"";
position:absolute;
inset:-1px;
border-radius:16px;
background:linear-gradient(45deg,#0fafee,#113543);
opacity:0;
transition:0.4s;
z-index:-1;
}

.domain-card:hover::before{
opacity:1;
}

.domain-card:hover {
    transform: translateZ(30px) rotateX(2deg);
    box-shadow: 0 40px 80px -20px cyan;
    border-color: #aaffff;
}

.domain-card:hover .read-more{
  opacity:1;
}

/* MODAL BACKGROUND */

.modal-overlay{
position:fixed;
top:0;
left:0;
border-radius: 20px;
padding: 40px;
background:rgb(22, 21, 21);
margin: 10%;
display:flex;
align-items:center;      /* vertical center */
justify-content:center;  /* horizontal center */

opacity:1000;
visibility:hidden;
transition:0.3s;

z-index:999;
}

/* visible state */

.modal-overlay.active{
    opacity:1;
    visibility:visible;
}

/* modal animation */

.modal{
    transform:scale(0.9);
    opacity: 0;
    transition:all 0.35s ease;
}
.modal.active{
transform:scale(1);
opacity:1;
}

.domain-desc {
    color: #a0c0e0;
}

/*------------------------------------------------------*/
/* prizes 3d */

.prizes-3d {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.prize-card {
    background: rgba(0, 15, 25, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid #33ffdd;
    border-radius: 60px;
    padding: 40px 20px;
    text-align: center;
    transform: rotateY(5deg) rotateX(2deg);
    transition: 0.3s;
}

.prize-card:hover {
    transform: scale(1.05) rotateY(0) translateZ(20px);
}
/* team */

.team-grid {
    display: flex;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    align-items: center;
    justify-content: center;
}

.team-card {
    background: rgba(0, 20, 30, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid #33ffdd;
    border-radius: 40px;
    padding: 30px 15px;
    text-align: center;
    gap:20px;
    transform: rotateY(5deg);
    transition: 0.3s;
}

.team-avatar {
    width: 90px;
    height: 90px;
    background: linear-gradient(145deg, #1f4a5a, #0a1a2a);
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 2px solid cyan;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* footer */

.footer {
    border-top: 1px solid #33ffdd33;
    padding: 60px 0;
    text-align: center;
    background: rgba(5, 10, 15, 0.8);
    backdrop-filter: blur(10px);
}
/* responsive */

@media (max-width: 1200px) {
    .nav-links {
        gap: 20px;
    }
}

.hero * {
    position: relative;
    z-index: 2;
}

.parallax-layer,
.grid-3d,
.orb,
canvas,
video {
    z-index: -1 !important;
    pointer-events: none !important;
}

@media (max-width: 1000px) {
    .nav-links {
        display: none;
    }
    .hamburger {
        display: block;
    }
    .hero-title {
        font-size: 3.5rem;
    }
    .about-grid,
    .prizes-3d,
    .team-grid {
        grid-template-columns: 1fr;
    }
    .hero .container {
        justify-content: center;
    }
    .hero-content {
        text-align: center;
    }
    .hero-meta {
        justify-content: center;
    }
    .countdown-3d {
        justify-content: center;
    }
    .btn-container {
        justify-content: center;
    }
}