:root{
  --navy:#030b20;
  --blue:#0d3f9e;
  --purple:#2f1058;
  --gold:#ffd36a;
  --orange:#ff9f3f;
  --cream:#fff7df;
  --ink:#08184a;
  --muted:#667085;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--cream);
  background:
    radial-gradient(circle at 12% 12%,#2368ff,transparent 28%),
    radial-gradient(circle at 88% 18%,#7a30ff,transparent 28%),
    linear-gradient(135deg,var(--navy),var(--blue) 55%,var(--purple));
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    radial-gradient(#fff 1px,transparent 1px),
    radial-gradient(var(--gold) 1px,transparent 1px);
  background-size:80px 80px,140px 140px;
}

.front-app{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:290px 1fr;
  min-height:100vh;
  transition:.25s ease;
}

.front-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:24px 18px;
  background:rgba(3,11,32,.84);
  border-right:1px solid rgba(255,211,106,.28);
  backdrop-filter:blur(18px);
  overflow:hidden;
}

.collapse-btn{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.1);
  color:var(--gold);
  cursor:pointer;
  margin-bottom:18px;
}

.front-brand{
  text-align:center;
  margin-bottom:28px;
}

.front-brand img{
  max-width:220px;
  width:100%;
  height:auto;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.45));
}

.front-menu a{
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
  text-decoration:none;
  padding:14px 16px;
  border-radius:16px;
  margin:8px 0;
  font-weight:900;
  border:1px solid transparent;
}

.front-menu a:hover{
  background:rgba(255,211,106,.16);
  border-color:rgba(255,211,106,.34);
  color:var(--gold);
}

.front-menu i{
  width:22px;
  text-align:center;
  color:var(--gold);
}

#navToggle:checked ~ .front-app{
  grid-template-columns:86px 1fr;
}

#navToggle:checked ~ .front-app .front-sidebar{
  padding-left:14px;
  padding-right:14px;
}

#navToggle:checked ~ .front-app .front-brand img{
  display:none;
}

#navToggle:checked ~ .front-app .front-menu span{
  display:none;
}

#navToggle:checked ~ .front-app .front-menu a{
  justify-content:center;
  padding:15px 0;
}

.front-main{
  min-width:0;
}

.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
  padding:70px 7%;
}

.eyebrow{
  display:inline-block;
  padding:11px 18px;
  border-radius:999px;
  border:1px solid rgba(255,211,106,.35);
  background:rgba(255,255,255,.10);
  color:var(--gold);
  font-weight:900;
  margin-bottom:24px;
}

.hero h1{
  font-size:86px;
  line-height:.88;
  letter-spacing:-4px;
  margin:0 0 28px;
  text-shadow:0 18px 42px rgba(0,0,0,.4);
}

.hero p{
  font-size:22px;
  line-height:1.55;
  max-width:760px;
  color:rgba(255,247,223,.9);
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:32px;
}

.primary-btn,
.secondary-btn,
.plan-btn{
  display:inline-block;
  text-decoration:none;
  border-radius:999px;
  padding:15px 26px;
  font-weight:900;
}

.primary-btn,
.plan-btn{
  background:linear-gradient(135deg,var(--gold),var(--orange));
  color:#251500;
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}

.secondary-btn{
  color:#fff;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.1);
}

.hero-panel{
  background:rgba(255,255,255,.96);
  color:var(--ink);
  border-radius:42px;
  padding:34px;
  text-align:center;
  border:1px solid rgba(255,211,106,.8);
  box-shadow:0 35px 90px rgba(0,0,0,.42);
}

.hero-panel img{
  width:100%;
  max-width:430px;
  height:auto;
  margin-bottom:18px;
}

.hero-panel h2{
  font-size:34px;
  color:#102a5c;
  margin:0 0 12px;
}

.hero-panel p{
  color:var(--muted);
  font-size:18px;
}

.logo-section,
.plans-section,
.rewards-section{
  padding:70px 7%;
}

.section-head{
  text-align:center;
  max-width:820px;
  margin:0 auto 42px;
}

.section-head h2{
  color:var(--gold);
  font-size:56px;
  line-height:1;
  margin:0 0 12px;
}

.section-head p{
  margin:0;
  color:rgba(255,247,223,.78);
  font-size:19px;
}

.logo-group{
  margin-bottom:42px;
}

.logo-group h3{
  font-size:28px;
  margin:0 0 18px;
}

.logo-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.vendor-logo{
  width:165px;
  height:145px;
  background:rgba(255,255,255,.96);
  border-radius:28px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,211,106,.75);
  box-shadow:0 20px 45px rgba(0,0,0,.26);
  color:var(--ink);
}

.vendor-logo img{
  max-width:115px;
  max-height:75px;
  object-fit:contain;
}

.vendor-logo span{
  font-size:30px;
  font-weight:900;
  color:#102a5c;
}

.vendor-logo small{
  margin-top:10px;
  font-weight:900;
  text-align:center;
  color:#102a5c;
}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.plan-card{
  background:rgba(255,255,255,.96);
  color:var(--ink);
  border-radius:34px;
  padding:30px;
  border:1px solid rgba(255,211,106,.75);
  box-shadow:0 24px 60px rgba(0,0,0,.30);
}

.plan-card.featured{
  transform:scale(1.04);
  border:2px solid var(--gold);
}

.plan-card h3{
  font-size:34px;
  margin:0 0 10px;
  color:#102a5c;
}

.price{
  font-size:38px;
  font-weight:900;
  color:#102a5c;
  margin-bottom:14px;
}

.price small,
.regular{
  font-size:14px;
  color:var(--muted);
}

.fee-box{
  display:grid;
  gap:8px;
  border-radius:18px;
  background:#fff8e8;
  border:1px solid #ead6a4;
  padding:16px;
  margin:14px 0;
}

.reward-card{
  background:rgba(255,255,255,.96);
  color:var(--ink);
  border-radius:38px;
  padding:38px;
  border:1px solid rgba(255,211,106,.75);
  box-shadow:0 26px 70px rgba(0,0,0,.30);
}

.reward-card h2{
  color:#102a5c;
  font-size:44px;
  margin:0 0 12px;
}

.reward-points{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:28px;
}

.reward-points div{
  background:#fff8e8;
  border:1px solid #ead6a4;
  border-radius:22px;
  padding:20px;
  text-align:center;
}

.reward-points strong{
  display:block;
  color:#102a5c;
  font-size:28px;
}

.front-footer{
  display:flex;
  justify-content:space-between;
  padding:36px 7%;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.75);
}

@media(max-width:1100px){
  .hero,
  .plans-grid{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:58px;
  }

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

  .reward-points{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:750px){
  .front-app{
    grid-template-columns:1fr;
  }

  .front-sidebar{
    position:relative;
    height:auto;
  }

  #navToggle:checked ~ .front-app{
    grid-template-columns:1fr;
  }

  .front-menu{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .front-menu a{
    margin:0;
  }

  #navToggle:checked ~ .front-app .front-menu span{
    display:inline;
  }

  #navToggle:checked ~ .front-app .front-brand img{
    display:block;
  }

  .hero h1{
    font-size:44px;
  }

  .vendor-logo{
    width:calc(50% - 9px);
  }

  .reward-points{
    grid-template-columns:1fr;
  }

  .front-footer{
    flex-direction:column;
    gap:8px;
  }
}