:root{
  --usn-accent:#FFD100;
  --usn-bg:#000;
  --usn-t:rgba(255,255,255,.86);
  --usn-m:rgba(255,255,255,.62);
  --usn-line:rgba(255,255,255,.10);
  --usn-card:rgba(255,255,255,.02);
  --usn-shadow: 0 28px 90px rgba(0,0,0,.55);
  --usn-radius: 24px;
}

.ms-usn{ background: var(--usn-bg); }

/* shared heading */
.usn-head{ text-align:center; margin-bottom: 34px; }
.usn-head__title{
  margin:0;
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1.05;
  font-size: clamp(34px, 3.2vw, 54px);
  color:#fff;
}
.usn-head__title span{
  color: rgba(255,255,255,.32);
  -webkit-text-stroke: 1px rgba(255,255,255,.32);
}
.usn-head__underline{
  width:86px; height:2px;
  margin:14px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,209,0,.90), transparent);
  opacity:.95;
}
.usn-head__sub{
  margin:14px auto 0;
  max-width:86ch;
  color: var(--usn-m);
  font-size:14px;
  line-height:1.85;
}

/* buttons */
.usn-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, filter 180ms ease;
}
.usn-btn--solid{
  color:#111;
  background: var(--usn-accent);
  border: 1px solid rgba(255,209,0,.85);
  box-shadow: 0 12px 34px rgba(255,209,0,.10);
}
.usn-btn--solid:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.usn-btn--ghost{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
}
.usn-btn--ghost:hover{
  color: var(--usn-accent);
  border-color: rgba(255,209,0,.45);
  background: rgba(255,209,0,.06);
  transform: translateY(-1px);
}

/* pills */
.usn-pill{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* hero */
.usn-hero{
  position: relative;
  padding: 130px 0 90px;
  overflow:hidden;
}
.usn-hero__glow{
  position:absolute;
  inset:-240px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1100px 420px at 18% 20%, rgba(255, 209, 0, 0.18), transparent 65%),
    radial-gradient(900px 420px at 85% 30%, rgba(255, 255, 255, 0.08), transparent 65%),
    radial-gradient(1100px 520px at 50% 95%, rgba(255, 209, 0, 0.10), transparent 70%);
  filter: blur(26px);
  opacity:1;
}
.usn-hero__wrap{
  position:relative;
  z-index:1;
  width: min(1180px, 92vw);
  margin:0 auto;
  text-align:center;
}
.usn-hero__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.usn-hero__title{
  margin:18px 0 12px;
  color: var(--usn-accent);
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1.02;
  font-size: clamp(38px, 4vw, 66px);
}
.usn-hero__title span{
  color: rgba(255,255,255,.70);
  font-weight:800;
}
.usn-hero__lead{
  margin:0 auto;
  max-width:78ch;
  color: rgba(255,255,255,.72);
  font-size:14.5px;
  line-height:1.9;
}
.usn-hero__cta{
  margin-top:18px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.usn-hero__meta{
  margin-top:18px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

/* compare */
.usn-compare{
  position: relative;
  padding: 90px 0 90px;
}
.usn-compare__glow{
  position:absolute;
  inset:-260px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(900px 320px at 50% 10%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(900px 320px at 18% 40%, rgba(255,209,0,0.16), transparent 60%),
    radial-gradient(900px 320px at 85% 70%, rgba(255,209,0,0.08), transparent 60%);
  filter: blur(18px);
  opacity:1;
}
.usn-compare__wrap{
  position:relative;
  z-index:1;
  width: min(1180px, 92vw);
  margin:0 auto;
}

.usn-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
}

.usn-card{
  border-radius: var(--usn-radius);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--usn-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding:22px;
  position:relative;
  overflow:hidden;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.usn-card::before{
  content:"";
  position:absolute;
  left:-30%;
  top:-50%;
  width:70%;
  height:200%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,209,0,.14), transparent);
  opacity:0;
  transition: opacity 200ms ease;
  pointer-events:none;
}
.usn-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,209,0,.32);
  background: rgba(255,209,0,.03);
}
.usn-card:hover::before{ opacity:1; }
.usn-card--featured{ border-color: rgba(255,209,0,.35); }

