.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(7,8,11,.75), rgba(7,8,11,.25));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,213,106,.16),
    rgba(247,185,11,.20),
    rgba(255,213,106,.16),
    transparent
  );
  pointer-events:none;
  animation: headerGlow 7s ease-in-out infinite;
}
.header__inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}
.brand__mark{
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,213,106,.18);
  background: rgba(255,255,255,.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding:8px;
}
.brand__name{font-weight:700; letter-spacing:-.02em}
.brand__tag{font-size:.86rem; color:var(--muted)}

.nav{
  display:flex;
  gap:16px;
  align-items:center;
  margin-left:auto;
}
.nav__link{
  color:rgba(233,238,249,.86);
  font-weight:600;
  font-size:.98rem;
  padding:10px 10px;
  border-radius: 12px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__link:hover{
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.header__cta{display:flex; align-items:center; gap:10px}

.menuBtn{
  display:none;
  margin-left:8px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  width:46px; height:46px;
  padding:0;
  cursor:pointer;
}
.menuBtn__bar{
  display:block;
  width:22px;
  height:2px;
  background: rgba(233,238,249,.85);
  margin:7px auto;
  border-radius:999px;
}

.mobileNav{
  display:none;
  border-top:1px solid rgba(255,255,255,.06);
  padding: 14px 0 18px;
}
.mobileNav__link{
  display:block;
  padding:12px 0;
  color:rgba(233,238,249,.9);
  font-weight:700;
}
.mobileNav__actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.stickyActions{
  position:fixed;
  right:14px;
  bottom:14px;
  display:flex;
  gap:10px;
  z-index:55;
  padding:10px;
  border-radius: 18px;
  background: rgba(7,8,11,.55);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.hero{
  position:relative;
  padding: 54px 0 44px;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:34px;
  align-items:stretch;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:rgba(233,238,249,.82);
  font-weight:600;
  font-size:.95rem;
}
.chip__dot{
  width:9px; height:9px;
  border-radius:999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,213,106,1), rgba(247,185,11,.6));
  box-shadow: 0 0 18px rgba(255,213,106,.35);
}

.goldUnderline{
  position:relative;
  color:var(--text);
}
.goldUnderline::after{
  content:"";
  position:absolute;
  left:-2px;
  bottom:-8px;
  width: calc(100% + 6px);
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,213,106,.2), rgba(255,213,106,.95), rgba(247,185,11,.85));
  transform: scaleX(0);
  transform-origin:left;
  animation: underlineDraw 1.1s var(--ease) .6s forwards;
  box-shadow: 0 0 22px rgba(255,213,106,.20);
}

.hero__actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.microTrust{
  margin-top:18px;
  color:rgba(233,238,249,.72);
  font-weight:600;
  font-size:.95rem;
}

.hero__visual .frame{
  position:relative;
  height:100%;
  min-height: 480px;
  padding-bottom: 130px;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.frame__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:.22;
  mask-image: radial-gradient(circle at 30% 20%, rgba(0,0,0,1), rgba(0,0,0,0) 68%);
}
.stats{
  position:relative;
  display:grid;
  gap:10px;
  padding: 14px;
}
.stat{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding: 10px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,8,11,.35);
}
.stat__num{
  font-family:"Space Grotesk", Inter, sans-serif;
  font-weight:700;
  font-size: 1.6rem;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255,213,106,.14);
}
.stat__num .percent{
  font-size: .9em;
  margin-left: 2px;
  opacity: .85;
}
.stat__label{
  color:rgba(233,238,249,.72);
  font-weight:600;
  font-size:.95rem;
  text-align:right;
}

.pulseCard{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  padding:16px 16px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,213,106,.20);
  background: linear-gradient(180deg, rgba(255,213,106,.10), rgba(7,8,11,.55));
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  z-index: 2;
}
.pulseCard__title{
  font-family:"Space Grotesk", Inter, sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:10px;
}
.pulseCard__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(233,238,249,.86);
  font-weight:600;
}
.pulseCard__row:first-of-type{border-top:0}
.badge{
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(233,238,249,.9);
  font-size:.92rem;
}
.arrow{opacity:.7}

.shine{
  position:absolute; inset:-120px;
  background: radial-gradient(circle at 20% 20%, rgba(255,213,106,.13), transparent 55%),
              radial-gradient(circle at 75% 30%, rgba(247,185,11,.10), transparent 60%);
  filter: blur(0px);
  animation: slowFloat 10s var(--ease) infinite alternate;
  pointer-events:none;
}

.scrollHint{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.82;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(7,8,11,.35);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.scrollHint__mouse{
  width:18px; height:28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  position:relative;
}
.scrollHint__mouse::after{
  content:"";
  position:absolute;
  left:50%; top:6px;
  width:4px; height:4px;
  border-radius:999px;
  background: var(--gold);
  transform: translateX(-50%);
  animation: mouseDot 1.25s var(--ease) infinite;
}
.scrollHint__text{font-weight:700; font-size:.95rem; color:rgba(233,238,249,.8)}

.section{
  padding: 78px 0;
}
.section__head{
  max-width: 820px;
}
.cards{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.card{
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.20);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,213,106,.22);
  background: rgba(255,255,255,.04);
}
.card__icon{font-size:1.35rem; margin-bottom:12px}

