/* =========================================================
   home.css – v5 KZN Ultimate SaaS UI
   Cyber Luxury × Fitness Tech × Premium CRO
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   ROOT TOKENS
───────────────────────────────────────────────────────── */
:root {

  /* Brand */
  --brand: #0A6E55;
  --brand-mid: #0F8D6B;
  --brand-bright: #12C896;

  --gold: #C9A84C;
  --gold-light: #F6E2A2;

  /* Surface */
  --bg: #071411;
  --bg-soft: #0D1F1A;
  --surface: rgba(255,255,255,0.06);

  /* Text */
  --text: #FFFFFF;
  --text-muted: rgba(255,255,255,0.72);

  /* Border */
  --border: rgba(255,255,255,0.08);

  /* Effects */
  --blur: blur(18px);

  --shadow-sm:
    0 5px 18px rgba(0,0,0,0.25);

  --shadow-md:
    0 10px 35px rgba(0,0,0,0.45);

  --shadow-glow:
    0 0 30px rgba(18,200,150,0.18);

  --radius: 24px;

  --transition: .35s cubic-bezier(.2,.8,.2,1);
}

/* ─────────────────────────────────────────────────────────
   RESET
───────────────────────────────────────────────────────── */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:
    Inter,
    SF Pro Display,
    Arial,
    sans-serif;

  background:
    radial-gradient(circle at top left,
    rgba(18,200,150,0.12),
    transparent 28%),

    radial-gradient(circle at bottom right,
    rgba(201,168,76,0.10),
    transparent 30%),

    linear-gradient(135deg,
    #050816 0%,
    #071411 45%,
    #0B1D19 100%);

  color:var(--text);
  overflow-x:hidden;
}

/* ─────────────────────────────────────────────────────────
   GLOBAL
───────────────────────────────────────────────────────── */
section{
  position:relative;
  z-index:1;
}

.container{
  width:100%;
  max-width:1200px;
  margin:auto;
}

.section-title{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:900;
  text-align:center;
  margin-bottom:1rem;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      var(--gold-light),
      #ffffff
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.section-subtitle{
  text-align:center;
  color:var(--text-muted);
  max-width:700px;
  margin:auto auto 4rem;
  line-height:1.7;
}

/* ─────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────── */
.hero{
  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  padding:
    7rem
    1.5rem;

  overflow:hidden;
  position:relative;
}

/* Animated glow */
.hero::before{
  content:'';

  position:absolute;

  width:700px;
  height:700px;

  background:
    radial-gradient(circle,
    rgba(18,200,150,0.22),
    transparent 65%);

  filter:blur(60px);

  animation:floatGlow 8s ease-in-out infinite;
}

.hero::after{
  content:'';

  position:absolute;
  inset:0;

  background:
    radial-gradient(circle,
    transparent 30%,
    rgba(0,0,0,.42) 100%);
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:850px;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;

  padding:
    .6rem
    1rem;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:999px;

  background:
    rgba(255,255,255,.05);

  backdrop-filter:var(--blur);

  margin-bottom:2rem;

  color:var(--gold-light);

  font-size:.92rem;
  font-weight:700;

  box-shadow:var(--shadow-sm);
}

.hero h1{
  font-size:
    clamp(2.8rem,7vw,5.5rem);

  line-height:1.02;

  font-weight:950;

  letter-spacing:-2px;

  margin-bottom:1.5rem;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      var(--gold-light),
      #ffffff
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{
  font-size:1.15rem;
  line-height:1.8;

  color:var(--text-muted);

  max-width:720px;

  margin:
    auto
    auto
    2.5rem;
}

/* ─────────────────────────────────────────────────────────
   CTA BUTTONS
───────────────────────────────────────────────────────── */
.hero-cta{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{

  position:relative;

  overflow:hidden;

  padding:
    1rem
    2.2rem;

  border-radius:999px;

  font-weight:800;

  text-decoration:none;

  transition:var(--transition);

  backdrop-filter:var(--blur);
}

/* Primary */
.btn-primary{

  background:
    linear-gradient(
      135deg,
      var(--gold),
      #E8B84B
    );

  color:#1b1200;

  box-shadow:
    0 8px 30px rgba(201,168,76,.35);
}

.btn-primary::before{
  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.5),
      transparent
    );

  transform:translateX(-120%);
}

.btn-primary:hover::before{
  animation:shine .9s forwards;
}

.btn-primary:hover{
  transform:
    translateY(-5px)
    scale(1.03);
}

/* Secondary */
.btn-secondary{

  border:
    1px solid rgba(255,255,255,.14);

  color:#fff;

  background:
    rgba(255,255,255,.05);

  box-shadow:var(--shadow-sm);
}

.btn-secondary:hover{

  background:
    rgba(255,255,255,.09);

  transform:
    translateY(-5px);
}

/* ─────────────────────────────────────────────────────────
   FEATURES
───────────────────────────────────────────────────────── */
.features{
  padding:
    7rem
    1.5rem;
}

.features-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

  gap:1.8rem;
}

