:root{
  /* DARK (default) */
  --bg:#0b1120;
  --card:#1e293b;
  --text:#ffffff;
  --subtext:#cbd5e1;
  --primary:#38bdf8;
  --secondary:#0ea5e9;
  --border:rgba(255,255,255,0.1);
}

/* LIGHT MODE */
.light-mode{
  --bg:#f1f5f9;
  --card:#ffffff;
  --text:#0f172a;
  --subtext:#475569;
  --primary:#0ea5e9;
  --secondary:#0284c7;
  --border:rgba(0,0,0,0.08);
}


*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",sans-serif}
body{background:#0b1120;color:#fff}

/* NAV */
nav{
  display:flex;justify-content:space-between;
  padding:15px 40px;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:1000;
}
nav h1{color:#38bdf8}
nav a{color:#ddd;margin-left:20px;text-decoration:none}

/* HERO */
.hero{
  height:90vh;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;
  background:url("https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5") center/cover;
}
.hero h2{font-size:55px}
.hero p{margin-top:10px;color:#ddd}
.hero button{
  margin-top:20px;
  padding:14px 25px;
  border:none;
  background:#38bdf8;
  color:black;
  border-radius:10px;
  cursor:pointer;
}


body{
  background:var(--bg);
  color:var(--text);
  transition:all .4s ease;
}

/* NAV */
nav{
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(12px);
}
.light-mode nav{
  background:rgba(255,255,255,0.7);
}

/* CARD */
.card{
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
}


.card{
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,0.05);
}

.light-mode .card{
  background:rgba(255,255,255,0.8);
}

/* NAV GLASS */
nav{
  backdrop-filter:blur(16px);
}

body::before{
  content:"";
  position:fixed;
  width:500px;height:500px;
  background:radial-gradient(circle,var(--primary),transparent);
  top:-100px;left:-100px;
  filter:blur(120px);
  opacity:.3;
  z-index:-1;
}

body::after{
  content:"";
  position:fixed;
  width:500px;height:500px;
  background:radial-gradient(circle,var(--secondary),transparent);
  bottom:-100px;right:-100px;
  filter:blur(120px);
  opacity:.3;
  z-index:-1;
}

/* TEXT */
p{color:var(--subtext)}

/* BUTTON */
button{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  border:none;
  border-radius:10px;
  transition:.3s;
  padding: 10px;

  cursor: pointer;
}

 .clsPtr
 {
  cursor: pointer;
 }

button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

/* SECTION */
section{padding:70px 40px}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

/* CARD */
.card{
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(12px);
  padding:20px;
  border-radius:16px;
  transition:.4s;
}
.card:hover{transform:translateY(-8px)}
.card img{width:100%;
    /* border-radius:12px */
}
.card h3{margin-top:12px}

/* FEATURES */
.feature-box{
  display:flex;flex-wrap:wrap;
  justify-content:center;
  gap:25px;
}
.feature{
  width:260px;
  padding:20px;
  border-radius:16px;
  background:#1e293b;
  text-align:center;
}

/* STATS */
.stats{
  display:flex;justify-content:space-around;
  text-align:center;flex-wrap:wrap;
}
.stat h2{color:#38bdf8;font-size:35px}

/* TESTIMONIALS */
.testimonial{
  max-width:700px;margin:auto;
  text-align:center;color:#ccc;
}

/* SLIDER */
.slider{max-width:900px;margin:auto}
.slide{display:none}
.slide img{width:100%;border-radius:15px}
.active{display:block}

/* CTA */
.cta{
  text-align:center;
  background:#1e293b;
  padding:50px;
  border-radius:20px;
}
.cta button{
  margin-top:15px;
  padding:12px 20px;
  border:none;
  background:#38bdf8;
  border-radius:8px;
}

/* CONTACT */
.contact{text-align:center}
.contact input,.contact textarea{
  width:100%;max-width:500px;
  margin:10px auto;
  padding:12px;
  border:none;border-radius:8px;
}
.contact button{
  padding:12px 25px;
  background:#38bdf8;border:none;
  border-radius:8px;
}

/* FOOTER */
footer{
  background:#020617;
  padding:40px;
  text-align:center;
  color:#aaa;
}


.hero-slider{
  position:relative;
  height:100vh;
  overflow:hidden;

  padding: 0;
}

.hero-slide{
  position:absolute;
  width:100%;height:100%;
  opacity:0;
  transition:1s;
}

.hero-slide img{
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(0.5);
}

.hero-slide.active{opacity:1}

.hero-content{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}

.hero-content button{
  margin-top:20px;
  
}


.hero-content h2{font-size:55px}
.hero-content p{margin-top:10px;color:#ddd}

.nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:30px;
  cursor:pointer;
  padding:10px;
  background:rgba(0,0,0,0.5);
}

.prev{left:10px}
.next{right:10px}

.dots{
  position:absolute;
  bottom:20px;
  width:100%;
  text-align:center;
}
.dots span{
  display:inline-block;
  width:12px;height:12px;
  margin:5px;
  background:#bbb;
  border-radius:50%;
  cursor:pointer;
}
.dots span.active{background:#38bdf8}

.play-btn img{
  width:180px;
  margin-top:10px;
  transition:.3s;
}
.play-btn img:hover{
  transform:scale(1.05);
}

*{
  transition:
    background .3s ease,
    color .3s ease,
    border .3s ease;
}



/* CONTACT WRAPPER */
.contact-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:40px 20px;
}

/* FORM BOX */
.contact-form{
  width:100%;
  max-width:700px;
  padding:40px;
  border-radius:20px;
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}

/* LIGHT MODE FIX */
.light-mode .contact-form{
  background:rgba(255,255,255,0.9);
}

/* INPUT GROUP */
.input-group{
  position:relative;
  margin-bottom:25px;
}

/* INPUTS */
.input-group input,
.input-group textarea{
  width:100%;
  padding:16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-size:15px;
  outline:none;
}

/* TEXTAREA HEIGHT */
.input-group textarea{
  resize:none;
}

/* LABEL */
.input-group label{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:var(--subtext);
  font-size:14px;
  pointer-events:none;
  transition:0.3s;
  background:transparent;
}

/* FLOAT EFFECT */
.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label,
.input-group textarea:valid + label{
  top:-8px;
  left:10px;
  font-size:12px;
  padding:0 5px;
  background:var(--bg);
  color:var(--primary);
}

/* FOCUS EFFECT */
.input-group input:focus,
.input-group textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(56,189,248,0.2);
}

/* BUTTON FULL WIDTH */
.contact-form button{
  width:100%;
  padding:15px;
  font-size:16px;
  border-radius:12px;
}

@media (min-width:768px){
  .contact-form{
    padding:50px;
  }
}

.store-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.store-btn img{
  width:150px;
  transition:.3s;
}

.store-btn img:hover{
  transform:scale(1.05);
}

.developers-section{
  text-align:center;
  padding:60px 20px;
}

.developers-list{
  margin-top:20px;
}

.developers-list a{
  display:inline-block;
  margin:10px;
  padding:12px 20px;
  border-radius:25px;
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  color:#fff;
  text-decoration:none;
  transition:0.3s;
}

.developers-list a:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(0,0,0,0.3);
}

.nav-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  width:40px;   /* 🔥 perfect size */
  height:40px;
  border-radius:10px; /* optional (nice look) */
  object-fit:cover;
}


/* ===== LIGHT MODE FULL FIX ===== */
.light-mode{
  background:#f1f5f9;
  color:#0f172a;
}

/* NAV */
.light-mode nav{
  background:#ffffff;
}
.light-mode nav a{
  color:#0f172a;
}

/* HERO */
.light-mode .hero-slide img{
  filter:brightness(0.75);
}
.light-mode .hero-content h2{
  color:white;
}
.light-mode .hero-content p{
   /* color:#334155; */
}

/* BUTTONS */
.light-mode button{
  background:#0ea5e9;
  color:#fff;
}

/* CARDS */
.light-mode .card{
  background:#ffffff;
  color:#0f172a;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

/* FEATURES */
.light-mode .feature{
  background:#e2e8f0;
  color:#0f172a;
}

/* STATS */
.light-mode .stat h2{
  color:#0284c7;
}
.light-mode .stat p{
  color:#334155;
}

/* TESTIMONIAL */
.light-mode .testimonial{
  color:#475569;
}

/* CTA */
.light-mode .cta{
  background:#e2e8f0;
}

/* INPUTS */
.light-mode input,
.light-mode textarea{
  background:#ffffff;
  color:#000;
  border:1px solid #cbd5f5;
}

/* FOOTER */
.light-mode footer{
  background:#e2e8f0;
  color:#334155;
}

/* SLIDER DOTS */
.light-mode .dots span{
  background:#94a3b8;
}
.light-mode .dots span.active{
  background:#0ea5e9;
}










.card {
  position: relative;
  cursor: pointer;
}

.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

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

.store-buttons a {
  /* z-index: 3; */
  position: relative;
}

.store-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* FIX container size */
.store-buttons a {
  height: 40px;
  display: flex;
  align-items: center;
}

/* Reset images */
.store-buttons img {
  display: block;
  height: 100%;
  width: auto;
}

/* 🔥 FIX DIFFERENCE */
.store-buttons a:first-child img {
  height: 40px;   /* Google Play */
}

.store-buttons a:last-child img {
  /* height: 34px; */
}


.store-buttons a:last-child img {
  /* height: 34px; */
  transform: translateY(1px); /* tiny vertical alignment fix */
}


.store-buttons {
  display: flex;
  gap: 10px;
}

/* Fixed container */
.store-btn-box {
  width: 140px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Normalize images */
.store-btn-box img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}







.card {
  position: relative;
  cursor: pointer;
}

/* Full clickable overlay */
.card-link {
  position: absolute;
  inset: 0;
  z-index: 10;
  text-decoration: none;
}

/* Keep buttons clickable ABOVE overlay */
.store-buttons a {
  position: relative;
  z-index: 11;
}