body {
  background:       radial-gradient(circle at top, #0b1220 0%, #020408 60%);
  color:            #e6e9ef;
  font-family:      -apple-system, BlinkMacSystemFont, "SF Pro Text",
                    "Helvetica Neue", sans-serif;
  font-size:        18px;
  line-height:      1.65;
  margin:           0;
  display:          flex;
  justify-content:  center;
}
header {
  margin-top:       40px;
  margin-bottom:    60px;
  text-align:       center;
}
footer {
  margin-top:       80px;
  font-size:        14px;
  text-align:       center;
  border-top:       1px solid rgba(255,255,255,0.08);
  padding-top:      2pt;
}
p { 
  line-height:      1.6;
}
a {
  color:            #5ac8fa;
  text-decoration:  none;
}
a:hover {
  text-decoration:  underline;
}
h3 {
  font-size:        26px;
  font-weight:      600;
  letter-spacing:   -0.015em;
  margin-top:       60px;
  margin-bottom:    24px;
  color:            #ffffff;
  position:         relative;
}
h4 {
  font-size:        22px;
  font-weight:      600;
  letter-spacing:   -0.01em;
  margin-top:       42px;
  margin-bottom:    18px;
  color:            #ffffff;
}
ul {
  list-style:       none;
  padding-left:     0;
  margin:           0 0 36px 0;
}
ul li {
  position:         relative;
  padding-left:     26px;
  margin-bottom:    8px;
  line-height:      1.7;
  color:            #c7ccd6;
}
ul li::before {
  content:          "•";
  position:         absolute;
  left:             0;
  top:              0;
  font-size:        18px;
}

/* App Name */
.hero {
  max-width:        720px;
  margin:           0 auto;
}
.app-name {
  font-size:        40px;
  font-weight:      700;
  letter-spacing:   -0.03em;
  margin-bottom:    8px;
  color:            #ffffff;
}
.hero-tagline {
  font-size:        22px;
  font-weight:      500;
  color:            #ffffff;
}

/* App Store */
.app-store {
  text-align:       center;
  margin:           40px 0;
}
.app-store a {
  display:          inline-block; /* Allows hover transform */
  transition:       transform 0.15s ease, box-shadow 0.15s ease;
}
.app-store img {
  height:           60px;
  width:            auto; /* Preserve proportions */
  display:          block; /* Removes small inline gap */
}
.app-store a:hover {
  transform:        translateY(-2px);
  box-shadow:       0 8px 20px rgba(0, 0, 0, 0.15);
}
@media (max-width: 600px) {
  .app-store img {
    height: 52px;
  }
}

/* Container */
.container {
  max-width:        820px;
  width:            100%;
  padding:          24px;
}
@media (max-width:  820px) {
  .container {
    width:          90%;
  }
}

/* Carousel */
.carousel {
  position:         relative;
  width:            100%;
  overflow:         hidden;
}
.carousel img {
  width:            100%;
  display:          none;
}
.carousel img.active {
  display:          block;
}

/* Arrow buttons */
.prev, .next {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  background:       rgba(255,255,255,0.08);
  backdrop-filter:  blur(6px);
  color:            #ffffff;
  border:           1px solid rgba(255,255,255,0.1);
  width:            44px;
  height:           44px;
  cursor:           pointer;
  border-radius:    50%;
  font-size:        20px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background 0.2s ease, transform 0.15s ease;
}
.prev:hover, .next:hover {
  background:       rgba(255,255,255,0.15);
  transform:        translateY(-50%) scale(1.05);
}
.prev { 
  left:             10pt;
}
.next { 
  right:            10pt;
}