@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800;900&family=Montserrat:wght@600;700;800;900&display=swap');

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Noto Sans KR',system-ui,-apple-system,sans-serif;
  background:#eef4fb;
  color:#061b43;
  word-break:keep-all;
}
.hero h1,
.why h2,
.form-section h2{
  font-family:'Noto Sans KR',sans-serif;
  font-weight:900;
  letter-spacing:-.075em;
}
.hero h1{
  font-size:70px;
  line-height:1.02;
  margin:0 0 20px;
}
.hero h1 span{color:#ffd826}

.seed,
.phone-screen strong,
.benefit b,
form button{
  font-family:'Montserrat','Noto Sans KR',sans-serif;
  font-weight:900;
  letter-spacing:-.04em;
}

.page{max-width:940px;margin:0 auto;background:#fff;box-shadow:0 10px 40px #061b4320;overflow:hidden}
.hero{min-height:640px;background:radial-gradient(circle at 75% 18%,#1363bd55,transparent 26%),linear-gradient(120deg,#071b39 0%,#08264d 55%,#071529 100%);color:#fff;display:grid;grid-template-columns:1.05fr .9fr;gap:22px;padding:36px 28px;position:relative}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061936dd,#06193655),repeating-linear-gradient(90deg,transparent 0 60px,#ffffff10 61px),repeating-linear-gradient(0deg,transparent 0 60px,#ffffff0a 61px);pointer-events:none}
.hero>*{position:relative}
.eyebrow{font-size:20px;margin:0 0 8px;font-weight:700}
.seed{display:inline-block;background:#fff;color:#061b43;border-radius:8px;padding:13px 22px;font-size:34px;margin-bottom:22px}
.seed:first-letter{color:#035bd8}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.features div{border-top:1px solid #ffffff55;padding-top:10px}
.features b{display:block;font-size:15px}
.features span{font-size:13px;color:#dce9ff}
.desc{font-size:17px;line-height:1.7}
.notice{background:#0a3975;border:1px solid #3985e9;border-radius:10px;padding:16px;line-height:1.55}
.notice b{color:#ffd826}
.phone-card{display:flex;align-items:center;justify-content:center}
.phone{width:260px;height:500px;border:10px solid #111823;border-radius:36px;background:#020817;box-shadow:0 25px 50px #0007;transform:rotate(4deg)}
.phone-top{width:100px;height:18px;border-radius:0 0 14px 14px;background:#111823;margin:0 auto}
.phone-screen{height:455px;margin:8px;border-radius:24px;background:linear-gradient(#071525,#0a1b2d);padding:34px 20px;text-align:center}
.phone-screen small{font-size:30px;font-weight:900}
.phone-screen p{margin:3px 0 34px;color:#9cb3d5}
.phone-screen em{display:block;color:#9dd9a4;font-style:normal}
.phone-screen strong{color:#4df46b;font-size:31px}
.phone svg{width:100%;height:120px;margin:25px 0}
.phone polyline{fill:none;stroke:#5cff69;stroke-width:6}
.phone button{border:0;border-radius:8px;background:#0d55bd;color:#fff;padding:13px 18px;font-weight:800}
.why,.form-section{padding:30px 28px;background:#fff}
.why h2,.form-section h2{text-align:center;font-size:32px;color:#07276b;margin:0 0 22px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards article{border:1px solid #d8e1ee;border-radius:12px;padding:14px;text-align:center;box-shadow:0 8px 18px #061b4312}
.chart{height:96px;border-radius:8px;background:linear-gradient(135deg,#071a34,#0d58af)}
.cards h3{font-size:17px;color:#063076;font-weight:900}
.cards p{font-size:14px;line-height:1.55}
.blue-band{margin:18px 28px;background:linear-gradient(135deg,#073276,#0763ce);color:#fff;border-radius:12px;padding:22px;text-align:center;box-shadow:0 12px 24px #06439e30}
.blue-band p{margin:0;font-size:18px}
.blue-band b{font-size:25px;color:#ffe036}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:10px 28px 28px}
.benefit{background:#fff;border:1px solid #d9e1ed;border-radius:12px;padding:16px;position:relative;box-shadow:0 8px 20px #061b4312}
.benefit span{display:inline-grid;place-items:center;width:34px;height:34px;background:#0752bc;color:#fff;border-radius:50%;font-weight:900}
.benefit h3{color:#073276;font-weight:900}
.benefit b{font-size:25px;color:#071b43}
.coupon{margin-top:14px;width:150px;height:70px;background:linear-gradient(#f8fbff,#e5edf8);border:1px solid #d6e0ed;border-radius:8px;display:grid;place-items:center;font-weight:900;color:#0a56bd}
.stock{width:190px}
.form-section{background:#f8fbff}
.form-section p{text-align:center;color:#52627b}
form{max-width:620px;margin:0 auto}
label{display:grid;grid-template-columns:145px 1fr;margin-bottom:12px;border:1px solid #cdd9ea;border-radius:12px;overflow:hidden;background:#fff}
label span{background:#eef4ff;color:#053078;font-weight:900;display:flex;align-items:center;justify-content:center}
input{border:0;padding:18px;font-size:16px;outline:none;font-family:'Noto Sans KR',sans-serif}
form button{
  position:relative;
  overflow:hidden;
  width:100%;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#073276 0%,#075ee8 100%);
  color:#fff;
  padding:22px 20px;
  font-size:24px;
  font-weight:900;
  box-shadow:0 16px 38px rgba(7,94,232,.34);
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}

form button:before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:90px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);
  animation:shine 2.2s infinite;
}

form button:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 48px rgba(7,94,232,.45);
}

@keyframes shine{
  0%{left:-120%}
  45%{left:140%}
  100%{left:140%}
}
footer{text-align:center;padding:18px;color:#63718a;font-size:13px}

@keyframes pulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.015)}}

@media(max-width:760px){
  .page{width:100%}
  .hero{grid-template-columns:1fr;padding:28px 18px}
  .hero h1{font-size:47px}
  .seed{font-size:25px}
  .cards,.benefits{grid-template-columns:1fr}
  .phone{width:220px;height:420px}
  .phone-screen{height:375px}
  .why,.form-section,.benefits{padding-left:18px;padding-right:18px}
  label{grid-template-columns:1fr}
  label span{justify-content:flex-start;padding:12px 16px}
  input{padding:16px}
  .blue-band{margin:18px}
}

.blue-band-custom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.band-img{
  flex:0 0 120px;
  display:flex;
  justify-content:center;
}

.band-img img{
  width:100%;
  max-width:120px;
  height:auto;
  display:block;
}

.band-text{
  flex:1;
  text-align:center;
}

.band-text p{
  margin:0 0 6px;
}

.band-text b{
  display:block;
  color:#fff;
  font-size:22px;
  line-height:1.35;
}

.band-text .yellow{
  color:#fcc717;
}

@media(max-width:760px){
  .blue-band-custom{
    flex-direction:column;
    gap:12px;
    padding:22px 16px;
  }

  .band-img{
    flex:none;
  }

  .band-img img{
    max-width:92px;
  }

  .band-text b{
    font-size:18px;
  }
}

.glow-banner{
    position:relative;
    overflow:hidden;

    margin:20px 28px;
    padding:28px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #062454 0%,
        #0a4aa5 50%,
        #062454 100%
    );

    box-shadow:
        0 10px 30px rgba(6,36,84,.25),
        inset 0 1px 0 rgba(255,255,255,.15);

    text-align:center;
}
.glow-banner .glow-text b{color:#ffc107}

.glow-text{
    position:relative;
    z-index:2;

    color:#fff;
    font-size:18px;

    letter-spacing:-0.04em;
}

/* 빛 지나가는 효과 */
.glow-banner::before{
    content:"";

    position:absolute;
    top:0;
    left:-200px;

    width:120px;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-25deg);

    animation:lightPass 3.5s infinite;
}

@keyframes lightPass{
    0%{
        left:-200px;
    }
    30%{
        left:120%;
    }
    100%{
        left:120%;
    }
}

@media(max-width:760px){

    .glow-banner{
        margin:18px;
        padding:22px 16px;
    }

    .glow-text{
        font-size:16px;
    }

}


@media(max-width:760px){


  .why h2,
  .form-section h2{
      font-size:24px;
      line-height:1.25;
      letter-spacing:-0.05em;
      margin-bottom:16px;
  }

  .phone-card{
    padding-bottom:20px;
  }

  .phone{
    width:205px;
    height:390px;
    border-width:8px;
    border-radius:32px;
    transform:rotate(3deg);
  }

  .phone-screen{
    height:345px;
    margin:7px;
    padding:28px 14px 18px;
    border-radius:22px;
  }

  .phone-screen small{
    font-size:24px;
  }

  .phone-screen p{
    font-size:14px;
    margin:4px 0 26px;
  }

  .phone-screen em{
    font-size:14px;
  }

  .phone-screen strong{
    font-size:25px;
    white-space:nowrap;
  }

  .phone svg{
    height:75px;
    margin:20px 0 18px;
  }

  .phone button{
    margin-top:4px;
    padding:11px 16px;
    font-size:13px;
    border-radius:8px;
  }
}


.tilt{
  display: inline-block;
  transform: rotate(7deg);
  margin-left: 4px;
}