.usn-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.usn-card__title{
  margin:0;
  color: var(--usn-accent);
  font-weight:900;
  font-size:16px;
  letter-spacing:-0.01em;
}
.usn-chip{
  height:28px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:900;
  color: rgba(0,0,0,.85);
  background: rgba(255,209,0,.95);
  border: 1px solid rgba(255,209,0,.75);
}
.usn-chip--muted{
  color: rgba(255,255,255,.80);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.usn-card__desc{
  margin:0 0 14px;
  color: rgba(255,255,255,.72);
  font-size:13.5px;
  line-height:1.8;
}

.usn-list{
  list-style:none;
  padding:0;
  margin:0 0 16px;
}
.usn-list li{
  position:relative;
  padding-left:16px;
  margin:10px 0;
  color: rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.7;
}
.usn-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(255,209,0,.85);
}

.usn-card__foot{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* note */
.usn-note{
  margin-top:18px;
  padding:14px 16px;
  border-radius:18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.68);
  font-size:13px;
  line-height:1.7;
}
.usn-note strong{ color: rgba(255,255,255,.92); }
.usn-note--tight{
  width: min(900px, 92vw);
  margin-left:auto;
  margin-right:auto;
}

/* how */
.usn-how{
  position: relative;
  padding: 90px 0 90px;
  overflow:hidden;
}
.usn-how__glow{
  position:absolute;
  inset:-260px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1000px 360px at 20% 20%, rgba(255,209,0,0.16), transparent 60%),
    radial-gradient(900px 360px at 85% 40%, rgba(255,255,255,0.08), transparent 62%);
  filter: blur(22px);
  opacity:1;
}
.usn-how__wrap{
  position:relative;
  z-index:1;
  width: min(1180px, 92vw);
  margin:0 auto;
}
.usn-steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.usn-step{
  border-radius:22px;
  padding:18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.usn-step__n{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  color: rgba(0,0,0,.85);
  background: rgba(255,209,0,.95);
  border: 1px solid rgba(255,209,0,.75);
  margin-bottom:10px;
}
.usn-step h3{
  margin:0 0 8px;
  color: rgba(255,255,255,.92);
  font-weight:900;
  font-size:14px;
}
.usn-step p{
  margin:0;
  color: rgba(255,255,255,.68);
  font-size:13px;
  line-height:1.75;
}

/* pricing */
.usn-price{
  padding: 90px 0 120px;
}
.usn-price__wrap{
  width: min(1180px, 92vw);
  margin:0 auto;
}
.usn-price__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.usn-plan{
  border-radius:24px;
  padding:22px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--usn-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.usn-plan:hover{
  transform: translateY(-6px);
  border-color: rgba(255,209,0,.30);
  background: rgba(255,209,0,.03);
}
.usn-plan--featured{
  border-color: rgba(255,209,0,.35);
}
.usn-plan h3{
  margin:0 0 6px;
  color: var(--usn-accent);
  font-weight:900;
  font-size:16px;
}
.usn-plan__hint{
  margin:0 0 14px;
  color: rgba(255,255,255,.62);
  font-size:13px;
}
.usn-plan ul{
  list-style:none;
  padding:0;
  margin:0 0 16px;
}
.usn-plan li{
  margin:10px 0;
  color: rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.7;
  position:relative;
  padding-left:16px;
}
.usn-plan li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(255,209,0,.85);
}

/* responsive */
@media (max-width: 991px){
  .usn-grid{ grid-template-columns: 1fr; }
  .usn-steps{ grid-template-columns: repeat(2, 1fr); }
  .usn-price__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .usn-steps{ grid-template-columns: 1fr; }
}