/* Basic Reset and Font */
html {
    scroll-behavior: smooth;
}
/* Modern UI styles for Nikatvartin */
:root{
    --bg: #0f1724; /* dark blue slate */
    --card: #0b1220;
    --muted: #94a3b8;
    --accent: #2dd4bf; /* teal */
    --accent-2: #60a5fa; /* blue */
    --glass: rgba(255,255,255,0.06);
    --glass-2: rgba(255,255,255,0.03);
    --radius: 14px;
}

/* Reset and base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.5;color:#e6eef8;background:linear-gradient(180deg,#071226 0%, #071528 60%);min-height:100vh}

.container{max-width:1100px;margin:0 auto;padding:2rem}

/* Header */
.header{position:fixed;top:16px;left:0;right:0;margin:auto;width:calc(100% - 48px);max-width:1200px;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));backdrop-filter:blur(8px);border-radius:16px;box-shadow:0 6px 24px rgba(2,6,23,0.6);z-index:60}
.logo{color:#e6eef8;font-weight:700;font-size:1.8rem;text-decoration:none}
.logo-tagline{font-size:0.85rem;color:var(--muted);display:block;font-weight: 400;letter-spacing: 1.5px;text-transform: uppercase;margin-top: 2px;}
.nav-links{list-style:none;display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:10px;transition:all .2s}
.nav-links a:hover{color:var(--accent-2);background:var(--glass)}
.menu-toggle{display:none}


.hero-section{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;padding-top:90px;overflow:hidden}

.hero-section::before{content:"";position:absolute;inset:-20% -10% -20% -10%;background:linear-gradient(120deg,rgba(45,212,191,0.12),rgba(96,165,250,0.10) 40%, rgba(135,95,255,0.06));transform:rotate(6deg);filter:blur(40px);z-index:0;animation:floaty 12s ease-in-out infinite}

.hero-bg-blob{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(45,212,191,0.18), rgba(96,165,250,0.06));filter:blur(36px);right:-8%;bottom:-6%;z-index:0;animation:blobMove 14s infinite linear}
.hero-bg-blob.alt{width:520px;height:520px;left:-12%;top:-10%;background:radial-gradient(circle at 70% 40%, rgba(96,165,250,0.14), rgba(99,102,241,0.03));animation-duration:18s}

@keyframes floaty{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6vh) rotate(2deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes blobMove{0%{transform:translate(0,0) scale(1)}25%{transform:translate(-6vw,-3vh) scale(1.05)}50%{transform:translate(6vw,6vh) scale(0.95)}75%{transform:translate(-3vw,8vh) scale(1.02)}100%{transform:translate(0,0) scale(1)}}

.hero-content{position:relative;z-index:10;text-align:center;color:#eaf6ff;padding:2rem;width:min(900px,92%)}
.hero-content h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;margin-bottom:.6rem;color:#f8fafc}
.hero-content p{color:var(--muted);font-weight:300;margin-bottom:1.6rem;font-size:1.05rem}

.playstore-link{display:inline-flex;align-items:center;gap:.9rem;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04263b;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(45,212,191,0.06);transition:transform .18s ease,box-shadow .18s}
.playstore-link img{border-radius:6px}
.playstore-link:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.6)}

/* Card / About */
.about-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:18px;padding:2.2rem;box-shadow:0 6px 30px rgba(2,6,23,0.45);border:1px solid rgba(255,255,255,0.03);color:#dbe9fb}
section h2{font-size:1.8rem;color:#e6eef8;margin-bottom:.6rem}
section h2::after{content:"";display:block;width:56px;height:4px;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));margin-top:10px}
.step-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1.2rem}
.step-item{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1rem;border-radius:12px;color:var(--muted)}
.step-item span{display:block;font-weight:800;color:var(--accent);margin-bottom:.35rem}

.contact-section {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding: 2.2rem;
    border-radius: 16px;
    margin-top: 1.6rem;
    color: #eaf6ff;
    text-align: center;
    /* FIXES START HERE */
    border: 1px solid rgba(255,255,255,0.03); /* Explicitly match the about-card border */
    box-shadow: 0 6px 30px rgba(2,6,23,0.45);  /* Explicitly match the about-card shadow */
    box-sizing: border-box;                   /* Ensures padding doesn't push the border out */
    overflow: hidden;                         /* Clips any gradient bleed */
}

/* Ensure the heading doesn't create extra spacing */
.contact-section h2::after {
    margin: 10px auto 0; /* Centers the underline for the centered contact box */
}

.footer{padding:2.4rem 1rem;text-align:center;color:var(--muted)}
.footer a{color:var(--accent-2);text-decoration:none}

/* Small utility */
.muted{color:var(--muted)}

.accent{color:var(--accent)}

/* Responsive */
@media (max-width:900px){
    .header{left:12px;right:12px}
    .nav-links{display:none}
    .menu-toggle{display:block}
}
@media (max-width:520px){
    .hero-content h1{font-size:1.8rem}
    .hero-bg-blob{display:none}
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero-section::before, .hero-bg-blob{animation:none;transition:none}
}