:root{
	--bg:#061018;
	--panel:#0e1620;
	--accent:#6ee7ff;
	--accent-2:#8b5cf6;
	--muted:#9fb2bf;
	--glass:rgba(255,255,255,0.03);
	--card-shadow: 0 8px 30px rgba(2,6,23,0.6);
	--glow-accent: 0 0 20px rgba(110,231,255,0.3);
	--glow-purple: 0 0 20px rgba(139,92,246,0.2);
	--transition-smooth: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,Arial,Helvetica,sans-serif;background:radial-gradient(1200px 600px at 10% 10%, rgba(139,92,246,0.06), transparent 8%), radial-gradient(900px 400px at 90% 90%, rgba(110,231,255,0.04), transparent 8%), linear-gradient(180deg,var(--bg) 0%, #07101a 100%);color:#eaf3f8;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
a{color:var(--accent);text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:28px}
header.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(5,8,12,0.3),transparent);backdrop-filter:blur(8px);border-bottom:2px solid rgba(110,231,255,0.1);transition:all 0.4s ease;will-change:backdrop-filter,border-color;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
header.site-header.scroll-active{background:linear-gradient(180deg,rgba(5,8,12,0.65),transparent);backdrop-filter:blur(14px);border-bottom:2px solid rgba(110,231,255,0.2);box-shadow:0 8px 32px rgba(110,231,255,0.08)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;gap:12px}
a.brand{font-weight:900;font-size:18px;color:#fff;letter-spacing:0.8px;text-transform:uppercase;font-variant:small-caps;transition:all 0.35s ease;position:relative;cursor:pointer}
a.brand::before{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 0.4s cubic-bezier(0.23, 1, 0.320, 1)}
a.brand:hover::before{width:100%}
a.brand:hover{color:var(--accent);text-shadow:0 0 16px rgba(110,231,255,0.3)}
nav.nav{display:flex;align-items:center;gap:18px;padding:0 8px}
.nav-link{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;color:var(--muted);transition:all .35s cubic-bezier(0.23, 1, 0.320, 1);position:relative;font-weight:500;font-size:14px;letter-spacing:0.3px}
.nav-link svg{width:18px;height:18px;stroke:currentColor;transition:all 0.35s ease;flex-shrink:0}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 0.4s cubic-bezier(0.23, 1, 0.320, 1);border-radius:2px}
.nav-link:hover::after{width:60%}
.nav-link:hover{background:linear-gradient(135deg,rgba(110,231,255,0.08),rgba(139,92,246,0.04));color:#fff;transform:translateY(-2px);border-radius:10px}
.nav-link:hover svg{filter:drop-shadow(0 0 6px rgba(110,231,255,0.4))}
.nav-link:hover .nav-icon{filter:drop-shadow(0 0 6px rgba(110,231,255,0.4))}
.nav-link.active{color:#fff;font-weight:600}
.nav-link.active::after{width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.nav-link.active svg{filter:drop-shadow(0 0 8px rgba(110,231,255,0.5));stroke:var(--accent)}
.nav-link.active .nav-icon{filter:drop-shadow(0 0 8px rgba(110,231,255,0.5))}
.nav-icon{width:18px;height:18px;filter:invert(100%) sepia(0) saturate(0) hue-rotate(180deg) brightness(1.1);opacity:0.9}
.cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#02101a;padding:12px 18px;border-radius:12px;font-weight:800;box-shadow:0 8px 28px rgba(139,92,246,0.2);border:none;transition:all 0.4s cubic-bezier(0.23, 1, 0.320, 1);cursor:pointer;position:relative;overflow:hidden;letter-spacing:0.4px;text-transform:uppercase;font-size:13px}
.cta svg{width:18px;height:18px;transition:all 0.35s ease;flex-shrink:0}
.cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transition:left 0.6s cubic-bezier(0.23, 1, 0.320, 1)}
.cta:hover{box-shadow:0 16px 50px rgba(139,92,246,0.4),var(--glow-purple);transform:translateY(-3px) scale(1.05);filter:brightness(1.1)}
.cta:hover::before{left:100%}
.cta.small{padding:10px 16px;font-size:12px}
.cta.active{box-shadow:0 12px 40px rgba(139,92,246,0.4);filter:brightness(1.15);border:2px solid rgba(255,255,255,0.3)}
.cta:active{transform:translateY(-1px) scale(1.02)}

main{padding:40px 0}

/* Global heading styles */
main h2{font-size:36px;font-weight:900;margin:0 0 24px 0;color:#fff;letter-spacing:0.8px;text-transform:uppercase;font-variant:small-caps;background:linear-gradient(120deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;display:inline-block}
main h2::before{content:'';position:absolute;bottom:-8px;left:0;width:40%;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent);border-radius:2px}
main h3{font-size:22px;font-weight:800;margin:0 0 12px 0;color:#fff;letter-spacing:0.5px;text-transform:uppercase}
main h4{font-size:16px;font-weight:700;margin:0 0 8px 0;color:#fff;letter-spacing:0.3px}

.hero{position:relative;padding:56px;border-radius:14px;margin-bottom:28px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent 60%);box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,0.02);animation:heroFadeIn 0.8s ease-out}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-decor .blob{position:absolute;filter:blur(40px);opacity:0.65;transform:translate3d(0,0,0)}
.blob.b1{width:360px;height:200px;background:linear-gradient(90deg,var(--accent),transparent);left:-40px;top:-40px;border-radius:50%}
.blob.b2{width:240px;height:240px;background:linear-gradient(90deg,var(--accent-2),transparent);right:-80px;top:20px;border-radius:48%}
.blob.b3{width:180px;height:120px;background:linear-gradient(90deg,#2dd4bf,transparent);left:30%;bottom:-30px;border-radius:50%}
.hero-inner{position:relative;z-index:10;display:flex;flex-direction:column;gap:14px}
.hero h1{font-size:56px;margin:0;color:#fff;letter-spacing:1.2px;background:linear-gradient(120deg,#fff 0%,var(--accent) 50%,var(--accent-2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:900;animation:titleSlide 0.9s cubic-bezier(0.23, 1, 0.320, 1) 0.1s backwards;text-transform:uppercase;font-variant:small-caps;position:relative;text-shadow:0 0 40px rgba(110,231,255,0.1)}
@keyframes titleSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero p{color:var(--muted);max-width:720px;font-size:16px;line-height:1.6;font-weight:400;letter-spacing:0.3px;animation:fadeInSlide 0.9s ease-out 0.2s backwards}
@keyframes fadeInSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-ctas{display:flex;gap:12px;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#02101a;padding:12px 16px;border-radius:12px;font-weight:800;transition:all 0.4s ease;cursor:pointer;position:relative;overflow:hidden;border:none;text-transform:uppercase;font-size:13px;letter-spacing:0.3px}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:rgba(255,255,255,0.15);transition:left 0.6s ease}
.btn:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 14px 40px rgba(139,92,246,0.4);filter:brightness(1.15)}
.btn:hover::before{left:100%}
.btn:active{transform:translateY(-1px) scale(0.98)}
.btn.ghost{background:transparent;border:2px solid rgba(110,231,255,0.5);color:var(--accent);transition:all 0.4s ease;text-transform:uppercase}
.btn.ghost::before{background:linear-gradient(90deg,rgba(110,231,255,0.15),transparent)}
.btn.ghost:hover{background:rgba(110,231,255,0.12);border-color:var(--accent);box-shadow:0 10px 30px rgba(110,231,255,0.25);transform:translateY(-3px)}
.btn-icon{width:18px;height:18px}

/* Card and heading styling */
.card h3{margin:0 0 12px 0;font-size:18px;font-weight:800;color:#fff;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.3px}
.card p{margin:0 0 14px 0;color:var(--muted);font-size:14px;line-height:1.6}
.card:hover h3{color:var(--accent);text-shadow:0 0 12px rgba(110,231,255,0.4)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.015),transparent);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,6,23,0.5);transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s,border-color .3s ease;position:relative}
.card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(110,231,255,0.1),rgba(139,92,246,0.05));border-radius:12px;opacity:0;transition:opacity 0.3s ease}
.card:hover{transform:translateY(-12px);box-shadow:0 26px 60px rgba(2,6,23,0.6),var(--glow-accent);border-color:rgba(110,231,255,0.2)}
.card:hover::before{opacity:1}

.form{max-width:480px;display:flex;flex-direction:column;gap:12px}
.form input{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#fff}
.form label{color:var(--muted)}
.error{color:#ff8b8b}
.rules{list-style:disc;margin-left:20px;color:var(--muted)}
.team-list{list-style:none;padding:0}
.team-list li{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:14px;border-radius:10px;margin-bottom:10px}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(20px);animation:reveal 0.8s cubic-bezier(0.23, 1, 0.320, 1) forwards}
.reveal.delay{animation-delay:.12s}
.reveal.delay-2{animation-delay:.24s}
.reveal.delay-3{animation-delay:.36s}
.reveal.delay-4{animation-delay:.48s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

/* Stagger animations for grids */
.cards .card{animation:cardReveal 0.7s cubic-bezier(0.23, 1, 0.320, 1) backwards}
.cards .card:nth-child(1){animation-delay:0.1s}
.cards .card:nth-child(2){animation-delay:0.2s}
.cards .card:nth-child(3){animation-delay:0.3s}
@keyframes cardReveal{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Feature cards stagger */
.features .feature{animation:featureReveal 0.7s cubic-bezier(0.23, 1, 0.320, 1) backwards}
.features .feature:nth-child(1){animation-delay:0.15s}
.features .feature:nth-child(2){animation-delay:0.25s}
.features .feature:nth-child(3){animation-delay:0.35s}
@keyframes featureReveal{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}

/* Features */
.features{margin:28px 0}
.features h2{font-size:32px;font-weight:900;background:linear-gradient(120deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 20px 0;animation:titleSlide 0.9s ease-out}
.features .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;gap:12px;align-items:flex-start;transition:all 0.35s ease;position:relative}
.feature::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(110,231,255,0.08),rgba(139,92,246,0.04));border-radius:12px;opacity:0;transition:opacity 0.3s ease}
.feature:hover{transform:translateY(-6px);border-color:rgba(110,231,255,0.15);box-shadow:0 12px 35px rgba(2,6,23,0.4)}
.feature:hover::before{opacity:1}
.feature-icon{width:36px;height:36px;flex:0 0 36px;transition:transform 0.35s ease;filter:drop-shadow(0 0 8px rgba(110,231,255,0.2))}
.feature:hover .feature-icon{transform:scale(1.15) rotate(5deg)}
.feature h4{margin:0;color:#fff;font-weight:800;font-size:16px;letter-spacing:0.3px;text-transform:uppercase}
.feature p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

/* Stats */
.stats{margin:30px 0;padding:20px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,0.01),transparent);box-shadow:0 8px 30px rgba(2,6,23,0.45);border:1px solid rgba(255,255,255,0.02);animation:statsGlow 3s ease-in-out infinite}
@keyframes statsGlow{0%,100%{box-shadow:0 8px 30px rgba(2,6,23,0.45)}50%{box-shadow:0 12px 40px rgba(110,231,255,0.15)}}
.stat-grid{display:flex;gap:18px;justify-content:space-between}
.stat{flex:1;text-align:center;transition:all 0.35s ease;position:relative}
.stat:hover{transform:translateY(-4px)}
.stat .num{font-size:28px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 20px rgba(110,231,255,0.2)}
.stat .label{color:var(--muted);font-size:13px;font-weight:500;letter-spacing:0.5px}

/* Staff */
.staff-preview{margin:30px 0}
.staff-preview h2{font-size:32px;font-weight:900;background:linear-gradient(120deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 20px 0;animation:titleSlide 0.9s ease-out}
.team-cards{display:flex;gap:14px;flex-wrap:wrap}
.team-card{display:flex;gap:12px;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,6,23,0.38);transition:all 0.35s ease;position:relative}
.team-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,0.1),rgba(110,231,255,0.05));border-radius:12px;opacity:0;transition:opacity 0.3s ease}
.team-card:hover{transform:translateY(-8px);border-color:rgba(139,92,246,0.25);box-shadow:0 16px 40px rgba(139,92,246,0.2)}
.team-card:hover::before{opacity:1}
.avatar{width:56px;height:56px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:800;color:#02101a;box-shadow:0 0 15px rgba(139,92,246,0.3);transition:all 0.35s ease;position:relative;z-index:1}
.team-card:hover .avatar{box-shadow:0 0 25px rgba(139,92,246,0.5);transform:scale(1.1)}
.tc-body strong{display:block;color:#fff;font-size:14px;font-weight:700}
.tc-body span{color:var(--muted);font-size:13px;font-weight:500}

/* FAQ */
.faq{margin:30px 0}
.faq h2{font-size:32px;font-weight:900;background:linear-gradient(120deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 20px 0;animation:titleSlide 0.9s ease-out}
.qa{margin-bottom:10px;animation:reveal 0.8s ease-out backwards}
.q{width:100%;text-align:left;padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.03);display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;transition:all 0.35s ease;position:relative}
.q::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(110,231,255,0.08),transparent);border-radius:10px;opacity:0;transition:opacity 0.3s ease}
.q:hover{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-color:rgba(110,231,255,0.15);transform:translateX(4px)}
.q:hover::before{opacity:1}
.q span{transition:all 0.3s ease;font-weight:600;color:var(--accent)}
.a{padding:12px;margin-top:6px;border-left:3px solid var(--accent);background:rgba(110,231,255,0.04);display:none;color:var(--muted);border-radius:8px;animation:answerSlide 0.35s ease-out}
@keyframes answerSlide{from{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:500px;transform:translateY(0)}}

