:root{
  --primary:#7B61FF; --primary-hover:#6A4FE6; --primary-weak:#F1ECFF;
  --coral:#FF6B81; --yellow:#FFC93C;
  --bg:#FFFFFF; --bg-soft:#FAF8FF;
  --text-strong:#1A1A2E; --text-body:#5A5A6E; --line:#ECECF3;
  --shadow:0 8px 24px rgba(26,26,46,.06); --shadow-lg:0 16px 40px rgba(26,26,46,.10);
  --radius:22px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text-strong);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
b{font-weight:700;}
.hl{color:var(--primary);}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:46px; padding:0 22px; border-radius:12px; font-weight:700; font-size:15px;
  border:1.5px solid transparent; cursor:pointer; transition:.16s; white-space:nowrap;
}
.btn-lg{height:54px; padding:0 28px; font-size:16px;}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-hover); transform:translateY(-2px); box-shadow:var(--shadow);}
.btn-ghost{background:#fff; border-color:var(--primary); color:var(--primary);}
.btn-ghost:hover{background:var(--primary-weak);}
.btn-white{background:#fff; color:var(--primary);}
.btn-white:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.btn.full{width:100%;}

/* GNB */
.gnb{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); transition:.2s;}
.gnb.scrolled{border-bottom:1px solid var(--line); box-shadow:0 4px 16px rgba(26,26,46,.05);}
.gnb-inner{max-width:1160px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:24px;}
.logo img{height:50px;}
.gnb-menu{display:flex; gap:28px; margin-left:8px; font-weight:600; color:var(--text-body); font-size:15px;}
.gnb-menu a:hover{color:var(--primary);}
.gnb-cta{margin-left:auto; display:flex; gap:10px;}
.gnb-cta .btn{border-radius:999px;}
.gnb-burger{display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; margin-left:auto;}
.gnb-burger span{width:24px; height:2px; background:var(--text-strong); border-radius:2px;}
.gnb-mobile{display:none; flex-direction:column; gap:4px; padding:8px 24px 20px;}
.gnb-mobile a{padding:12px 8px; font-weight:600; border-bottom:1px solid var(--line);}
.gnb-mobile.open{display:flex;}

/* Section base */
.section{max-width:1160px; margin:0 auto; padding:80px 24px;}
.section.soft{max-width:none; background:var(--bg-soft);}
.section.soft > *{max-width:1160px; margin-left:auto; margin-right:auto;}
.sec-title{font-size:36px; font-weight:800; text-align:center; margin:0 0 12px; line-height:1.3;}
.sec-title.left{text-align:left;}
.sec-sub{text-align:center; color:var(--text-body); margin:0 0 40px; font-size:17px;}

/* Hero */
.hero{max-width:1160px; margin:0 auto; padding:72px 24px 40px; text-align:center;}
.hero-tag{display:inline-block; background:var(--primary-weak); color:var(--primary); font-weight:700;
  padding:7px 16px; border-radius:999px; font-size:14px; margin:0 0 22px;}
.hero-title{font-size:52px; font-weight:800; line-height:1.22; margin:0 0 20px; letter-spacing:-1px;}
.hero-sub{font-size:18px; color:var(--text-body); margin:0 0 32px;}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* Gallery band */
.gallery{margin-top:56px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.gallery-track{display:flex; gap:18px; width:max-content; animation:scroll 40s linear infinite;}
.gallery:hover .gallery-track{animation-play-state:paused;}
.gallery-card{width:300px; height:206px; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); flex:0 0 auto; background:#eee;}
.gallery-card img{width:100%; height:100%; object-fit:cover;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* Trust bar */
.trustbar{display:flex; justify-content:center; gap:36px; flex-wrap:wrap; padding:22px 24px;
  background:var(--primary); color:#fff; font-weight:600; font-size:15px;}
.trustbar .trust-item span{margin-right:4px;}

/* Grid 3 (solution) */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.sol-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); transition:.16s;}
.sol-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.sol-img{aspect-ratio:4/3; border-radius:14px; overflow:hidden; margin-bottom:18px; background:#f0f0f5;}
.sol-img img{width:100%; height:100%; object-fit:cover;}
.sol-card h3{margin:0 0 6px; font-size:21px;}
.sol-card p{margin:0; color:var(--text-body);}

/* Feature cards 2x3 */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.features{margin-top:48px;}
.feat-card{border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; gap:18px; transition:.16s; box-shadow:var(--shadow); overflow:hidden;}
.feat-card.purple{background:var(--primary-weak);}
.feat-card.gray{background:#F4F4F8;}
.feat-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.feat-card h3{margin:0 0 8px; font-size:22px;}
.feat-card p{margin:0; color:var(--text-body);}
.feat-img{border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:#fff;}
.feat-img img{width:100%; height:100%; object-fit:cover;}
.feat-img.top img{object-position:center top;}
.feat-img.contain{background:#fff; border:1px solid var(--line);}
.feat-img.contain img{object-fit:contain; padding:10px;}
.chip{display:inline-block; margin-top:12px; background:#fff; color:var(--primary); font-weight:700;
  padding:6px 14px; border-radius:999px; font-size:13px; border:1px solid var(--primary-weak);}

/* How */
.how-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.steps{list-style:none; padding:0; margin:28px 0 0; counter-reset:s;}
.steps li{display:flex; flex-direction:column; gap:2px; padding:16px 0; border-top:1px solid var(--line);}
.steps li b{font-size:17px;}
.steps li span{color:var(--text-body);}
.how-micro{margin-top:20px; color:var(--primary); font-weight:600;}
.how-right{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);}
.how-badge{position:absolute; right:18px; bottom:18px; background:var(--coral); color:#fff; font-weight:800;
  padding:10px 18px; border-radius:999px; box-shadow:var(--shadow);}

/* Usecases */
.usecases .uc-card{display:flex; gap:16px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow);}
.uc-card span{font-size:30px;}
.uc-card b{display:block; margin-bottom:4px;}
.uc-card p{margin:0; color:var(--text-body);}

/* Menu grid */
.menu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.menu-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); transition:.16s;}
.menu-card:hover{border-color:var(--primary); transform:translateY(-3px);}
.menu-card b{font-size:18px;}
.menu-card p{margin:8px 0 0; color:var(--text-body); font-size:15px;}

/* Reviews masonry */
.reviews{columns:4; column-gap:20px;}
.rv-card{break-inside:avoid; background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; margin-bottom:20px; box-shadow:var(--shadow);}
.rv-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.rv-head img{width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.08); background:#eee;}
.rv-head b{display:block;}
.rv-head small{color:var(--text-body);}
.rv-card p{margin:0; color:var(--text-body);}

/* Pricing */
.pricing{text-align:center; background:var(--primary-weak); border-radius:var(--radius); padding:56px 32px; max-width:720px; margin:0 auto;}
.pricing p{font-size:17px; color:var(--text-body); margin:14px 0 28px;}

/* FAQ */
.faq{max-width:760px; margin:0 auto;}
.faq details{background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; padding:0 22px; box-shadow:var(--shadow);}
.faq summary{list-style:none; cursor:pointer; font-weight:700; font-size:17px; padding:20px 0; display:flex; justify-content:space-between; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; color:var(--primary); font-size:24px; font-weight:400; transition:.2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0; padding:0 0 20px; color:var(--text-body);}

/* Final CTA */
.final-cta{text-align:center; color:#fff; padding:80px 24px;
  background:linear-gradient(135deg,#7B61FF,#9B7BFF);}
.final-cta h2{font-size:38px; font-weight:800; margin:0 0 14px; line-height:1.3;}
.final-cta h2 span{color:var(--yellow);}
.final-cta > p{font-size:17px; opacity:.92; margin:0 0 28px;}
.final-micro{font-size:14px; opacity:.85; margin-top:18px !important;}
.dev-login{display:flex; gap:8px; justify-content:center; margin-top:20px;}
.dev-login input{height:40px; padding:0 12px; border-radius:8px; border:0;}
.final-cta .dev-login .btn-ghost{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.5); color:#fff; height:40px;}

/* Footer */
.footer{background:#1A1A2E; color:#fff; padding:48px 24px 28px;}
.footer-inner{max-width:1160px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.footer-brand img{height:28px; margin-bottom:10px; filter:brightness(0) invert(1);}
.footer-brand p{margin:0; opacity:.7; font-size:14px;}
.footer-links{display:flex; gap:24px; flex-wrap:wrap; align-items:center; opacity:.85; font-size:14px;}
.footer-base{max-width:1160px; margin:28px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; opacity:.55; font-size:13px;}

/* Floating */
.float-btn{position:fixed; right:24px; width:52px; height:52px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:22px; font-weight:700; box-shadow:var(--shadow-lg);
  cursor:pointer; z-index:40; border:0;}
.float-help{bottom:24px; background:var(--primary); color:#fff;}
.float-top{bottom:88px; background:#fff; color:var(--primary); border:1px solid var(--line); opacity:0; pointer-events:none; transition:.2s;}
.float-top.show{opacity:1; pointer-events:auto;}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* Responsive */
@media (max-width:1023px){
  .reviews{columns:2;}
  .grid-3,.menu-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .gnb-menu,.gnb-cta{display:none;}
  .gnb-burger{display:flex;}
  .hero-title{font-size:34px;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
  .sec-title{font-size:27px;}
  .grid-3,.grid-2,.menu-grid,.how-wrap{grid-template-columns:1fr;}
  .reviews{columns:1;}
  .section{padding:56px 20px;}
  .footer-inner{flex-direction:column;}
}