/* Glass + buttons */
.glass {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .08);
}
.btn-primary {
  display: inline-block;
  padding: .7rem 1.1rem;
  border-radius: .75rem;
  background: linear-gradient(90deg, #00C9A7, #26e2c3);
  color: #062226;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0, 201, 167, .25);
  transition: transform .2s;
}
.btn-primary:hover {
  transform: translateY(-2px);
}
.btn-ghost {
  display: inline-block;
  padding: .7rem 1.1rem;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .12);
  color: #E6E6FA;
}

/* Hero background image + overlay */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(105%) contrast(102%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 42, 56, .85), rgba(30, 42, 56, .92));
}

/* Animated abstract 3D shapes */
.shape {
  position: absolute;
  pointer-events: none;
  filter: blur(8px);
  opacity: .35;
  transform-style: preserve-3d
}
.shape-a {
  width: 420px;
  height: 420px;
  left: -120px;
  top: -80px;
  background: radial-gradient(closest-side, #00C9A7, transparent);
  animation: floatA 10s ease-in-out infinite
}
.shape-b {
  width: 380px;
  height: 380px;
  right: -120px;
  bottom: -100px;
  background: radial-gradient(closest-side, #FFD60A, transparent);
  animation: floatB 12s ease-in-out infinite
}
@keyframes floatA {
  0%, 100% { transform: translateZ(0) translateY(0) }
  50% { transform: translateZ(60px) translateY(20px) }
}
@keyframes floatB {
  0%, 100% { transform: translateZ(0) translateY(0) }
  50% { transform: translateZ(80px) translateY(-20px) }
}

/* Mini tasks */
.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, .05);
  padding: .6rem .7rem;
  border-radius: .7rem
}
.task span { font-size: .95rem }
.chip {
  font-size: .7rem;
  padding: .25rem .5rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, .08);
  color: #E6E6FA
}

/* Cards */
.feature-card, .price-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1rem;
  padding: 1.1rem;
  transform-style: preserve-3d
}
.feature-card .icon {
  font-size: 1.7rem;
  color: #FFD60A;
  margin-bottom: .4rem
}
.card-title { font-weight: 700 }
.card-copy { color: #E6E6FA }

/* Pricing */
.price-card .price {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  margin: .6rem 0 .8rem
}
.price-card .amount {
  font-size: 2rem;
  font-weight: 800
}
.price-card .per { color: #E6E6FA }
.price-card .features {
  margin: .8rem 0 1rem;
  padding-left: 1rem;
  color: #E6E6FA
}
.price-card.featured {
  border-color: #00C9A7;
  box-shadow: 0 10px 40px rgba(0, 201, 167, .18)
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0
}
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #334155;
  border-radius: 999px;
  transition: .2s
}
.slider:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s
}
.switch input:checked + .slider { background: #00C9A7 }
.switch input:checked + .slider:before { transform: translateX(20px) }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease
}
.reveal.show {
  opacity: 1;
  transform: translateY(0)
}

/* 3D tilt effect */
.tilt {
  transition: transform .12s ease;
  will-change: transform;
  transform-style: preserve-3d
}
.tilt:hover { transform: translateZ(10px) }

/* ===== 1. Section Headings Visibility ===== */
.section-title {
  font-size: 2rem; /* desktop */
  font-weight: 800;
  color: #ffffff;
  text-align: center;
}
@media (max-width: 640px) {
  .section-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: #FFD60A; /* bright contrast for mobile */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
}

/* ===== 2. Hover/Touch Feedback for Buttons & Boxes ===== */
.btn-primary,
.btn-ghost,
.feature-card,
.price-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-primary:hover,
.btn-ghost:hover,
.feature-card:hover,
.price-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 201, 167, 0.25);
}
@media (max-width: 768px) {
  .btn-primary:active,
  .btn-ghost:active,
  .feature-card:active,
  .price-card:active {
    transform: scale(0.98);
    box-shadow: 0 6px 15px rgba(0, 201, 167, 0.3);
  }
}

/* ===== 3. Hero Image Full on Mobile ===== */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
}
@media (max-width: 640px) {
  .hero-bg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
  }
}