/* Newsletter */
.newsletter{margin:30px 0;padding:18px;border-radius:12px;background:linear-gradient(135deg,rgba(139,92,246,0.08),rgba(110,231,255,0.04));display:flex;flex-direction:column;gap:12px;border:1px solid rgba(110,231,255,0.1);transition:all 0.4s ease}
.newsletter:hover{border-color:rgba(110,231,255,0.25);box-shadow:0 12px 40px rgba(139,92,246,0.15)}
.newsletter h2{font-size:22px;font-weight:800;color:#fff;margin:0 0 8px 0;background:linear-gradient(120deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.newsletter-form{display:flex;gap:8px;max-width:520px}
.newsletter-form input{flex:1;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#fff;transition:all 0.3s ease;font-size:14px}
.newsletter-form input::placeholder{color:rgba(255,255,255,0.3)}
.newsletter-form input:focus{outline:none;border-color:rgba(110,231,255,0.3);background:rgba(255,255,255,0.04);box-shadow:0 0 15px rgba(110,231,255,0.1)}

@media (max-width:720px){.stat-grid{flex-direction:column;gap:12px}.team-cards{flex-direction:column}}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.03);animation:reveal 0.8s ease-out 0.3s backwards}
.footer-links a{margin-right:12px;color:var(--muted);transition:all 0.3s ease;position:relative}
.footer-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--accent);transition:width 0.3s ease}
.footer-links a:hover{color:var(--accent)}
.footer-links a:hover::after{width:100%}
.socials a{margin-left:8px;display:inline-flex;transition:all 0.3s ease}
.socials a:hover{transform:translateY(-3px)}
.social-icon{width:20px;height:20px;opacity:0.92;transition:filter 0.3s ease}
.socials a:hover .social-icon{filter:drop-shadow(0 0 8px rgba(110,231,255,0.4))}