.section--shift{
  background: linear-gradient(180deg, rgba(255,213,106,.04), rgba(255,255,255,0));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.shift{
  padding: 18px 0 0;
}
.kicker{
  display:inline-block;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.82rem;
  color: rgba(255,213,106,.95);
  margin:0 0 10px;
}
.divider{
  height:2px;
  width: 100%;
  margin: 18px 0 10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,213,106,0), rgba(255,213,106,.9), rgba(247,185,11,.7), rgba(255,213,106,0));
  opacity:.75;
}
.shift__bullets{
  margin-top: 18px;
  display:grid;
  gap: 12px;
  max-width: 760px;
}
.bullet{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,8,11,.30);
  font-weight:700;
  color: rgba(233,238,249,.85);
}
.bullet__mark{
  width:10px; height:10px;
  border-radius:999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,213,106,1), rgba(247,185,11,.55));
  box-shadow: 0 0 18px rgba(255,213,106,.20);
}

.grid6{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  position:relative;
}
.module{
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  min-height: 148px;
}
.module__top{
  display:flex; align-items:center; gap:12px;
  margin-bottom: 10px;
}
.module__icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius: 14px;
  border:1px solid rgba(255,213,106,.18);
  background: rgba(255,255,255,.02);
}
.module__title{
  font-family:"Space Grotesk", Inter, sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
}
.systemOutline{
  margin-top: 26px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,213,106,0), rgba(255,213,106,.9), rgba(247,185,11,.6), rgba(255,213,106,0));
  opacity:.55;
  transform: scaleX(0);
  transform-origin:center;
  animation: outlineDraw 1.4s var(--ease) .2s forwards;
}

.timeline{
  margin-top: 26px;
  position:relative;
  display:grid;
  gap:14px;
  max-width: 860px;
}
.step{
  display:flex;
  gap:14px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.step__dot{
  width:14px; height:14px;
  border-radius:999px;
  margin-top: 6px;
  background: radial-gradient(circle at 35% 35%, rgba(255,213,106,1), rgba(247,185,11,.50));
  box-shadow: 0 0 18px rgba(255,213,106,.22);
}
.timeline__line{
  position:absolute;
  left: 21px;
  top: 16px;
  bottom: 16px;
  width:2px;
  background: linear-gradient(180deg, rgba(255,213,106,0), rgba(255,213,106,.75), rgba(255,213,106,0));
  opacity:.35;
  border-radius:999px;
}

.pricing{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.priceCard{
  position:relative;
  padding: 18px 18px 16px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 16px 50px rgba(0,0,0,.20);
  overflow:hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.priceCard:hover{
  transform: translateY(-4px);
  border-color: rgba(255,213,106,.25);
  box-shadow: 0 22px 65px rgba(0,0,0,.28);
}
.priceCard--featured{
  border-color: rgba(255,213,106,.35);
  background: linear-gradient(180deg, rgba(255,213,106,.10), rgba(255,255,255,.02));
}
.priceCard__badge{
  position:absolute;
  top:14px; right:14px;
  padding:8px 10px;
  border-radius: 999px;
  font-weight:800;
  font-size:.85rem;
  color:#0b0d14;
  background: linear-gradient(180deg, rgba(255,213,106,1), rgba(247,185,11,.95));
}
.list{
  margin: 14px 0 18px;
  padding-left: 18px;
  color: rgba(233,238,249,.82);
  line-height:1.7;
}
.priceCard .btn{width:100%}

.whyGrid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.whyItem{
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.section--cta{
  padding: 86px 0;
  background: radial-gradient(900px 520px at 50% 30%, rgba(255,213,106,.10), transparent 65%);
  border-top:1px solid rgba(255,255,255,.06);
}
.ctaBox{
  padding: 26px;
  border-radius: 26px;
  border: 1px solid rgba(255,213,106,.22);
  background: linear-gradient(180deg, rgba(255,213,106,.10), rgba(7,8,11,.55));
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}
.ctaBox__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 18px;
}
.contactInfo{
  margin-top:16px;
  color: rgba(233,238,249,.80);
  font-weight:600;
  line-height:1.8;
}

.footer{
  padding: 26px 0;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(7,8,11,.65);
  position: relative;
}
.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,213,106,.16),
    rgba(247,185,11,.20),
    rgba(255,213,106,.16),
    transparent
  );
  pointer-events:none;
  opacity:0;
  transform: translateX(0);
}
.footer.is-glowing::before{
  animation: footerGlow 6s ease-in-out forwards;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer__brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer__logo{
  width:40px; height:40px;
  border-radius: 14px;
  border:1px solid rgba(255,213,106,.18);
  padding:8px;
  background: rgba(255,255,255,.02);
}
.footer__name{font-weight:800}
.footer__tag{color:var(--muted); font-size:.92rem}
.footer__links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color: rgba(233,238,249,.82);
  font-weight:700;
}
.footer__links a:hover{color:var(--text)}
.footer__note{
  color: rgba(233,238,249,.65);
  font-weight:600;
}

@keyframes headerGlow{
  0%{ transform: translateX(0); opacity:0; }
  15%{ opacity:1; }
  50%{ transform: translateX(220%); opacity:1; }
  85%{ opacity:0; }
  100%{ transform: translateX(220%); opacity:0; }
}

@keyframes footerGlow{
  0%{ transform: translateX(0); opacity:0; }
  15%{ opacity:1; }
  50%{ transform: translateX(220%); opacity:1; }
  85%{ opacity:0; }
  100%{ transform: translateX(220%); opacity:0; }
}