/* Reset & Base Styles */
@font-face {
  font-family: "Pretendard";
  src: url("./font/Pretendard-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./font/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./font/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./font/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
} 

@font-face {
  font-family: "Pretendard";
  src: url("./font/Pretendard-Bold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
} 





* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul li,
ol li {
  list-style: none;
}

body {
  font-family:"Pretendard", "Noto Sans KR", "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
}

.container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 14px 0;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: bold;
  color: #5b4fff;
      display: flex;
    align-items: center;
}

.logo img{
  vertical-align: middle;
    width: 132px;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 120px;
  width: 90%;
}

.nav a {
  text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 18px;
    transition: color 0.3s;
}

.nav a:hover {
  color: #2159E2;
  font-weight: 700;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}


/* Hero Section */
.hero {
  padding: 180px 0 120px;
  background: linear-gradient(180deg, #E8F6FF 0%, #EDE5FD 45%, #ffffff 100%);
}

.call-hero{
  padding: 180px 0 120px;
  background: linear-gradient(180deg, #E8F6FF 20%, #E5FDF6 45%, #ffffff 100%);
}

.mid-hero{
  padding: 180px 0 120px;
  background: linear-gradient(180deg, #F8F8FF 20%, #D4DAFF 45%, #ffffff 100%);
}

.hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-direction: column;
}

.hero-content {
  flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-title {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #000000;
}


.hero .hero-point{
    color:#d703e7 ;
}


.call-hero .hero-point{
    color:#014ee3 ;
}

.mid-hero .hero-point{
    color:#5c34f8 ;
}



.highlight {
  background: linear-gradient(90deg, #ff00ff, #00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.call-hero .highlight {
 background: linear-gradient(90deg, #0046E0, #09A1FF);  
 -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; 
}


.mid-hero .highlight {
 background: linear-gradient(90deg, #9837FF, #172BFF);  
 -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; 
}


.hero-subtitle {
  font-size: 24px;
    color: #191919;
    margin-bottom: 70px;
    line-height: 1.4;
    font-weight: 500;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

.btn {
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: #2159E2;
  color: white;
  width: 150px;
  border: 2px solid #2159E2;
}

.btn-primary:hover {
  background: #444444;
  border: 2px solid #444444;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(95, 95, 95, 0.3);
}
.btn-primary a{
  color: #fff;
  text-decoration: none;
}

.btn-secondary a {
  text-decoration: none;
  color: #2159e2;
}

.btn-secondary a:hover{
  color: #fff;
}



.btn-secondary {
  background: white;
  color: #2159E2;
  border: 2px solid #2159E2;
  width: 150px;
}

.btn-secondary:hover {
  background: #444444;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(95, 95, 95, 0.3);
  border: 2px solid #444444;
  color: #fff;
}

.hero .container{
   padding: 0 60px;
}

.hero-image {
  flex: 1;
  position: relative;
  min-height: 500px;
}

.hero-image .dashboard-mockup .mockup-screen img:nth-child(2){
  width: 20%;
}

.dashboard-mockup {
  position: relative;
  width: 100%;
  height: 100%;
}

.dashboard-mockup .mockup-screen.mockup-mobile {
  width: 20%;
}

.mockup-phone {
  position: absolute;
  bottom: 0;
  left: -40px;
  width: 180px;
  height: 360px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.hero-image .dashboard-mockup .mockup-screen img{
  width: 100%;
}

.mockup-icon {
  position: absolute;
  top: -120px;
  right: 90px;
  width: 100px;
  height:100px;
 /*background: #5b4fff;
  border-radius: 40%;
  box-shadow: 0 10px 30px rgba(91, 79, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center; */
}


.mockup-icon-yellow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  /* height: 80px;
  background: #FDC700;
  border-radius: 40%;
  box-shadow: 0 10px 30px rgba(91, 79, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center; */
}


.mockup-icon-tap {
  position: absolute;
  top: 40%;
  right: -90px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgb(91 79 255 / 25%);
  border: 3px solid #b86ef9;
  padding: 10px 20px;
  display: flex;
    flex-direction: row;
  align-items: center;
        width: 260px;
  text-align: center;
}

.mockup-icon-tap .icon-tab{
  margin-right: 16px;
  display: flex;
  align-items: center;
  }

.mockup-icon-tap div {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-align: left;
}

.mockup-mobile{
  position: absolute;
    bottom: -30px;
    left: -50px;
}

/* 메인말풍선 흔들리는 애니메이션*/

@keyframes shake-once {
  0%   { transform: translateX(0); }
  1%   { transform: translateX(-4px) rotate(-1deg); }
  2%   { transform: translateX(4px) rotate(1deg); }
  3%   { transform: translateX(-4px) rotate(-1deg); }
  4%   { transform: translateX(4px) rotate(1deg); }
  5%   { transform: translateX(0) rotate(0); }

  /* 나머지 시간은 가만히 */
  100% { transform: translateX(0); }
}

.shake-minute {
  animation: shake-once 10s ease-in-out infinite;
}


/* 메인아이콘들 아래위 애니메이션*/

@keyframes float-y {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

.float {
  animation: float-y 4s ease-in-out infinite;
}

.float-delay {
  animation-delay: 1.5s; /* 서로 타이밍 어긋나게 */
}






/* Who Needs Section */
.who-needs {
  padding: 120px 0;
  background: linear-gradient(228deg, #5271C4 0%, #B19FFF 50%, #ECA1FE 100% 100%);
  color: white;
  text-align: center;
  
}

.who-needs.call-needs {
  padding: 120px 0;
  background: linear-gradient(228deg, #25D57D 0%, #7FC5FF 50%, #9D8CFF 100% 100%);
  color: white;
  text-align: center;
  
}

.who-needs.mid-needs {
  padding: 120px 0;
  background: linear-gradient(228deg, #6062FF 0%, #5993FF 50%, #AFF7FF 100% 100%);
  color: white;
  text-align: center;
  
}



.who-needs .section-subtitle{
  color: #fff;
}

.section-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
  margin-bottom: 30px;
}

.section-title.white {
  color: white;
}

.section-subtitle {
  font-size: 24px;
    margin-bottom: 60px;
    font-weight: 600;
    line-height: 1.4;
    color: #666666;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s;
  width: auto;
  height: 500px;
 
}


.card-bg1 {

  background: url("./img/picture_01.png") center / cover no-repeat;
  position: relative;

  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;

  transition: transform 0.3s ease;
  border-radius: 16px;
}

.card-bg2 {

  background: url("./img/picture_02.png") center / cover no-repeat;
  position: relative;

  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;

  transition: transform 0.3s ease;
  border-radius: 16px;
}


.card-bg3 {

  background: url("./img/picture_03.png") center / cover no-repeat;
  position: relative;

  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;

  transition: transform 0.3s ease;
  border-radius: 16px;
}


.card-bg4 {

  background: url("./img/picture_04.png") center / cover no-repeat;
  position: relative;

  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;

  transition: transform 0.3s ease;
  border-radius: 16px;
}

.call-needs .card-bg1 {
  background: url("./img/picture_2_01.png") center / cover no-repeat;
  position: relative;
}
.call-needs .card-bg2 {
  background: url("./img/picture_2_02.png") center / cover no-repeat;
  position: relative;
}
.call-needs .card-bg3 {
  background: url("./img/picture_2_03.png") center / cover no-repeat;
  position: relative;
}
.call-needs .card-bg4 {
  background: url("./img/picture_2_04.png") center / cover no-repeat;
  position: relative;
}


.mid-needs .card-bg1 {
  background: url("./img/picture_3_01.png") center / cover no-repeat;
  position: relative;
}
.mid-needs .card-bg2 {
  background: url("./img/picture_3_02.png") center / cover no-repeat;
  position: relative;
}
.mid-needs .card-bg3 {
  background: url("./img/picture_3_03.png") center / cover no-repeat;
  position: relative;
}
.mid-needs .card-bg4 {
  background: url("./img/picture_3_04.png") center / cover no-repeat;
  position: relative;
}






.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0); /* 기본 투명 */
  transition: background 0.3s ease;
  border-radius: 16px;
}

.card:hover {
  transform: translateY(-8px);
 
}

.card:hover::before {
  background: rgba(0, 0, 0, 0.4); /* ← 이 값으로 투명도 조절 */
  
}


.card-bg1 > * {
  position: relative;
  z-index: 1;
}


/* .card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.096);
} */

.card-image {
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  margin-bottom: 20px;
}

.card-text {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
}

/* Features Section */
.features {
  padding: 120px 0;
  text-align: center;
}

.feature-blocks {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 80px;
}


.feature-box{
  display: flex;
    flex-direction: row;
    width: 100%;
    gap: 40px;
}

.feature-block {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 80px 64px;
  border-radius: 24px;
  text-align: left;
}

.feature-block.gray {
  /*background: linear-gradient(135deg, #ffe5f0 0%, #ffd6e8 100%);*/
    background-color: #F4F4F4;
    background-image: url(./img/bg_pastel.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto;
    position: relative;
    height: 520px;
}

.mid-features .feature-block.gray {

   background-image: url(./img/bg_pastel2.png);
}

.feature-block.mint {
    position: relative;
    width: 50%;
    height: 950px;
      display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-right: 0px;
    gap: 90px;
  background: linear-gradient(299deg, #FDFFC9 0%, #6FF2C8 100%);
}

.feature-block.pink {
  position: relative;
  width: 50%;
  height: 950px;
      display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-right: 0px;
 background: linear-gradient(135deg, #FFB2FF 0%, #FAD0C4 100%);
}

.call-features .feature-block.pink {
  background: linear-gradient(135deg, #87EDFF 0%, #AAFEC0 100%);
}

.call-features .feature-block.mint {
  background: linear-gradient(135deg, #FFF4A4 0%, #FFC2C2 100%);
}


.mid-features .feature-block.pink {
  background: linear-gradient(135deg, #A7D4FF 0%, #F0C4FF 100%);
}

.mid-features .feature-block.mint {
  background: linear-gradient(135deg, #FFE74E 0%, #62FAFF 100%);
}




/* .feature-block.yellow {
   width: 50%;
  background: linear-gradient(135deg, #fff9d6 0%, #fff0a8 100%);
} */

.feature-content {
  flex: 1;
  position: relative;
}

.imti-left{
  position: absolute;
  top: 0px;
  right: -40px;
}

.imti-right{
  position: absolute;
  top: 230px;
  right: -80px;
}

.call-features .imti-right{
    position: absolute;
    top: 260px;
    right: 80px;
    z-index: 100;
}

.call-features .imti-left{
    position: absolute;
    top: 0px;
    right: 20px;
    z-index: 100;
}




.feature-content h3 {
  font-size: 42px;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 1.2;
    background: linear-gradient(90deg, #E437FF, #6700D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



.call-features .feature-content h3.subtitle-pink{
  background: linear-gradient(90deg, #004fff, #0deaff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.call-features .feature-content h3.subtitle-mint{
  background: linear-gradient(90deg, #e50606, #FF0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.mid-features .feature-content h3.subtitle-pink{
  background: linear-gradient(90deg, #0041c9, #00deff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mid-features .feature-content h3.subtitle-mint{
  background: linear-gradient(90deg, #008167, #2BA100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}




.mid-features .feature-content h3{
  background: linear-gradient(90deg, #0049EA, #00f3ffe3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.feature-content .subtitle-black{
  color: #d900df;
  color: #000000;
  -webkit-text-fill-color: initial;
}

.feature-content .subtitle-pink{
  color: #d900df;  
  -webkit-text-fill-color: initial;
}

.feature-content .subtitle-mint{
  color: #006c71;  
  -webkit-text-fill-color: initial;
}


.feature-content p {
  font-size: 18px;
  margin-bottom: 20px;
  color: #666;
}

.feature-list {
  list-style: none;
  padding: 0;
  width: 90%;
}

.mid-features .feature-list {
  list-style: none;
  padding: 0;
  width: 100%;
}

.feature-list li {
    font-size: 20px;
    line-height: 1.2;
    color: #333;
    margin-bottom: 8px;
    font-weight: 600;
    padding-left: 16px;
  text-indent: -10px;
}
.feature-list li::before{
  content: "•";
}

.call-features .feature-list :last-child{
  line-height: 1.4;
}

.feature-image {
  border-radius: 16px;
  position: absolute;
  bottom: -6px;
  right: 60px;
  display: flex;
  align-items: flex-end;
  gap: 40px;
  text-align: right;
}

.call-features .feature-image{
  bottom: auto;
}

  .call-features .feature-leftimage{
    position: relative;
  }

    .call-features .feature-leftimage .left-ic{
    position:absolute;
    top: 40px;
    left: 50px;
  }

    .call-features .feature-leftimage .right-ic{
    position:absolute;
    top: 40%;
    left: 80px;
  }

  .call-features .feature-leftimage .right-ic img{
    width: 100%;
  }

.call-features .feature-leftimage .right-ic ul{
  display: flex;
  width: 90%;
}

.call-features .feature-leftimage .right-ic ul li{
  text-align: center;
}


/* Video Section */
.video-section {
  padding: 120px 0;
  background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
  text-align: center;
}

.video-icon {
  width: 80px;
  height: 80px;
  background: #ff0000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  margin: 0 auto 40px;
}

.video-section{
    background: url("./img/bg_youtube.png") center / cover no-repeat;
  position: relative;
}

.video-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.call-video .video-cards{
  grid-template-columns: repeat(2, 1fr);
}

.video-card {
  /*background: #333;*/
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s;
}

.video-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  transition: 0.3s !important;
  background: #7e7e7e52;
}

.video-thumbnail {
  width: 100%;
  padding: 50px 30px 0px 30px;
  background: #17171763;;
}

.video-thumbnail .keyword{
    display: flex;
    color: #fff;
    height: 120px;
    position: relative;
   
}

.video-thumbnail .keyword p{
  background-color:#288B63;
   padding: 8px 20px;
    border-radius: 10px;
    border-radius: 10px;
    position: absolute;
}


.call-video .video-thumbnail .keyword p{
  background-color:#0079AD;
}

.mid-video .video-thumbnail .keyword p{
  background-color:#F04279;
}

.video-thumbnail .keyword p:first-child{
  top: 50px;
}

.video-thumbnail .keyword p:nth-child(2){
  left: 30%;
}

.video-thumbnail .keyword p:nth-child(3){
  right: 0px;
    top: 20px;
}


.call-video .video-cards{
justify-items: center;
}


.call-video .video-card{

}





.video-thumbnail.video-yellow .keyword p:first-child{
  top: 50px; left: 30px;
}

.video-thumbnail.video-yellow .keyword p:nth-child(2){
  left: 150px;
}

.video-thumbnail.video-yellow .keyword p:nth-child(3){
  right: 0px;
    top: 20px;
}


.mid-video .video-thumbnail.video-yellow .keyword p:nth-child(2){
  left: 90px;
}






.video-thumbnail.video-blue .keyword p:first-child{
  top: 50px; left: 30px;
}

.video-thumbnail.video-blue .keyword p:nth-child(2){
  left: 110px;
    top: -20px;
}

.video-thumbnail.video-blue .keyword p:nth-child(3){
  right: 0px;
    top: 20px;
}





.video-thumbnail.video-yellow .keyword p{
  background-color:#F36161;
   padding: 8px 20px;
    border-radius: 10px;
    border-radius: 10px;
    position: absolute;
}


.video-thumbnail.video-blue .keyword p{
  background-color:#2831c3;
   padding: 8px 20px;
    border-radius: 10px;
    border-radius: 10px;
    position: absolute;
}

.video-thumbnail.video-yellow .keyword p{
  background-color:#4756FF;
}




.video-images img{
  border-radius: 20px;
}

.video-info {
  padding: 30px 50px 50px;
  text-align: left;
  background: #17171763;
}

.video-tag {
  display: inline-block;
  padding: 6px 12px;
  background: #ff6b6b;
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.video-info h4 {
  color: white;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 500;
}

/* Cloud Section */
.cloud-section {
  padding: 120px 0;
  text-align: center;
  /* background: #f8f9ff; */
  background: linear-gradient(179deg, #f6f7ff 0%, #FFFFFF 100%);
}

.cloud-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 80px;
}

.cloud-card {
  background: white;
  padding: 48px 32px;
  border-radius: 16px;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
  transition: all 0.3s;
}

/* .cloud-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
} */

.cloud-icon {
  border-radius: 20px;
  margin: 0 auto 24px;
  height: 300px;
}


.call-cloud .cloud-blue{
  background: linear-gradient(179deg, #FEC3FC 0%, #FFFFFF 100%);
}

/* .cloud-icon.pink-icon {
 background: linear-gradient(135deg, #ffb8e6 0%, #ff88d4 100%);
}

.cloud-icon.blue-icon {
  background: linear-gradient(135deg, #88c4ff 0%, #5b9eff 100%);
}

.cloud-icon.purple-icon {
  background: linear-gradient(135deg, #b88eff 0%, #8b5eff 100%);
} */

.cloud-pink {
  background: linear-gradient(179deg, #FFDFDF 0%, #FFFFFF 100%);
}

.cloud-blue {
  background: linear-gradient(179deg, #B3C8F8 0%, #FFFFFF 100%);
}

.cloud-purple {
  background: linear-gradient(179deg, #E1DFFF 0%, #FFFFFF 100%);
}



.cloud-card h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
}

.cloud-card p {
  color: #666;
  font-size: 18px;
    line-height: 1.4;
    font-weight: inherit;
}

/* CTA Section */
.cta-section {
  padding: 100px 0;
  text-align: center;
  background: white;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

/* Partners Section */
.partners-section {
  padding: 80px 0;
  background: #f8f9fa;
}

/* .partners-grid .scroll {
  max-width: 1440px;
  height: 90px;
  display: flex;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  align-items: center;
  margin-top: 32px;
  overflow: hidden;
} */

.partners-grid .scroll {
  width: 100%;
  overflow: hidden;
  margin-top: 32px;
}

.scroll-track {
  display: flex;
  width: max-content;
  gap: 32px;
}

.partner-logo {
  min-width: 160px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}



@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}


.scroll-top .scroll-track {
  animation: scroll-right 30s linear infinite;
}

.scroll-mildle .scroll-track {
  animation: scroll-left 30s linear infinite;
}

.scroll-bottom .scroll-track {
  animation: scroll-right 35s linear infinite;
}





/* Footer */
.footer {
  background: #1a1a1a;
  color: #999;
  padding: 60px 0 40px;
}

.footer-top {
  border-bottom: 1px solid #333;
  padding-bottom: 24px;
  margin-bottom: 32px;
}

.footer-links {
  display: flex;
  gap: 32px;
}

.footer-links a {
  color: #999;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-links a:last-child{
  color: #73a2ff;
}

.footer-links a:hover {
  color: white;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-info p {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 4px;
}

.copyright {
  margin-top: 20px;
  color: #666;
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-direction: column;
}

.sns-box{
  display: flex;
  gap: 12px;
}

.social-icon {
  width: 40px;
  height: 40px;
  background: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all 0.3s;
}

.social-icon:hover {
  background: #5b4fff;
  transform: translateY(-2px);
}

/* Floating Button */
.floating-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 60px;
  height: 60px;
  background: #5b4fff;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(91, 79, 255, 0.4);
  transition: all 0.3s;
  z-index: 999;
  color: #fff;
    font-size: 14px;
}

.floating-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(91, 79, 255, 0.5);
}



/* 공통 기본 상태 */
.scroll-animate {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: transform, opacity;
}
/* 시간차 느리게*/
.scroll-animate-slow {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  will-change: transform, opacity;
}


/* 화면에 들어왔을 때 */
.scroll-animate.show {
  opacity: 1;
  transform: translate(0, 0);
}


.from-top {
  transform: translateY(-40px);
}

.from-bottom {
  transform: translateY(40px);
}

.from-left {
  transform: translateX(-40px);
}

.from-right {
  transform: translateX(40px);
}

.delay-0 { transition-delay: 0.8s; }
.delay-1 { transition-delay: 1s; }
.delay-2 { transition-delay: 1.2s; }
.delay-3 { transition-delay: 1.5s; }
.delay-4 { transition-delay: 1.8s; }
.delay-5 { transition-delay: 2s; }




/* Responsive Design */
@media (max-width: 1400px) {
  .container {
    padding: 0 60px;
  }

  .hero-title {
    font-size: 48px;
  }

  .section-title {
    font-size: 40px;
  }

 .feature-blocks .feature-block .feature-image div img{
  width: 80%;
}

.feature-block.mint, .feature-block.pink{
  height: auto;
}

.feature-list li{
  font-size: 18px;
}

.feature-content h3{
  font-size: 30px;
}

.feature-leftimage div img{
  width: 100%;
}

.feature-content .imti-left img{
  width: 8vw;
}

.feature-content .imti-right img{
  width: 10vw;
}



.imti-right{
  right: 0px;
}

.video-info h4{
  font-size: 17px;
}

.video-images img{
  width: 100%;
}

.video-thumbnail .keyword p,
.video-thumbnail.video-yellow .keyword p,
.video-thumbnail.video-blue .keyword p{
  padding: 6px 10px;
}

.mockup-icon-tap{
  right: -30px;
  width: 240px;
}

.card-text {
    font-size: 20px;
}


.call-features .feature-leftimage .left-ic.top{
    position: absolute;
    top: 30px;
    left: 50px;
}


.call-features .feature-leftimage .left-ic.bottom{
    position: absolute;
    top: 50px;
    left: 50px;
}


.call-features .feature-leftimage .left-ic img{
    width: 80%;
}


}






@media (max-width: 1024px) {
  .container {
    padding: 0 40px;
  }

  .hero .container {
    flex-direction: column;
    text-align: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .video-cards {
    grid-template-columns: repeat(1, 1fr);
    max-width: 500px;
    margin: 0 auto;
  }

  .cloud-features {
    grid-template-columns: repeat(1, 1fr);
    max-width: 500px;
    margin: 0 auto;
  }

  .feature-block {
    flex-direction: column;
  }

  .partners-grid {
    grid-template-columns: repeat(4, 1fr);
  }



  .scroll-animate.show .float img{
    width: 8vw;
  }

  .feature-block{
  padding: 60px 40px 30px;
}

.feature-image{
 position: relative;
 right: 0px;
 text-align: center;
 gap: 0px;
 bottom: -38px;
}


.feature-block.gray{
  height: auto;
  right: 0px;
  max-width: 500px;
        margin: 0 auto;
}



.feature-list li{
  font-size: 16px;
}

.feature-box{
  flex-direction: column;
      align-items: center;
}

.feature-block.mint, .feature-block.pink{
      width: 100%;
      max-width: 500px;
}

.mockup-icon-tap{
  width: 200px;
  padding: 10px;
}

.mockup-icon-tap div{
  font-size: 12px;
}

.card-text {
    font-size: 22px;
}

.call-video .video-cards{
  grid-template-columns: repeat(1, 1fr);
          max-width: 500px;
}

.imti-left{
  right: 0px;
}

}





@media (max-width: 768px) {
  .container {
    padding: 0 24px;
  }

  .nav {
    display: none;
  }

  .hero {
    padding: 140px 0 80px;
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .section-title {
    font-size: 32px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .video-cards {
    grid-template-columns: 1fr;
  }

  .cloud-features {
    grid-template-columns: 1fr;
  }

  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-content {
    flex-direction: column;
    gap: 32px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

     .mockup-icon{
    top: -100px;
    right: 0px;
  }

  .btn{
    padding: 10px;
    font-size: 14px;
  }

  .hero .container{
        gap: 30px;
  }

  .hero-subtitle{
    margin-bottom: 30px;
  }

  .scroll-animate.show .float img{
    width: 10vw
  }

  .mockup-mobile{
        bottom: -10px;
    left: -20px;
  }
  .feature-content h3{
    font-size: 28px;
  }

  .feature-list li{
        font-size: 16px;
        font-weight: 400;
  }
  .feature-box{
    flex-direction: column;
  }
  .feature-block.pink, .feature-block.mint{
        width: 100%;
  }


  .video-images img{
    width: 100%;
  }

  .mockup-icon-tap{
  width: 200px;
  padding: 4px;
}

 .hero-image{
    min-height: auto;
  }

  .cloud-card{
    padding: 48px 0px;
  }

    .mockup-icon-tap .icon-tab{
    display:none;
  }

    .mockup-icon-tap {
    width: 150px;
    padding: 6px;
    text-align: left;
    border-radius: 10px;
    border: 2px solid #b86ef9;
  }

    .section-subtitle{
    font-size: 20px;
  }

    /* 햄버거 버튼 보이기 */
  .menu-toggle {
    display: block;
  }

  /* 기존 nav 숨김 */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    display: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
     width: 100%;
    margin: 0 auto;
  }

  .nav a {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid #eee;
  }

  /* 메뉴 열렸을 때 */
  .nav.active {
    display: flex;
  }

  .nav a:hover{
        background-color: #dfe3ff8f;
  }

  .card{
    width: 400px;
  }

  .feature-content .imti-right img{
    width: 16vw;
  }
.feature-content .imti-left img{
  width: 12vw;
}



  
}



@media (max-width: 480px) {
  .hero-title {
    font-size: 28px;
  }

  .section-title {
    font-size: 24px;
  }

  .feature-content h3 {
    font-size: 24px;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }

     .mockup-icon{
    top: -60px;
    right: 0px;
  }

  .feature-list li{
    font-size: 12px;
    font-weight: 400;
  }

  .mockup-icon-tap div{
    font-size: 10px;
  }


  .imti-left{
        right: 20px;
  }

  .section-subtitle{
    font-size: 18px;
  }

  .sns-box img{
    width: 100%;
  }

  .sns-box{
    gap: 6px;
  }

      .mockup-icon-tap {
    width: 140px;
    padding: 6px;
    text-align: left;
    border-radius: 10px;
    border: 2px solid #b86ef9;
  }
 

}