nononick

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
 }
 body {
 background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
 color: var(--light);
 overflow-x: hidden;
 min-height: 100vh;
 }
 /* Glassmorphism Effect */
 .glass {
 background: var(--glass);
 backdrop-filter: blur(var(--blur));
 -webkit-backdrop-filter: blur(var(--blur));
 border: 1px solid var(--glass-border);
 border-radius: 20px;
 }
 /* Header */
 header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 100;
 padding: 20px 5%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .logo {
 font-size: 24px;
 font-weight: 700;
 color: var(--light);
 text-decoration: none;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
 nav ul {
 display: flex;
 list-style: none;
 gap: 30px;
 }
 nav a {
 color: var(--light);
 text-decoration: none;
 font-weight: 500;
 transition: all 0.3s ease;
 position: relative;
 }
 nav a::after {
 content: '';
 position: absolute;
 bottom: -5px;
 left: 0;
 width: 0;
 height: 2px;
 background: var(--accent);
 transition: width 0.3s ease;
 }
 nav a:hover::after {
 width: 100%;
 }
 /* Hero Section */
 .hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 5%;
 position: relative;
 overflow: hidden;
 }
 .hero-content {
 text-align: center;
 z-index: 2;
 max-width: 800px;
 }
 .hero h1 {
 font-size: 4rem;
 font-weight: 700;
 margin-bottom: 20px;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
 }
 .hero p {
 font-size: 1.2rem;
 margin-bottom: 40px;
 opacity: 0.8;
 }
 .cta {
 display: inline-block;
 padding: 15px 40px;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 color: var(--light);
 text-decoration: none;
 border-radius: 50px;
 font-weight: 600;
 transition: all 0.3s ease;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }
 .cta:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
 }
 /* 3D Floating Elements */
 .floating {
 position: absolute;
 border-radius: 20px;
 animation: float 6s ease-in-out infinite;
 }
 .floating-1 {
 width: 200px;
 height: 200px;
 background: linear-gradient(135deg, var(--primary), var(--secondary));
 top: 10%;
 left: 10%;
 animation-delay: 0s;
 }
 .floating-2 {
 width: 150px;
 height: 150px;
 background: linear-gradient(135deg, var(--accent), #ff6b6b);
 bottom: 15%;
 right: 10%;
 animation-delay: 2s;
 }
 @keyframes float {
 0%, 100% {
 transform: translateY(0) rotate(0deg);
 }
 50% {
 transform: translateY(-20px) rotate(5deg);
 }
 }
 /* Services Section */
 .services {
 padding: 100px 5%;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 30px;
 }
 .service-card {
 padding: 30px;
 transition: all 0.3s ease;
 transform: translateY(20px);
 opacity: 0.8;
 }
 .service-card:hover {
 transform: translateY(0);
 opacity: 1;
 }
 .service-card h3 {
 font-size: 1.5rem;
 margin-bottom: 15px;
 color: var(--primary);
 }
 .service-card p {
 opacity: 0.8;
 line-height: 1.6;
 }
 /* Footer */
 footer {
 padding: 50px 5%;
 text-align: center;
 background: rgba(0, 0, 0, 0.2);
 backdrop-filter: blur(10px);
 }
 footer p {
 opacity: 0.7;
 margin-bottom: 20px;
 }
 .social-links {
 display: flex;
 justify-content: center;
 gap: 20px;
 }
 .social-links a {
 color: var(--light);
 font-size: 20px;
 transition: all 0.3s ease;
 }
 .social-links a:hover {
 color: var(--accent);
 transform: translateY(-5px);
 }
 /* Responsive */
 @media (max-width: 768px) {
 .hero h1 {
 font-size: 2.5rem;
 }
 .hero p {
 font-size: 1rem;
 }
 nav ul {
 display: none;
 }
 }
</style>

<section class="hero">
 <div class="floating floating-1 glass"></div>
 <div class="floating floating-2 glass"></div>
 <div class="hero-content">
 <h1>طراحی دیجیتال با Nononick</h1>
 <p>ما در Nononick با استفاده از جدیدترین تکنولوژی‌ها و سبک‌های مدرن، تجربه‌ای بی‌نظیر برای برند شما خلق می‌کنیم.</p>
 <a href="#" class="cta">شروع کنیم</a>
 </div>
</section>
<section class="services">
 <div class="service-card glass">
 <h3>طراحی UI/UX</h3>
 <p>طراحی رابط کاربری و تجربه کاربری با جدیدترین استانداردها و سبک‌های مدرن.</p>
 </div>
 <div class="service-card glass">
 <h3>توسعه وب</h3>
 <p>توسعه سایت‌ها و اپلیکیشن‌های وب با تکنولوژی‌های روز دنیا.</p>
 </div>
 <div class="service-card glass">
 <h3>برندینگ</h3>
 <p>خلق هویت بصری منحصر به فرد برای برند شما با استفاده از طراحی‌های خلاقانه.</p>
 </div>
</section>
<footer>
 <p>© 2026 Nononick. تمام حقوق محفوظ است.</p>
 <div class="social-links">
 <a href="#">📱</a>
 <a href="#">🌐</a>
 <a href="#">📧</a>
 <a href="#">📷</a>
 </div>
</footer>