:root{
  --brand:#ff6a2a;
  --teal:#1f4e5f;
  --dark:#071a22;
  --light:#ffffff;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}

body{
  background:#fff;
  overflow-x:hidden;
}

/* SECTION */
.h-download{
  position:relative;
  padding:50px 6%;
  /*background:*/
  /*  radial-gradient(900px 500px at 80% 20%, rgba(31,78,95,.25), transparent),*/
  /*  radial-gradient(700px 400px at 10% 80%, rgba(255,106,42,.2), transparent),*/
  /*  linear-gradient(180deg,#ffffff,#f6f9fb);*/
}

/* BIG BACK TEXT */
.h-download::before{
  content:"HINDSOL";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:180px;
  font-weight:900;
  letter-spacing:20px;
  color:rgba(15,23,42,.04);
  z-index:0;
  white-space:nowrap;
}

/* GRID */
.h-grid{
  position:relative;
  z-index:2;
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:120px;
  align-items:center;
}

/* LEFT */
.h-left .tag{
  display:inline-block;
  padding:10px 20px;
  border-radius:50px;
  background:rgba(255,106,42,.12);
  color:var(--brand);
  font-weight:800;
  letter-spacing:1px;
}

.h-left h1{
  margin-top:25px;
  font-size:64px;
  font-weight:900;
  line-height:1.1;
  color:#071a22;
}

.h-left h1 span{
    background: linear-gradient(90deg, var(--teal), #3d616d);
    -webkit-background-clip: text;
    color: transparent;
}

.h-left p{
  margin-top:30px;
  font-size:20px;
  line-height:1.9;
  color:#475569;
  max-width:650px;
}

/* ACTIONS */
.h-actions{
  display:flex;
  gap:50px;
  margin-top:55px;
  align-items:center;
}

.h-qr{
  display:grid;
  gap:16px;
  align-items:center;
}

.h-qr img{
  width:130px;
  padding:14px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 25px 60px rgba(0,0,0,.18);
}

.h-qr span{
  font-weight:800;
  color:var(--brand);
}

/* STORE BUTTONS */
.h-stores{
  display:flex;
  gap:18px;
}

.h-store{
    padding: 0px;
    border-radius: 0px;
    transition: .4s;
}

.h-store:hover{
  transform:translateY(-10px) scale(1.05);
  background:linear-gradient(135deg,var(--brand),#ff915f);
}

/* RIGHT – GLASS CARD */
.h-right{
  position:relative;
}

.glass{
  position:relative;
  background:linear-gradient(160deg,rgba(31,78,95,.85),rgba(7,26,34,.95));
  backdrop-filter:blur(16px);
  padding:70px 60px;
  border-radius:40px;
  color:#fff;
  box-shadow:0 80px 180px rgb(240 105 47 / 9%);
  transform-style:preserve-3d;
  transition:.3s;
}

.glass h3{
  font-size:36px;
  font-weight:900;
  color:var(--brand);
}

.glass ul{
  margin-top:35px;
  list-style:none;
  display:grid;
  gap:22px;
}

.glass li{
  font-size:18px;
  line-height:1.7;
  position:relative;
  padding-left:30px;
}

.glass li::before{
  content:"➤";
  position:absolute;
  left:0;
  color:var(--brand);
}

/* FLOAT SHADOW */
.glass::after{
  content:'';
  position:absolute;
  inset:-30px;
  background:radial-gradient(circle,rgba(255,106,42,.25),transparent 70%);
  filter:blur(60px);
  z-index:-1;
}

/* PARALLAX */
[data-tilt]{
  transform:perspective(1000px);
}

/* RESPONSIVE */
@media(max-width:1100px){
  .h-grid{grid-template-columns:1fr;text-align:center;}
  .h-actions{justify-content:center;flex-wrap:wrap;}
}



/* ===============================
   MOBILE (0px – 480px)
================================ */
@media (max-width: 480px) {

  .h-download{
    padding:80px 20px;
  }

  .h-download::before{
    font-size:90px;
    letter-spacing:8px;
  }

  .h-grid{
    grid-template-columns:1fr;
    gap:60px;
  }

  .h-left h1{
    font-size:36px;
    line-height:1.2;
  }

  .h-left p{
    font-size:16px;
    line-height:1.7;
  }

  .h-actions{
    flex-direction:column;
    gap:30px;
  }

  .h-qr{
    flex-direction:column;
    text-align:center;
  }

  .h-qr img{
    width:110px;
  }

  .h-stores{
    justify-content:center;
    flex-wrap:wrap;
  }

  .h-store{
    padding:14px 20px;
  }

  .glass{
    padding:45px 30px;
    border-radius:28px;
  }

  .glass h3{
    font-size:26px;
  }

  .glass li{
    font-size:16px;
  }
}


/* ===============================
   SMALL TABLETS (481px – 768px)
================================ */
@media (max-width: 768px) {

  .h-download{
    padding:100px 5%;
  }

  .h-download::before{
    font-size:120px;
  }

  .h-grid{
    grid-template-columns:1fr;
    gap:80px;
  }

  .h-left h1{
    font-size:44px;
  }

  .h-left p{
    font-size:18px;
  }

  .h-actions{
    justify-content:center;
    flex-wrap:wrap;
  }

  .glass{
    padding:55px 45px;
  }
}


/* ===============================
   TABLET / SMALL LAPTOP (769px – 1024px)
================================ */
@media (max-width: 1024px) {

  .h-grid{
    gap:90px;
  }

  .h-left h1{
    font-size:52px;
  }

  .h-left p{
    font-size:19px;
  }

  .glass{
    padding:60px 50px;
  }
}


/* ===============================
   LARGE SCREENS (1440px+)
================================ */
@media (min-width: 1440px) {

  .h-download{
    padding:160px 8%;
  }

  .h-left h1{
    font-size:72px;
  }

  .glass{
    padding:80px 70px;
  }
}


a.h-store img{
    height: 45px;
    width: 100%;
}