.card{

  position:relative;

  padding:2rem;

  border-radius:var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border:
    1px solid rgba(255,255,255,.06);

  backdrop-filter:var(--blur);

  transition:var(--transition);

  overflow:hidden;

  box-shadow:var(--shadow-sm);
}

.card::before{
  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(18,200,150,.12),
      transparent 40%
    );

  opacity:0;

  transition:var(--transition);
}

.card:hover::before{
  opacity:1;
}

.card:hover{

  transform:
    translateY(-10px)
    scale(1.02);

  border-color:
    rgba(18,200,150,.25);

  box-shadow:
    var(--shadow-md),
    var(--shadow-glow);
}

.card-icon{
  width:65px;
  height:65px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:20px;

  margin-bottom:1.4rem;

  font-size:1.5rem;

  background:
    linear-gradient(
      135deg,
      rgba(18,200,150,.2),
      rgba(201,168,76,.15)
    );

  border:
    1px solid rgba(255,255,255,.08);
}

.card h3{
  font-size:1.25rem;
  margin-bottom:.8rem;
}

.card p{
  color:var(--text-muted);
  line-height:1.7;
}

/* ─────────────────────────────────────────────────────────
   PRICING
───────────────────────────────────────────────────────── */
.pricing{
  padding:
    7rem
    1.5rem;
}

.pricing-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

  gap:2rem;
}

.pricing-card{

  position:relative;

  padding:2.5rem 2rem;

  border-radius:32px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.03)
    );

  border:
    1px solid rgba(255,255,255,.08);

  backdrop-filter:var(--blur);

  text-align:center;

  transition:var(--transition);

  overflow:hidden;
}

.pricing-card:hover{
  transform:
    translateY(-10px);
}

.pricing-card.featured{

  transform:
    scale(1.05);

  border:
    1px solid rgba(18,200,150,.35);

  box-shadow:
    0 15px 50px rgba(18,200,150,.18);
}

.pricing-card.featured::before{

  content:'MOST POPULAR';

  position:absolute;

  top:18px;
  right:-40px;

  transform:rotate(35deg);

  background:
    linear-gradient(
      135deg,
      var(--gold),
      #E8B84B
    );

  color:#1a1200;

  padding:
    .45rem
    3rem;

  font-size:.72rem;

  font-weight:900;
}

.price{
  font-size:3rem;
  font-weight:900;
  margin:1rem 0;
}

.price span{
  font-size:1rem;
  color:var(--text-muted);
}

/* ─────────────────────────────────────────────────────────
   CTA
───────────────────────────────────────────────────────── */
.cta{

  padding:
    7rem
    1.5rem;

  text-align:center;

  background:
    linear-gradient(
      135deg,
      rgba(10,110,85,.18),
      rgba(18,200,150,.08)
    );

  border-top:
    1px solid rgba(255,255,255,.06);

  border-bottom:
    1px solid rgba(255,255,255,.06);
}

/* ─────────────────────────────────────────────────────────
   REVEAL
───────────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* ─────────────────────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────────────────────── */
::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      var(--brand),
      var(--brand-bright)
    );

  border-radius:999px;
}

/* ─────────────────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────────────────── */
@keyframes gradientShift{
  0%{
    background-position:0%;
  }
  50%{
    background-position:100%;
  }
  100%{
    background-position:0%;
  }
}

@keyframes shine{
  to{
    transform:translateX(120%);
  }
}

@keyframes floatGlow{
  0%{
    transform:
      translateY(0px)
      translateX(0px);
  }

  50%{
    transform:
      translateY(-30px)
      translateX(20px);
  }

  100%{
    transform:
      translateY(0px)
      translateX(0px);
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE
───────────────────────────────────────────────────────── */
@media(max-width:768px){

  .hero{
    min-height:auto;
    padding-top:8rem;
    padding-bottom:6rem;
  }

  .hero h1{
    line-height:1.08;
  }

  .hero p{
    font-size:1rem;
  }

  .hero-cta{
    flex-direction:column;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
  }

  .pricing-card.featured{
    transform:none;
  }

  .section-title{
    font-size:2rem;
  }
}