.nav-link.mobile-open{display:flex;background:linear-gradient(90deg,rgba(255,255,255,0.03),transparent);padding:10px;border-radius:8px}

/* General h2 styling for all sections */
h2{font-size:32px;font-weight:900;margin:0 0 20px 0;animation:titleSlide 0.9s ease-out;background:linear-gradient(120deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Form improvements */
.form{max-width:480px;display:flex;flex-direction:column;gap:12px}
.form input{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#fff;transition:all 0.3s ease;font-size:14px}
.form input:focus{outline:none;border-color:rgba(110,231,255,0.3);background:rgba(255,255,255,0.04);box-shadow:0 0 15px rgba(110,231,255,0.1)}
.form label{color:var(--muted);font-weight:500;font-size:14px}
.error{color:#ff8b8b;font-weight:600;font-size:13px}

/* List improvements */
.rules{list-style:disc;margin-left:20px;color:var(--muted);line-height:1.8}
.rules li{margin-bottom:8px;transition:all 0.3s ease}
.rules li:hover{color:#fff;transform:translateX(4px)}

.team-list{list-style:none;padding:0}
.team-list li{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:14px;border-radius:10px;margin-bottom:10px;transition:all 0.35s ease;border:1px solid rgba(255,255,255,0.02)}
.team-list li:hover{transform:translateX(8px);border-color:rgba(110,231,255,0.15);box-shadow:0 8px 25px rgba(110,231,255,0.1)}

/* Responsive improvements */
@media (max-width:720px){
	.hero h1{font-size:36px;letter-spacing:0.8px}
	.hero p{font-size:14px}
	.hero{padding:40px}
	.site-header .container{padding:12px;gap:8px}
	nav.nav{gap:12px;flex-wrap:wrap}
	.nav-link{display:none;padding:8px 12px;font-size:12px}
	.cta.small{display:none;padding:8px 14px;font-size:11px}
	a.brand{font-size:16px;letter-spacing:0.6px}
	main h2{font-size:28px;letter-spacing:0.6px}
	main h2::before{width:30%;bottom:-6px}
	main h3{font-size:18px}
	h2{font-size:24px;margin:0 0 16px 0}
	.stat-grid{flex-direction:column;gap:12px}
	.team-cards{flex-direction:column}
	.btn{font-size:13px;padding:10px 14px;text-transform:uppercase}
	.newsletter-form{flex-direction:column}
	.newsletter-form input{width:100%}
	.cards{gap:14px}
	.feature{padding:14px}
	.form{max-width:100%}
}
