* {
  box-sizing: border-box;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}


body {
  margin: 0;
}


.container {

  min-height: 100vh;
  width: 100%;

  display: flex;
  flex-direction: column;

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

  padding: 80px 20px;

  background:
    radial-gradient(
      circle at top,
      #243447,
      #080b10
    );

  color: white;

}



/* 顶部品牌 */

.header {

  text-align: center;

  max-width: 1100px;

}



.header h3 {

  color: #4db8ff;

  font-size: 28px;

  letter-spacing: 5px;

  font-weight: 700;

  margin-bottom: 30px;

}



.header h1 {

  font-size: 56px;

  line-height: 1.2;

  font-weight: 700;

  margin: 0;

}



.header > p {

  margin-top: 30px;

  font-size: 22px;

  line-height: 1.7;

  color: #c7d1db;

}



/* 三个技术模块 */

.options {

  display: flex;

  gap: 25px;

  margin-top: 60px;

  flex-wrap: wrap;

  justify-content: center;

}



.card {

  width: 300px;

  min-height: 180px;

  padding: 30px;

  border-radius: 16px;


  background:

  rgba(255,255,255,0.08);


  border:

  1px solid rgba(255,255,255,0.15);


  backdrop-filter: blur(10px);


  transition: 0.3s;

}



.card:hover {

  transform: translateY(-8px);

  background:

  rgba(255,255,255,0.15);

}



.card h2 {

  font-size: 22px;

  margin-bottom: 15px;

  color: white;

}



.card p {

  color:#cbd5df;

  line-height:1.6;

}



/* 按钮 */

.learn-more button {


  margin-top:70px;


  width:200px;

  height:55px;


  border-radius:30px;


  border:none;


  background:

  linear-gradient(
    90deg,
    #2196f3,
    #00c6ff
  );


  color:white;


  font-size:18px;


  font-weight:600;


  cursor:pointer;


  transition:0.3s;

}



.learn-more button:hover {

  transform:scale(1.05);

}



/* 底部 */

.logo {

  margin-top:70px;

  color:#8995a3;

  font-size:14px;

}



/* 手机适配 */


@media(max-width:768px){


.header h1{

font-size:36px;

}


.header > p{

font-size:18px;

}


.options{

flex-direction:column;

align-items:center;

}


.card{

width:90%;

}


}