:root{
    --blue-900:#111C4E;   /* 가장 진한 네이비 - 다크섹션 배경 */
    --blue-700:#1F2FA0;   /* 진한 블루 - 강조 텍스트/보더 */
    --blue-600:#3454F4;   /* 메인 브랜드 블루 - 버튼/포인트 */
    --blue-400:#7C93FF;   /* 밝은 블루 - 서브 포인트/그래프 */
    --blue-100:#EEF1FF;   /* 연한 블루 배경 */
    --blue-050:#F6F8FF;   /* 아주 연한 블루 배경 */
    --ink-900:#0E1229;    /* 본문 진한 텍스트 */
    --ink-600:#4B5170;    /* 서브 텍스트 */
    --ink-300:#A6ABC4;    /* 옅은 텍스트/보더 */
    --white:#FFFFFF;
    --green:#1FAE6B;      /* 긍정 지표 */
    --red:#E5484D;        /* 부정 지표(전환 불가) */
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:76px;}
  body{
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    color:var(--ink-900);
    background:var(--white);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    /* 한글은 단어 단위로만 끊는다 — 낱글자가 다음 줄로 떨어지는 것을 막는다 */
    word-break:keep-all;
    overflow-wrap:break-word;
  }
  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}



  /* ---------- NAV ---------- */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.9); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--blue-100);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
  }
  .logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:19px; color:var(--blue-900);}
  .logo-mark{
    width:26px; height:26px; border-radius:7px; background:var(--blue-600);
    display:flex; align-items:center; justify-content:center;
  }
    .logo-mark svg{width:15px; height:15px;}
  .logo-img{height:28px; display:block;}
  .nav-links{display:flex; gap:32px; font-size:15px; color:var(--ink-600); font-weight:500;}
  .nav-right{display:flex; align-items:center; gap:20px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:11px 22px; border-radius:10px; font-weight:700; font-size:15px;
    border:none; cursor:pointer; white-space:nowrap;
  }
  .btn-primary{background:var(--blue-600); color:var(--white);}
  .btn-primary:hover{background:var(--blue-700);}
  .btn-ghost{color:var(--ink-600); font-weight:600; font-size:15px;}
  .btn-outline{border:1.5px solid var(--blue-600); color:var(--blue-600); background:transparent;}
  .btn-lg{padding:15px 28px; font-size:16px;}

  /* ---------- HERO (Figma 1896:21612 — 화이트 2슬라이드) ---------- */
  .hero{
    --hero-ink:#37393D;
    --hero-blue:#2563EB;
    position:relative; overflow:hidden; text-align:center;
    padding:72px 0 84px; color:var(--hero-ink);
    background:var(--white);
  }
  /* 히어로만 본문보다 넓게 — 피그마 아트보드 비율을 유지한다 */
  .hero .wrap{max-width:1280px;}
  .hero-inner{display:block;}
  /* 모바일에서는 슬라이드 전체를 한 장의 이미지로 대체한다 */
  .hero-mo{display:none; width:100%; height:auto;}

  .hero-pill{
    display:inline-flex; align-items:center; gap:7px;
    padding:10px 22px; border-radius:999px;
    background:#F0F8FF; border:1.6px solid #A8C6E3;
    color:var(--hero-blue); font-size:17px; font-weight:600; letter-spacing:-0.02em;
  }
  .hero-pill .ico-chk{width:19px; height:19px; flex:none; display:block;}

  h1.headline{
    margin-top:22px;
    font-size:clamp(28px, 5.6vw, 82px); font-weight:900; line-height:1.24;
    letter-spacing:-0.035em; color:var(--hero-ink);
  }
  .headline .accent{
    color:var(--hero-blue);
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    animation:none;
  }

  /* --- 1번 슬라이드 : 연결 구조 일러스트 --- */
  .hero-visual{margin:26px auto 0; max-width:1120px;}
  .hero-visual img{width:100%; height:auto; display:block;}

  /* --- 2번 슬라이드 : 자사몰 구축 vs 셀즈업 연동 --- */
  .hero-lede{
    margin:clamp(14px,1.4vw,18px) auto 0; max-width:880px;
    font-size:15.5px; font-weight:600; line-height:1.58; color:#4F5258; letter-spacing:-0.02em;
  }
  .hero-compare{
    display:grid; grid-template-columns:repeat(2,1fr); gap:21px;
    margin-top:clamp(18px,1.72vw,22px); text-align:left;
  }
  .hc-card{
    display:flex; flex-direction:column; gap:clamp(16.5px,1.64vw,21px);
    padding:clamp(18px,1.72vw,22px); border-radius:16px;
  }
  .hc-card--off{background:#F7F8FB;}
  .hc-card--on{background:#F6F8FF;}
  .hc-tag{
    align-self:flex-start; padding:clamp(6px,0.63vw,8px) clamp(13px,1.25vw,16px); border-radius:999px;
    background:#E5E7EF; border:1.6px solid #E4E4E4; color:#676D79;
    font-size:clamp(13.5px,1.17vw,15px); font-weight:600; letter-spacing:-0.012em; white-space:nowrap;
  }
  .hc-tag--on{background:var(--blue-600); border-color:var(--blue-600); color:var(--white);}
  .hc-title{
    font-size:clamp(23px,2.11vw,27px); font-weight:700; line-height:1.28; letter-spacing:-0.028em; color:#4F5258;
  }
  .hc-card--on .hc-title{color:var(--hero-ink);}
  .hc-list{display:flex; flex-direction:column; gap:clamp(9.5px,0.94vw,12px); margin-top:-4px;}
  .hc-list li{
    display:flex; align-items:center; gap:8px;
    font-size:clamp(14px,1.25vw,16px); font-weight:500; line-height:1.36; color:#4F5258; letter-spacing:-0.019em;
  }
  .hc-list--minus li::before{content:"-"; color:#9AA0AC; flex:none;}
  .hc-list--check li{font-weight:600;}
  .hc-list--check .ico-chk{width:20px; height:20px; flex:none; display:block; color:var(--hero-blue);}

  .hero-band{
    margin:clamp(18px,1.72vw,22px) auto 0; display:inline-block;
    padding:clamp(11px,1.1vw,14px) clamp(24px,2.66vw,34px); border-radius:999px;
    background:var(--blue-600); color:var(--white);
    font-size:clamp(15.5px,1.33vw,17px); font-weight:700; letter-spacing:-0.022em;
    box-shadow:0 18px 40px -18px rgba(52,84,244,0.75);
  }

  .hero-cta{margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:14px;}
  .hero-cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
  .hero-cta small{color:#8A90A2; font-size:13.5px;}

  .dashboard-shell{
    margin-top:44px; border-radius:20px; border:1px solid var(--blue-100);
    box-shadow:0 24px 60px -24px rgba(31,47,160,0.28);
    overflow:hidden; background:var(--white);
  }
  .dashboard-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; border-bottom:1px solid var(--blue-100); background:var(--blue-050);
  }
  .dashboard-top .logo{font-size:15px;}
  .dash-tabs{display:flex; gap:6px; font-size:13px; color:var(--ink-600);}
  .dash-tabs span{padding:6px 10px; border-radius:8px;}
  .dash-tabs span.on{background:var(--blue-600); color:var(--white); font-weight:700;}
  .dashboard-body{padding:26px; text-align:left;}
  .kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
  .kpi{
    border:1px solid var(--blue-100); border-radius:14px; padding:16px;
  }
  .kpi .label{font-size:12px; color:var(--ink-600); margin-bottom:8px;}
  .kpi .value{font-size:20px; font-weight:800; color:var(--ink-900);}
  .kpi .delta{font-size:12px; font-weight:700; margin-top:6px;}
  .delta.up{color:var(--green);}
  .delta.down{color:var(--red);}
  .chart-row{display:grid; grid-template-columns:1.5fr 1fr; gap:14px;}
  .chart-card{border:1px solid var(--blue-100); border-radius:14px; padding:16px 18px;}
  .chart-card .label{font-size:12px; color:var(--ink-600); margin-bottom:10px;}
  .fake-line{height:110px; position:relative;}
  .fake-line svg{width:100%; height:100%;}
  .donut-wrap{display:flex; align-items:center; gap:16px;}
  .legend{font-size:12px; color:var(--ink-600); display:flex; flex-direction:column; gap:6px;}
  .legend .dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;}

  /* ---------- SECTION shared ---------- */
  section{padding:104px 0; scroll-margin-top:70px;}
  /* alternating section backgrounds (brand rhythm) */
  #flow, #how, #usecases, .final-section{background:var(--blue-050);}
  #solution, .why-section, #reviews, #faq{background:var(--white);}
  /* 히어로(화이트)와 첫 섹션을 가르는 옅은 하늘색 그라데이션 */
  #problems{background:linear-gradient(180deg, #E6F0FF 0%, #F3F8FF 30%, var(--white) 66%);}
  .sec-title{font-size:42px; line-height:1.35; font-weight:800; text-align:center; color:var(--ink-900); letter-spacing:-0.01em;}
  .sec-title .accent{color:var(--blue-600);}
  .sec-sub{text-align:center; color:var(--ink-600); font-size:18.5px; margin-top:14px; line-height:1.6;}

  /* ---------- PROBLEM CARDS ---------- */
  .problem-icon-img{width:42px; height:42px; display:block;}
  .problems{padding-top:76px;}
  .problems .sec-title{font-size:42px; line-height:1.35;}
  .problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px;}
  .problem-card{
    border:1px solid var(--blue-100); border-radius:18px; padding:32px 26px; background:var(--white);
    box-shadow:0 16px 40px -20px rgba(31,47,160,0.18);
  }
  .problem-head{display:flex; gap:16px; align-items:flex-start; margin-bottom:16px;}
  .problem-icon{
    width:72px; height:72px; border-radius:15px; background:var(--blue-050);
    border:1px solid var(--blue-100); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .problem-num{font-size:13px; font-weight:800; color:var(--blue-600); margin-bottom:4px;}
  .problem-card h3{font-size:19px; font-weight:800; line-height:1.4; letter-spacing:-0.01em;}
  .problem-card p{font-size:14px; color:var(--ink-600); line-height:1.65;}

  /* problem chat bubbles — tightly packed two columns */
  .prob-chat{max-width:680px; margin:70px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:0 32px; align-items:start;}
  .chat-col{display:flex; flex-direction:column; gap:52px;}
  .chat-col.right{padding-top:52px; align-items:flex-end;}
  .chat-item{max-width:300px;}
  .chat-emoji{font-size:26px; display:block; margin-bottom:8px; line-height:1;}
  .chat-col.right .chat-item{text-align:right;}
  .chat-bubble{
    position:relative; display:inline-block; border-radius:20px; padding:18px 24px;
    font-size:15.5px; font-weight:700; color:var(--ink-900); line-height:1.62; text-align:left;
    letter-spacing:-0.01em;
  }
  .chat-col.left .chat-bubble{
    background:#EAEFFF; border:1.5px solid #C9D5FF;
    border-bottom-left-radius:6px;
    box-shadow:0 14px 30px -12px rgba(52,84,244,0.28);
  }
  .chat-col.left .chat-bubble::after{
    content:''; position:absolute; left:-9px; bottom:12px; width:18px; height:18px;
    background:#EAEFFF; border-left:1.5px solid #C9D5FF; border-bottom:1.5px solid #C9D5FF;
    transform:rotate(45deg); border-bottom-left-radius:4px;
  }
  .chat-col.right .chat-bubble{
    background:#F1EAFC; border:1.5px solid #DDCCF6;
    border-bottom-right-radius:6px;
    box-shadow:0 14px 30px -12px rgba(124,80,220,0.26);
  }
  .chat-col.right .chat-bubble::after{
    content:''; position:absolute; right:-9px; bottom:12px; width:18px; height:18px;
    background:#F1EAFC; border-right:1.5px solid #DDCCF6; border-bottom:1.5px solid #DDCCF6;
    transform:rotate(-45deg); border-bottom-right-radius:4px;
  }

  /* ---------- DARK / COMPARISON SECTION (navy-blue) ---------- */
  .compare-section{background:var(--blue-900); color:var(--white);}
  .compare-section .sec-title{color:var(--white);}
  .compare-section .sec-title .accent{color:var(--blue-400);}
  .compare-section .sec-sub{color:#C4CBF5;}

  .ba-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:46px;}
  .ba-col{border-radius:18px; padding:30px 32px;}
  .ba-before{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);}
  .ba-after{background:var(--blue-600); border:1px solid var(--blue-600); box-shadow:0 24px 60px -26px rgba(52,84,244,0.5);}
  .ba-col h3{font-size:16px; font-weight:800; letter-spacing:0.5px; margin-bottom:20px;}
  .ba-before h3{color:#9AA3D4;}
  .ba-after h3{color:#fff;}
  .ba-col ul{display:flex; flex-direction:column; gap:14px;}
  .ba-col li{display:flex; gap:11px; align-items:flex-start; font-size:17px; line-height:1.6;}
  .ba-before li{color:#AEB6E8;}
  .ba-before li::before{content:'✕'; flex:none; color:#7179A8; font-weight:800;}
  .ba-after li{color:#fff; font-weight:600;}
  .ba-after li::before{content:'✓'; flex:none; color:#fff; font-weight:800;}

  /* ---------- COMPARE DETAIL (연동 전후 표) ---------- */
  #compare-detail{background:var(--white);}
  .cd-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch; margin-top:44px;}
  .cd-card{border:1px solid var(--blue-100); border-radius:18px; padding:26px 24px; background:var(--white); display:flex; flex-direction:column;}
  .cd-pill{display:inline-block; align-self:flex-start; width:fit-content; font-size:15px; font-weight:800; padding:6px 16px; border-radius:999px; margin-bottom:18px;}
  .cd-pill.before{background:var(--ink-300); color:#fff;}
  .cd-pill.after{background:var(--blue-600); color:#fff;}
  .cd-table{width:100%; border-collapse:collapse; font-size:14.5px;}
  .cd-table th{text-align:center; color:var(--ink-300); font-weight:600; padding:8px 6px; border-bottom:1px solid var(--blue-100);}
  .cd-table td{text-align:center; padding:11px 6px; border-bottom:1px solid var(--blue-100); color:var(--ink-900); font-weight:700;}
  .cd-table td:first-child{color:var(--ink-600); font-weight:600;}
  .cd-table tbody tr:last-child td{border-bottom:none;}
  .cd-table .cd-unknown{color:var(--ink-300); font-weight:600;}
  .cd-table tfoot td{padding-top:14px; border-top:1.5px dashed var(--blue-100); border-bottom:none; font-weight:800; color:var(--ink-900);}
  .cd-table tfoot td:first-child{color:var(--ink-600); font-weight:700;}
  .cd-note{margin-top:auto; padding-top:16px; border-radius:12px; padding:15px 16px; font-size:14.5px; line-height:1.6; text-align:center;}
  .cd-note.gray{background:#F1F3F9; color:var(--ink-600);}
  .cd-note.blue{background:var(--blue-050); color:var(--blue-700); font-weight:600; display:flex; gap:9px; align-items:center; justify-content:center; text-align:center;}
  .cd-check{flex:none; width:20px; height:20px; border-radius:50%; background:var(--blue-600); color:#fff; font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center;}
  .cd-arrow{color:var(--blue-400); font-size:27px; font-weight:800;}
  .cd-card-img{width:100%; display:block; border-radius:18px;}
.cd-arrow-img{width:24px; height:24px; align-self:center; justify-self:center;}

  /* ---------- FLOW ---------- */
  .flow-row{
    display:flex; align-items:flex-start; justify-content:center; gap:20px; margin-top:60px; flex-wrap:wrap;
  }
  .flow-node{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; max-width:186px;}
  .flow-icon{
    width:92px; height:92px; border-radius:50%; border:1px solid var(--blue-100);
    background:var(--white); display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 34px -16px rgba(31,47,160,0.2);
  }
  .flow-icon-slot{height:112px; display:flex; align-items:flex-end; justify-content:center;}
  .flow-icon-img{width:42px; height:42px; display:block;}
  .flow-node.core .flow-icon-img{width:60px; height:60px;}
  .flow-node b{font-size:17.5px; font-weight:800; color:var(--ink-900); margin-top:2px;}
  .flow-node span{font-size:13.5px; color:var(--ink-600); line-height:1.5; font-weight:500;}
  .flow-node.core .flow-icon{width:112px; height:112px; background:var(--blue-600); border-color:var(--blue-600);}
  .flow-node.core b{color:var(--blue-600); font-size:27px;}
  .flow-arrow{color:var(--blue-400); font-size:23px; font-weight:800; align-self:center; margin-top:26px;}

  /* ---------- SOLUTION (해결 방식 01~04) ---------- */
  .sec-kicker{font-size:15px; font-weight:800; letter-spacing:1px; color:var(--blue-600); text-align:center; margin-bottom:12px;}
  .sec-cta{display:flex; justify-content:center; margin-top:44px;}
  .sol-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px;}
  .sol-item{background:var(--white); border:1px solid var(--blue-100); border-radius:16px; padding:28px 30px; box-shadow:0 16px 40px -22px rgba(31,47,160,0.14);}
  .sol-item .n{font-size:15px; font-weight:800; color:var(--blue-600); margin-bottom:10px;}
  .sol-item h3{font-size:19.5px; font-weight:800; margin-bottom:8px; letter-spacing:-0.01em;}
  .sol-item p{font-size:16px; color:var(--ink-600); line-height:1.7;}

  /* ---------- WHY US (white / blue, matches brand) ---------- */
  .why-section{background:var(--white); color:var(--ink-900);}
  .why-badge{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:15px; font-weight:800; letter-spacing:1px; color:var(--blue-600); margin-bottom:16px;
  }
  .why-section .sec-title{color:var(--ink-900);}
  .why-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
    max-width:840px; margin:60px auto 0;
  }
  .why-card{
    min-height:300px; border-radius:16px; padding:32px 28px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
    text-align:center;
  }
  .why-card--blue{background:linear-gradient(180deg,#F6F8FF 0%,#E5EBFF 100%);}
  .why-card--green{background:linear-gradient(180deg,#F7FFF6 0%,#F1FFE5 100%);}
  .why-card--purple{background:linear-gradient(180deg,#FCF6FF 0%,#F1E5FF 100%);}
  .why-card--orange{background:linear-gradient(180deg,#FFFCF6 0%,#FFF1E5 100%);}
  .why-card h4{font-size:23px; font-weight:600; line-height:1.4; letter-spacing:-0.24px; color:#1F1F1F;}
  .why-icon{width:92px; height:92px; flex:none; display:block;}
  .why-icon svg{width:92px; height:92px; display:block;}
  .why-card p{font-size:16px; font-weight:500; line-height:1.571; letter-spacing:0.2px; color:#4E555E;}
  .why-close{max-width:760px; margin:28px auto 0; display:flex; flex-direction:column; align-items:center; gap:16px;}
  .why-close-title{font-size:23px; font-weight:600; line-height:1.4; letter-spacing:-0.24px; color:#1F1F1F; text-align:center;}
  .why-cta-row{display:flex; justify-content:center; gap:16px;}
  .why-btn{
    display:inline-flex; align-items:center; justify-content:center; text-align:center;
    width:200px; padding:12px; border-radius:8px; cursor:pointer; font-family:inherit;
    font-size:16px; font-weight:600; line-height:1.429; letter-spacing:0.2px;
  }
  .why-btn-ghost{background:var(--white); border:1px solid #ECEEF3; color:#245BD0;}
  .why-btn-ghost:hover{background:var(--blue-050);}
  .why-btn-primary{background:#245BD0; border:1px solid #245BD0; color:var(--white);}
  .why-btn-primary:hover{background:var(--blue-700); border-color:var(--blue-700);}

  /* ---------- USE CASES (2x2 = 4 cards) ---------- */
  .usecase-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px;}
  .usecase-card{
    border:1px solid var(--blue-100); border-radius:18px; overflow:hidden;
    background:var(--white); padding:28px; text-align:center;
  }
  .uc-chip{
    display:inline-block; font-size:12.5px; font-weight:800; padding:5px 11px;
    border-radius:8px; margin-bottom:16px; letter-spacing:0.3px;
  }
  .uc-chip.meta{color:var(--blue-600); background:var(--blue-050); border:1px solid var(--blue-100);}
  .uc-chip.capi{color:var(--white); background:var(--blue-600);}
  .usecase-visual{
    width:100%; height:144px; border-radius:14px; background:var(--blue-050); border:1px solid var(--blue-100);
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
    position:relative; overflow:hidden; gap:14px;
  }
  .usecase-card h4{font-size:18.5px; font-weight:800; margin-bottom:8px; line-height:1.45; letter-spacing:-0.01em;}
  .usecase-card p{font-size:15px; color:var(--ink-600); line-height:1.65;}

  /* usecase visual mockups */
  .uv-target{width:80px; height:80px; border-radius:18px; background:#fff; border:1px solid var(--blue-100); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -10px rgba(52,84,244,.35);}
  .uv-pills{display:flex; flex-direction:column; gap:8px;}
  .uv-pill{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:6px 12px; border-radius:20px; background:#fff; border:1px solid var(--blue-100); color:var(--ink-700);}
  .uv-pill.meta{color:#3454F4;}
  .uv-pill.naver{color:#16A34A;}

  .uv-cluster{position:relative; width:130px; height:130px;}
  .uv-orbit-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#3454F4; color:#fff; display:flex; align-items:center; justify-content:center; font-size:20.5px; box-shadow:0 10px 22px -8px rgba(52,84,244,.5);}
  .uv-orbit-ic{position:absolute; width:32px; height:32px; border-radius:50%; background:#fff; border:1px solid var(--blue-100); display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:0 6px 14px -6px rgba(31,47,160,.25);}
  .uv-orbit-ic.o1{left:6px; top:14px;}
  .uv-orbit-ic.o2{right:2px; top:6px;}
  .uv-orbit-ic.o3{left:2px; bottom:10px;}
  .uv-orbit-ic.o4{right:8px; bottom:6px;}

  .uv-naver{width:52px; height:52px; border-radius:12px; background:#16A34A; color:#fff; font-weight:800; font-size:25px; display:flex; align-items:center; justify-content:center; flex:none;}
  .uv-line{flex:1; background:#fff; border:1px solid var(--blue-100); border-radius:12px; padding:10px 12px;}
  .uv-line-rows{display:flex; flex-direction:column; gap:5px; margin-top:8px;}
  .uv-line-rows span{display:block; height:6px; border-radius:4px; background:var(--blue-050);}
  .uv-line-rows span:last-child{width:60%;}

  .uv-dash{width:100%; max-width:260px; background:#fff; border:1px solid var(--blue-100); border-radius:12px; padding:12px 14px;}
  .uv-dash-kpis{display:flex; justify-content:space-between; gap:6px; margin-bottom:10px;}
  .uv-dash-kpis div{display:flex; flex-direction:column; gap:2px;}
  .uv-dash-kpis .k{font-size:11px; color:var(--ink-300); font-weight:600;}
  .uv-dash-kpis b{font-size:12.5px; color:var(--ink-900); font-weight:800;}
  .uv-dash-bars{display:flex; flex-direction:column; gap:6px;}
  .bar{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-600);}
  .bar span{width:52px; flex:none;}
  .bar i{display:block; height:5px; border-radius:4px; background:#3454F4;}
  .uv-dash-badge{position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; background:#3454F4; color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800;}

  /* ---------- FINAL STATS ---------- */
  .final-section{background:var(--blue-050);}
  .final-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:40px; margin-top:44px; align-items:start;}
  .final-left h3{font-size:23px; font-weight:800; line-height:1.5; margin-bottom:20px;}
  .final-left h3 .accent{color:var(--blue-600);}
  .check-list li{
    display:flex; align-items:center; gap:10px; font-size:16px; color:var(--ink-600);
    padding:10px 0; border-bottom:1px solid var(--blue-100);
  }
  .check-mark{
    width:18px; height:18px; border-radius:5px; background:var(--blue-600); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .final-right{
    background:var(--white); border:1px solid var(--blue-100); border-radius:16px; padding:24px;
  }
  .stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px;}
  .stat-row .label{font-size:12.5px; color:var(--ink-600); margin-bottom:6px;}
  .stat-row .value{font-size:19.5px; font-weight:800;}
  .stat-row .delta{font-size:12.5px; color:var(--green); font-weight:700; margin-top:4px;}
  .split-tables{display:grid; grid-template-columns:1.3fr 1fr; gap:20px;}
  .split-tables.full{grid-template-columns:1fr;}
  .mini-table{width:100%; border-collapse:collapse; font-size:13.5px;}
  .split-tables.full .mini-table{font-size:15.5px;}
  .mini-table th{text-align:left; color:var(--ink-300); font-weight:600; padding:6px 4px; border-bottom:1px solid var(--blue-100);}
  .split-tables.full .mini-table th{padding:10px 6px;}
  .mini-table td{padding:8px 4px; border-bottom:1px solid var(--blue-100); color:var(--ink-900);}
  .split-tables.full .mini-table td{padding:13px 6px;}
  .bar-item{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-600); margin-bottom:10px;}
  .bar-track{flex:1; height:7px; background:var(--blue-100); border-radius:999px; overflow:hidden;}
  .bar-fill{height:100%; background:var(--blue-600); border-radius:999px;}

  /* ---------- FOOTER CTA ---------- */
  .footer-cta{padding:80px 0; text-align:center; background:var(--blue-900);}
  .footer-cta h2{color:var(--white); font-size:26px; font-weight:800; margin-bottom:12px;}
  .footer-cta p{color:#AEB6E8; font-size:17.5px; margin-bottom:26px;}

  /* ---------- HOW / STEPS ---------- */
  .step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px;}
  .step-card{border:1px solid var(--blue-100); border-radius:18px; padding:32px 26px; background:var(--white); box-shadow:0 16px 40px -22px rgba(31,47,160,0.16); display:flex; flex-direction:column;}
  .step-badge{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:800; color:var(--blue-600); background:var(--blue-050); border:1px solid var(--blue-100); padding:6px 13px; border-radius:999px; margin-bottom:18px;}
  .step-card h3{font-size:21.5px; font-weight:800; margin-bottom:10px; letter-spacing:-0.01em; line-height:1.4;}
  .step-card p{font-size:15.5px; color:var(--ink-600); line-height:1.65;}
  .step-ui{margin-top:auto; padding-top:18px;}
  .step-ui-box{border:1px solid var(--blue-100); border-radius:12px; background:var(--blue-050); padding:4px 14px; font-size:14.5px; color:var(--ink-600);}
  .step-ui .row{display:grid; grid-template-columns:88px 1fr; align-items:center; gap:8px; padding:9px 0;}
  .step-ui .row span:first-child{white-space:nowrap;}
  .step-ui .row span:last-child{justify-self:end;}
  .step-ui .row + .row{border-top:1px dashed var(--blue-100);}
  .step-ok{color:var(--green); font-weight:800; white-space:nowrap;}

  /* ---------- PRICING ---------- */
  .pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; align-items:stretch;}
  .price-card{border:1px solid var(--blue-100); border-radius:18px; padding:30px 28px; background:var(--white); display:flex; flex-direction:column;}
  .price-card.featured{border:1.5px solid var(--blue-600); box-shadow:0 24px 60px -24px rgba(52,84,244,0.4);}
  .price-tag{display:inline-block; font-size:12.5px; font-weight:800; color:var(--blue-600); background:var(--blue-050); border:1px solid var(--blue-100); padding:4px 10px; border-radius:8px; margin-bottom:14px; align-self:flex-start;}
  .price-card.featured .price-tag{background:var(--blue-600); color:#fff; border-color:var(--blue-600);}
  .price-name{font-size:22px; font-weight:800;}
  .price-amount{font-size:29px; font-weight:800; margin:10px 0 2px; letter-spacing:-0.02em;}
  .price-amount small{font-size:16px; font-weight:600; color:var(--ink-600);}
  .price-desc{font-size:14.5px; color:var(--ink-600); margin-bottom:20px; line-height:1.6;}
  .price-feat{display:flex; flex-direction:column; gap:11px; margin-bottom:24px; flex:1;}
  .price-feat li{display:flex; gap:9px; font-size:15px; color:var(--ink-900); line-height:1.5;}
  .price-feat li svg{flex-shrink:0; margin-top:3px;}
  .price-card .btn{width:100%;}
  .price-extra{margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .price-extra > div{border:1px solid var(--blue-100); border-radius:14px; padding:18px 20px; background:var(--white);}
  .price-extra h4{font-size:16px; font-weight:800; margin-bottom:6px;}
  .price-extra p{font-size:14.5px; color:var(--ink-600); line-height:1.6;}
  .price-note{text-align:center; font-size:13px; color:var(--ink-300); margin-top:18px;}

  /* ---------- FEATURES (image) ---------- */
  #features{background:var(--white);}

  /* ---------- COST COMPARE ---------- */
  .cost-section{background:var(--blue-900); color:var(--white);}
  .cost-section .sec-title{color:var(--white);}
  .cost-section .sec-title .accent{color:var(--blue-400);}
  .cost-section .sec-sub{color:#C4CBF5;}
  .cost-section{position:relative; overflow:hidden;}
  .cost-stage{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:44px; align-items:center;
    max-width:1000px; margin:52px auto 0;
  }

  /* --- 비율 막대: 광고비 100% vs 셀즈업 3% --- */
  .cost-bars{display:flex; flex-direction:column; gap:34px;}

  /* --- 한 바 안에서 비교: 바 위는 광고비, 바 아래는 셀즈업 --- */
  .cost-bar{position:relative;}
  .cb-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px;}
  /* 막대 전체가 '한 달 광고비'임을 알려주는 치수선 */
  .cb-span{
    display:block; height:10px; margin-bottom:10px;
    border-top:1px solid rgba(255,255,255,0.24);
    border-left:1px solid rgba(255,255,255,0.40);
    border-right:1px solid rgba(255,255,255,0.40);
    opacity:1; transition:opacity .5s ease .55s;
  }
  .js-reveal .cost-stage:not(.is-in) .cb-span{opacity:0;}
  .cb-name{font-size:15px; font-weight:700; color:#9AA3D4;}
  .cb-name em{font-style:normal; font-weight:600; color:#6F79AC;}
  .cb-val{font-size:23px; font-weight:800; letter-spacing:-0.02em; color:#E4E8FF;}

  .cb-track{
    position:relative; height:26px; border-radius:999px; overflow:hidden;
    background:rgba(255,255,255,0.075);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.11);
  }
  .cb-fill{
    position:absolute; left:0; top:0; bottom:0; width:3%; min-width:30px;
    border-radius:999px 4px 4px 999px;
    background:linear-gradient(135deg, #B9C6FF 0%, var(--blue-400) 40%, var(--blue-600) 100%);
    box-shadow:0 0 34px 6px rgba(124,147,255,0.6);
    transition:width 1.05s cubic-bezier(.22,.8,.2,1) .12s;
  }
  .js-reveal .cost-stage:not(.is-in) .cb-fill{width:0; min-width:0;}

  .cb-bottom{
    position:relative; display:flex; align-items:center; gap:18px;
    margin-top:22px; padding-left:8px;
  }
  /* 바의 3% 구간과 아래 라벨을 잇는 세로선 */
  .cb-bottom::before{
    content:""; position:absolute; left:15px; top:-21px; width:2px; height:18px;
    border-radius:2px;
    background:linear-gradient(180deg, var(--blue-400), rgba(124,147,255,0.15));
  }
  .cb-pct{
    display:flex; align-items:baseline; gap:5px; line-height:0.9;
    font-size:58px; font-weight:800; letter-spacing:-0.045em;
    background:linear-gradient(118deg, #C3CEFF 0%, var(--blue-400) 42%, var(--blue-600) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .cb-pct small{font-size:19px; font-weight:800; letter-spacing:-0.01em;}
  .cb-pct i{font-style:normal; font-size:30px;}
  .cb-us{display:flex; flex-direction:column; gap:3px; padding-left:15px; border-left:1px solid rgba(255,255,255,0.14);}
  .cb-us-name{font-size:14.5px; font-weight:700; color:#9AA3D4;}
  .cb-us-val{font-size:27px; font-weight:800; letter-spacing:-0.02em; color:var(--white);}

  .cost-punch{
    margin-top:2px; font-size:17.5px; font-weight:700; color:#C4CBF5; line-height:1.8; word-break:keep-all;
  }
  .cost-punch b{color:var(--white);}
  .cost-990{font-weight:800; color:var(--blue-400);}

  /* --- 가격 카드 --- */
  .cost-card{
    position:relative; text-align:center;
    padding:38px 30px 30px; border-radius:22px;
    background:linear-gradient(170deg, rgba(52,84,244,0.22) 0%, rgba(255,255,255,0.04) 60%);
    border:1px solid rgba(124,147,255,0.34);
    box-shadow:0 34px 80px -30px rgba(52,84,244,0.7);
  }
  .cc-ribbon{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    padding:6px 18px; border-radius:999px; background:var(--blue-600); color:var(--white);
    font-size:12.5px; font-weight:800; letter-spacing:1.2px; white-space:nowrap;
    box-shadow:0 10px 24px -8px rgba(52,84,244,0.9);
  }
  .cc-price{
    font-size:46px; font-weight:800; letter-spacing:-0.03em; color:var(--white); line-height:1.1;
  }
  .cc-cur{font-size:28px; font-weight:800; margin-right:2px;}
  .cc-per{font-size:18px; font-weight:700; color:#AEB6E8; margin-left:3px; letter-spacing:0;}
  .cc-day{margin-top:9px; font-size:14.5px; font-weight:600; color:#9AA3D4;}
  .cc-day b{color:var(--blue-400); font-weight:800;}
  .cc-list{
    display:flex; flex-direction:column; gap:11px; text-align:left;
    margin:24px 0 26px; padding:22px 0 0; border-top:1px solid rgba(255,255,255,0.12);
  }
  .cc-list li{
    position:relative; padding-left:27px;
    font-size:14.5px; font-weight:600; color:#DCE1FF; line-height:1.5;
  }
  .cc-list li::before{
    content:""; position:absolute; left:0; top:2px; width:17px; height:17px; border-radius:50%;
    background:rgba(124,147,255,0.18);
  }
  .cc-list li::after{
    content:""; position:absolute; left:5px; top:7px; width:6px; height:3px;
    border-left:2.2px solid var(--blue-400); border-bottom:2.2px solid var(--blue-400);
    transform:rotate(-45deg);
  }
  .cc-btn{
    display:block; padding:15px 20px; border-radius:12px;
    background:var(--blue-600); color:var(--white);
    font-size:16.5px; font-weight:800; letter-spacing:-0.01em; text-decoration:none;
    transition:transform .2s ease, background .2s ease;
  }
  .cc-btn:hover{background:var(--blue-700); transform:translateY(-2px);}
  .cc-foot{display:block; margin-top:13px; font-size:12.5px; font-weight:600; color:#7179A8;}

  /* ---------- REVIEWS ---------- */
  /* Infinite left-scrolling marquee. The track holds the cards twice, so when it
     has travelled exactly one set-width the loop restarts on an identical frame. */
  .review-marquee{
    position:relative; margin-top:56px; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .review-track{
    display:flex; gap:24px; width:max-content;
    animation:reviewScroll 64s linear infinite;
  }
  .review-marquee:hover .review-track,
  .review-marquee:focus-within .review-track{animation-play-state:paused;}
  @keyframes reviewScroll{
    from{transform:translateX(0);}
    to{transform:translateX(calc(-50% - 12px));}
  }
  .review-card{
    flex:0 0 360px; width:360px; display:flex; flex-direction:column; align-items:flex-start;
    border:1px solid var(--blue-100); border-radius:18px; padding:28px 26px; background:var(--white);
  }
  .review-stars{color:var(--blue-600); font-size:16px; letter-spacing:3px; margin-bottom:14px;}
  .review-card p{font-size:16px; color:var(--ink-900); line-height:1.7; margin-bottom:16px;}
  .review-who{font-size:14.5px; color:var(--ink-600); font-weight:700; margin-bottom:14px;}
  .review-metric{display:inline-block; margin-top:auto; font-size:13.5px; font-weight:800; color:var(--blue-600); background:var(--blue-050); border:1px solid var(--blue-100); padding:5px 11px; border-radius:8px;}
  .review-note{text-align:center; font-size:13px; color:var(--ink-300); margin-top:22px;}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:880px; margin:56px auto 0;}
  .faq-item{border-bottom:1px solid var(--blue-100);}
  .faq-item summary{list-style:none; cursor:pointer; padding:22px 4px; font-size:18px; font-weight:700; color:var(--ink-900); display:flex; justify-content:space-between; gap:16px;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+'; color:var(--blue-600); font-weight:400; font-size:25px; line-height:1; flex-shrink:0;}
  .faq-item[open] summary::after{content:'\2212';}
  .faq-item .faq-a{padding:0 4px 24px; font-size:16px; color:var(--ink-600); line-height:1.8;}


  /* ---------- SCROLL REVEAL ---------- */
  /* The hidden start state is scoped to .js-reveal, which reveal.js adds to
     <html>. No JS (or reduced-motion) means nothing is ever hidden. */
  .js-reveal [data-reveal]{
    opacity:0;
    transition:opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }
  .js-reveal [data-reveal="up"]{transform:translateY(18px);}
  .js-reveal [data-reveal="from-left"]{
    transform:translateX(-26px) translateY(10px) scale(.97);
    transition:opacity .34s ease-out, transform .34s cubic-bezier(.18,.89,.32,1.2);
  }
  .js-reveal [data-reveal="from-right"]{
    transform:translateX(26px) translateY(10px) scale(.97);
    transition:opacity .34s ease-out, transform .34s cubic-bezier(.18,.89,.32,1.2);
  }
  .js-reveal [data-reveal].is-in{opacity:1; transform:none;}

  /* Quiet hover lifts — the page feels alive without anything moving on its own */
  .problem-card, .sol-item, .why-card, .review-card, .hs-card{
    transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  }
  .sol-item:hover, .review-card:hover{transform:translateY(-4px); box-shadow:0 22px 46px -24px rgba(31,47,160,0.28);}
  .why-card:hover{transform:translateY(-4px);}
  .hs-card:hover{transform:translateY(-3px); box-shadow:0 18px 38px -22px rgba(31,47,160,0.22);}
  .flow-icon{transition:transform .35s cubic-bezier(.22,.61,.36,1);}
  .flow-node:hover .flow-icon{transform:translateY(-5px) scale(1.04);}
  .btn{transition:transform .2s ease, background .2s ease, box-shadow .2s ease;}
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0);}
  .why-btn, .hs-cta-btn{transition:transform .2s ease, background .2s ease;}
  .why-btn:hover, .hs-cta-btn:hover{transform:translateY(-2px);}
  .faq-item summary{transition:color .2s ease;}
  .faq-item summary:hover{color:var(--blue-600);}

  @media (prefers-reduced-motion: reduce){
    .js-reveal [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important;}
    .review-track{animation:none;}
    .review-marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
  }

  /* ---------- SITE FOOTER (company info) ---------- */
  .site-footer{background:var(--blue-900); color:#AEB6E8; padding:8px 0 48px; border-top:1px solid rgba(255,255,255,0.08);}
  .footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; padding-top:48px;}
  .footer-brand .logo{color:var(--white); font-size:18px; margin-bottom:22px;}
  .footer-logo{display:flex; align-items:center; gap:10px;}
  .fl-mark{
    width:46px; height:46px; border-radius:11px; background:#172E8C; flex:none;
    display:flex; align-items:center; justify-content:center;
  }
  .fl-mark svg{width:32px; height:36px; display:block;}
  .fl-word svg{height:23px; width:auto; display:block;}
  .footer-contact{display:flex; flex-direction:column; gap:13px; font-size:13.5px; color:#AEB6E8;}
  .footer-contact div{display:flex; align-items:center; gap:10px;}
  .footer-contact svg{flex-shrink:0; opacity:0.7;}
  .footer-col h5{font-size:12px; font-weight:800; letter-spacing:1.5px; color:var(--blue-400); margin-bottom:20px;}
  .footer-col ul{display:flex; flex-direction:column; gap:13px; font-size:13.5px;}
  .footer-col li{color:#AEB6E8;}
  .footer-col a:hover{color:var(--white);}
  .footer-corp p{font-size:13.5px; margin-bottom:13px; color:#AEB6E8;}
  .footer-bottom{
    margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.08);
    font-size:12px; color:#7179A8; line-height:1.7;
  }

    @media(max-width:860px){
    .nav-links{display:none;}
    .hero{padding:44px 0 56px;}
    .hero .wrap{max-width:none;}
    .hero-mo{display:block;}
    .hero-slide > :not(.hero-mo){display:none;}
    .hero{padding:0 0 44px;}
    .hero .wrap{padding:0;}
    .hero-dots{margin-top:22px;}
    .hero-cta{padding:0 16px;}
    .hero-pill{font-size:13px; padding:8px 15px; gap:6px;}
    .hero-pill .ico-chk{width:16px; height:16px;}
    h1.headline{margin-top:16px; line-height:1.28;}
    .hero-visual{margin:20px -16px 0; max-width:none; width:calc(100% + 32px);}
    .hero-lede{margin-top:16px; font-size:15px; line-height:1.62;}
    .hero-compare{grid-template-columns:1fr; gap:14px; margin-top:24px;}
    .hc-card{gap:20px; padding:22px 20px;}
    .hc-tag{font-size:13.5px; padding:7px 14px;}
    .hc-title{font-size:23px;}
    .hc-list{gap:13px;}
    .hc-list li{font-size:15px;}
    .hc-list--check .ico-chk{width:18px; height:18px;}
    .hero-band{margin-top:22px; padding:14px 22px; font-size:15px; line-height:1.5;}
    .hero-cta{margin-top:26px;}
    .hero-mark{width:290px; height:290px; right:-52px; bottom:-52px; opacity:.085;}
    .hero-glow{width:420px; height:280px;}
    h1.headline{font-size:29px;}
    .hero-q{font-size:15px;}
    .sec-title{font-size:30px;}
    .sec-sub{font-size:16px;}
    .problems .sec-title{font-size:28px;}
    section{padding:72px 0;}
    .bubble-row{flex-direction:column;}
    .bubble.right{margin-left:0;}
    .compare-table{display:block; overflow-x:auto; white-space:nowrap;}
    .problem-grid, .why-grid, .usecase-grid, .final-grid, .split-tables, .footer-grid{grid-template-columns:1fr;}
    .stat-row{grid-template-columns:repeat(3,1fr);}
    .hero-cta-row{width:100%;}
    .step-grid, .pricing-grid{grid-template-columns:1fr;}
    .review-card{flex:0 0 280px; width:280px; padding:24px 20px;}
    .review-track{gap:16px; animation-duration:46s;}
    @keyframes reviewScroll{from{transform:translateX(0);} to{transform:translateX(calc(-50% - 8px));}}
    .price-extra{grid-template-columns:1fr;}
    .cost-stage{grid-template-columns:1fr; gap:30px; margin-top:38px;}
    .cb-val{font-size:20px;}
    .cb-track{height:18px;}
    .cb-track{height:20px;}
    .cb-span{height:8px; margin-bottom:8px;}
    .cb-bottom{gap:14px; padding-left:6px; margin-top:20px;}
    .cb-bottom::before{left:12px; top:-19px; height:16px;}
    .cb-fill{min-width:24px;}
    .cb-pct{font-size:44px;}
    .cb-pct small{font-size:16px;}
    .cb-pct i{font-size:25px;}
    .cb-us-val{font-size:23px;}
    .cost-punch{font-size:15.5px; text-align:center;}
    .cost-card{padding:34px 20px 26px;}
    .cc-price{font-size:40px;}
    .only-pc{display:none;}
    .ba-grid{grid-template-columns:1fr;}
    .sol-grid{grid-template-columns:1fr;}
    .prob-chat{display:flex; flex-direction:column; gap:12px;}
    .chat-col{display:contents;}
    .chat-col.left .chat-item:nth-child(1){order:1;}
    .chat-col.right .chat-item:nth-child(1){order:2;}
    .chat-col.left .chat-item:nth-child(2){order:3;}
    .chat-col.right .chat-item:nth-child(2){order:4;}
    .chat-col.left .chat-item:nth-child(3){order:5;}
    .chat-col.right .chat-item:nth-child(3){order:6;}
    .step-grid{grid-template-columns:repeat(2,1fr);}
    .flow-row{flex-direction:column;}
    .flow-arrow{transform:rotate(90deg); margin-top:0;}
    .cd-grid{grid-template-columns:1fr;}
    .cd-arrow-img{transform:rotate(90deg); justify-self:center;}
  }

/* ---------- HOW / STEP FLOW ---------- */
.hs-flow{display:flex; flex-direction:column; gap:36px; margin-top:64px;}
  .hs-row{display:flex; align-items:stretch; justify-content:center; gap:8px;}
  .hs-card{
    flex:1 1 0; min-width:0; background:var(--white); border-radius:12px; padding:22px 18px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .hs-badge{
    width:100%; display:flex; align-items:center; justify-content:center;
    background:#F4F5F8; border:1px solid #E7E9EE; border-radius:16px; padding:4px 8px;
    font-size:12px; font-weight:500; line-height:1.334; letter-spacing:0.3px; color:#7889B3;
  }
  .hs-title{font-size:17px; font-weight:600; line-height:1.5; letter-spacing:0.09px; color:#1F1F1F; text-align:center;}
  .hs-desc{font-size:15px; font-weight:500; line-height:1.571; letter-spacing:0.2px; color:#4E555E; text-align:center;}
  .hs-desc strong{font-weight:600;}
  .hs-status{
    width:100%; margin-top:auto; background:var(--blue-050); border-radius:8px; padding:8px;
    display:flex; flex-direction:column; gap:4px;
  }
  .hs-status li{display:flex; align-items:center; gap:4px;}
  .hs-ico{
    width:24px; height:24px; flex:none; border-radius:4.267px; background:#E0E8F9;
    display:flex; align-items:center; justify-content:center;
  }
  .hs-ico img{width:16px; height:16px;}
  .hs-label{flex:1; min-width:0; font-size:15px; font-weight:600; line-height:1.429; letter-spacing:0.2px; color:#4E555E;}
  .hs-value{font-size:15px; font-weight:600; line-height:1.429; letter-spacing:0.2px; color:#245BD0; white-space:nowrap;}
  .hs-sep{flex:none; align-self:center; width:24px; height:24px; color:#C3CBDD;}
  .hs-sep svg{display:block; width:24px; height:24px;}

  .hs-cta{
    position:relative; overflow:hidden; border-radius:16px; min-height:189px; padding:28px 24px;
    background:linear-gradient(to top, var(--blue-900) 53.175%, #2741B4 160.05%);
    display:flex; align-items:center; justify-content:center;
  }
  .hs-cta::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:url('data:image/jpeg;base64,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') center/cover no-repeat;
    mix-blend-mode:luminosity; opacity:0.58;
  }
  .hs-cta-inner{position:relative; z-index:1; width:100%; max-width:520px; display:flex; flex-direction:column; align-items:center; gap:16px;}
  .hs-cta-head{display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;}
  .hs-cta-eyebrow{font-size:16px; font-weight:600; line-height:1.429; letter-spacing:0.2px; color:#91B1EB;}
  .hs-cta-title{font-size:23px; font-weight:800; line-height:1.4; letter-spacing:-0.24px; color:var(--white);}
  .hs-cta-desc{font-size:15px; font-weight:600; line-height:1.385; letter-spacing:0.25px; color:var(--white); text-align:center;}
  .hs-cta-btn{
    display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
    width:230px; max-width:100%; padding:12px; border:none; border-radius:8px; background:#245BD0; color:var(--white);
    font-family:inherit; font-size:16px; font-weight:600; line-height:1.429; letter-spacing:0.2px;
    text-decoration:none; cursor:pointer;
  }
  .hs-cta-btn:hover{background:var(--blue-700);}

  @media(max-width:860px){
    .hs-row{flex-wrap:wrap;}
    .hs-card{flex:1 1 240px;}
    .hs-sep{display:none;}
    .hs-cta{min-height:0; padding:32px 20px;}
  }


  /* ---------- TECH / CUSTOMER STORIES / TRUST (v2에서 추가된 섹션) ---------- */
  .tech-section, .success-section, .trust-section{background:var(--blue-900); color:var(--white);}
  .dark-kicker{text-align:center; font-size:11px; font-weight:800; letter-spacing:3px; color:var(--blue-400); margin-bottom:14px;}
  .tech-section .sec-title, .success-section .sec-title, .trust-section .sec-title{color:var(--white);}
  .tech-section .sec-title .accent, .success-section .sec-title .accent, .trust-section .sec-title .accent{color:var(--blue-400);}
  .tech-section .sec-sub, .success-section .sec-sub, .trust-section .sec-sub{color:#C4CBF5;}
  .dark-note{text-align:center; font-size:11.5px; color:#9098C8; margin-top:22px;}

  .pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px;}
  .pillar-card{background:#1E2C63; border:1px solid rgba(255,255,255,0.16); border-radius:18px; padding:26px 24px;}
  .pillar-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:8px;}
  .pillar-no{font-size:10px; font-weight:800; letter-spacing:1.5px; color:#B9C3FF; background:rgba(124,147,255,0.24); padding:3px 8px; border-radius:6px;}
  .pillar-badge{font-size:10.5px; font-weight:800; color:#B9C3FF; white-space:nowrap;}
  .pillar-card h3{font-size:16px; font-weight:800; color:var(--white); margin-bottom:8px; line-height:1.4;}
  .pillar-card p{font-size:13px; color:#C9D0F5; line-height:1.65;}

  .story-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px;}
  .story-card{background:#1E2C63; border:1px solid rgba(255,255,255,0.16); border-radius:20px; padding:28px 26px; display:flex; flex-direction:column;}
  .story-top{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .story-tag{font-size:11px; font-weight:800; color:#B9C3FF; background:rgba(124,147,255,0.24); padding:4px 10px; border-radius:8px;}
  .story-who{font-size:13px; font-weight:800; color:#fff;}
  .story-card h3{font-size:18px; font-weight:800; color:#fff; line-height:1.45; margin-bottom:10px; letter-spacing:-0.01em;}
  .story-card > p{font-size:14px; color:#AAB3DE; line-height:1.7; margin-bottom:22px; flex:1;}
  .story-cmp{
    margin-top:auto; display:flex; flex-direction:column; gap:14px;
    background:rgba(124,147,255,0.10); border:1px solid rgba(124,147,255,0.22);
    border-radius:16px; padding:20px 22px;
  }
  .sc-metric{font-size:13px; font-weight:800; letter-spacing:0.4px; color:#9DB0FF;}
  .sc-row{display:flex; align-items:flex-end; gap:18px;}
  .sc-col{display:flex; flex-direction:column; gap:6px;}
  .sc-lbl{font-size:12px; font-weight:800; letter-spacing:0.6px; color:#9098C8;}
  .sc-lbl.on{color:var(--blue-400);}
  .sc-val{font-weight:800; line-height:1;}
  .sc-val.dim{font-size:24px; color:#7B82AE; text-decoration:line-through; text-decoration-thickness:2px;}
  .sc-val.up{font-size:44px; color:#fff; letter-spacing:-0.03em;}
  .sc-arr{color:var(--blue-400); font-size:24px; font-weight:800; padding-bottom:4px;}

  .trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px;}
  .trust-card{background:#1E2C63; border:1px solid rgba(255,255,255,0.16); border-radius:16px; padding:24px 22px;}
  .trust-ic{width:40px; height:40px; border-radius:11px; background:rgba(124,147,255,0.14); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
  .trust-card h4{font-size:14.5px; font-weight:800; color:#fff; line-height:1.45; margin-bottom:6px;}
  .trust-card p{font-size:12.5px; color:#C9D0F5; line-height:1.6;}
  .trust-disc{max-width:820px; margin:28px auto 0; font-size:12.5px; color:#9098C8; line-height:1.7; border-top:1px solid rgba(255,255,255,0.1); padding-top:18px;}

  @media(max-width:860px){
    .pillar-grid{grid-template-columns:1fr;}
    .story-grid{grid-template-columns:1fr;}
    .trust-grid{grid-template-columns:1fr;}
  }

  /* ---------- USE CASES (Figma 1680:19539) ---------- */
  .uc-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:60px;}
  .uc-card{
    background:var(--white); border-radius:24px; padding:40px 36px; overflow:hidden;
    display:flex; flex-direction:column; gap:24px;
  }
  .uc-shot{
    width:100%; aspect-ratio:1124/764; border-radius:16px; overflow:hidden;
    background:var(--blue-100);
  }
  .uc-shot img{width:100%; height:100%; object-fit:cover; display:block;}
  .uc-txt{display:flex; flex-direction:column; gap:4px;}
  .uc-card h3{font-size:20px; font-weight:600; line-height:1.4; letter-spacing:-0.24px; color:#0B0E28;}
  .uc-card p{font-size:14px; font-weight:500; line-height:1.571; letter-spacing:0.2px; color:#767E9E;}

  @media(max-width:860px){
    .uc-grid{grid-template-columns:1fr; gap:20px;}
    .uc-card{padding:28px 22px; gap:18px; border-radius:18px;}
    .uc-card p br{display:none;}
  }

  /* ---------- HERO ROLLING SLIDES ---------- */
  .hero-roll{display:grid;}
  .hero-slide{
    grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(14px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1), visibility .7s;
  }
  .hero-slide.is-on{opacity:1; visibility:visible; transform:none;}

  /* JS가 붙으면 활성 슬라이드 높이에 맞춰 컨테이너가 부드럽게 늘었다 줄었다 한다.
     (두 슬라이드 높이 차가 커서 그리드 스택만으로는 짧은 쪽에 빈 공간이 크게 남는다) */
  .hero-roll.is-fluid{display:block; position:relative; transition:height .6s cubic-bezier(.22,.61,.36,1);}
  .hero-roll.is-fluid .hero-slide{position:absolute; top:0; left:0; width:100%;}
  .hero-dots{display:flex; justify-content:center; gap:9px; margin-top:26px;}
  .hero-dots button{
    width:8px; height:8px; padding:0; border:none; border-radius:999px; cursor:pointer;
    background:#D5DAEA; transition:width .3s ease, background .3s ease;
  }
  .hero-dots button.on{width:26px; background:var(--blue-600);}

  /* ---------- CHANNEL SWITCH (자사몰 vs 셀즈업) ---------- */
  .channel-section{
    border-top:1px solid var(--blue-100);
    background:linear-gradient(180deg, var(--blue-050) 0%, var(--white) 42%);
  }
  .sw-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; align-items:stretch;}
  .sw-col{border-radius:20px; padding:36px 34px; display:flex; flex-direction:column; gap:22px;}
  .sw-cost{background:#F7F8FB; border:1px solid #E7E9EE;}
  .sw-keep{background:var(--blue-050); border:1px solid var(--blue-100); box-shadow:0 24px 56px -30px rgba(31,47,160,0.26);}
  .sw-tag{
    display:inline-block; font-size:13px; font-weight:800; letter-spacing:0.4px;
    padding:6px 13px; border-radius:999px; margin-bottom:12px;
  }
  .sw-cost .sw-tag{color:#767E9E; background:#ECEEF3;}
  .sw-keep .sw-tag{color:var(--white); background:var(--blue-600);}
  .sw-col h3{font-size:21px; font-weight:800; line-height:1.45; letter-spacing:-0.01em;}
  .sw-cost h3{color:#4E555E;}
  .sw-keep h3{color:var(--ink-900);}
  .sw-list{display:flex; flex-direction:column; gap:13px; margin-top:auto;}
  .sw-list li{display:flex; gap:11px; align-items:flex-start; font-size:16px; line-height:1.6;}
  .sw-list li::before{flex:none; font-weight:800; line-height:1.6;}
  .sw-cost .sw-list li{color:#767E9E;}
  .sw-cost .sw-list li::before{content:'–'; color:#A6ABC4;}
  .sw-keep .sw-list li{color:var(--ink-900); font-weight:600;}
  .sw-keep .sw-list li::before{content:'✓'; color:var(--blue-600);}
  .sw-close{
    margin-top:32px; text-align:center; font-size:17px; color:var(--ink-600); line-height:1.7;
  }
  .sw-close strong{color:var(--blue-600); font-weight:800;}

  /* ---------- PROMISE (광고비를 줄여준다고 약속하지 않습니다) ---------- */
  .promise-section{background:var(--blue-050);}
  .pm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px;}
  .pm-card{
    background:var(--white); border:1px solid var(--blue-100); border-radius:18px; padding:32px 30px;
    box-shadow:0 18px 44px -26px rgba(31,47,160,0.16);
  }
  .pm-check{
    width:30px; height:30px; border-radius:9px; background:var(--blue-600);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .pm-card h3{font-size:19px; font-weight:800; color:var(--ink-900); letter-spacing:-0.01em; margin-bottom:8px;}
  .pm-card p{font-size:15.5px; color:var(--ink-600); line-height:1.7;}

  /* ---------- 7-DAY FREE TRIAL ---------- */
  .trial-section{background:var(--white);}
  .trial-card{
    position:relative; overflow:hidden; max-width:940px; margin:0 auto; border-radius:28px;
    padding:64px 40px; text-align:center; color:var(--white);
    background:
      radial-gradient(ellipse 70% 90% at 12% 0%, rgba(124,147,255,0.30) 0%, rgba(124,147,255,0) 60%),
      radial-gradient(ellipse 60% 80% at 92% 100%, rgba(52,84,244,0.42) 0%, rgba(52,84,244,0) 62%),
      linear-gradient(140deg, #2741B4 0%, var(--blue-900) 60%);
    box-shadow:0 36px 80px -36px rgba(31,47,160,0.6);
  }
  /* four-point sparkles, the reference's playful accent in brand blue */
  .trial-spark{
    position:absolute; pointer-events:none; background:var(--blue-400); opacity:.55;
    clip-path:polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  }
  .trial-spark-a{width:56px; height:56px; top:34px; right:58px; opacity:.5;}
  .trial-spark-b{width:30px; height:30px; top:104px; right:128px; opacity:.32;}
  .trial-spark-c{width:38px; height:38px; bottom:52px; left:58px; opacity:.28;}
  .trial-inner{position:relative; z-index:1;}
  .trial-kicker{
    display:inline-block; font-size:12px; font-weight:800; letter-spacing:2.6px; color:#BFD0FF;
    background:rgba(124,147,255,0.20); border:1px solid rgba(124,147,255,0.36);
    padding:8px 18px; border-radius:999px; margin-bottom:26px;
  }
  .trial-head{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-size:40px; font-weight:800; line-height:1.18; letter-spacing:-0.03em;
  }
  .trial-line{color:var(--white);}
  /* the headline's payload sits in a solid block so the offer reads first */
  .trial-pill{
    display:inline-block; padding:8px 30px; border-radius:999px;
    background:linear-gradient(100deg, #5C7BFF 0%, var(--blue-600) 100%);
    color:var(--white); box-shadow:0 18px 40px -18px rgba(92,123,255,0.9);
  }
  .trial-desc{margin-top:24px; font-size:16.5px; color:#C4CBF5; line-height:1.75;}
  .trial-perks{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px;
  }
  .trial-perks li{
    display:flex; align-items:center; gap:9px;
    font-size:14.5px; font-weight:700; color:#EAEEFF;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
    padding:11px 18px; border-radius:999px;
  }
  .tp-ic{
    width:20px; height:20px; border-radius:50%; flex:none; color:var(--blue-900);
    background:var(--blue-400); display:flex; align-items:center; justify-content:center;
  }
  .trial-cta{
    margin-top:36px; display:inline-flex; align-items:center; gap:14px;
    padding:8px 8px 8px 32px; border-radius:999px; cursor:pointer;
    background:var(--white); color:var(--blue-900);
    font-size:17px; font-weight:800; letter-spacing:-0.01em;
    box-shadow:0 20px 44px -18px rgba(0,0,0,0.5);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .trial-cta:hover{transform:translateY(-3px); box-shadow:0 26px 54px -18px rgba(0,0,0,0.58);}
  .trial-cta-arrow{
    width:48px; height:48px; border-radius:50%; flex:none; color:var(--white);
    background:var(--blue-600); display:flex; align-items:center; justify-content:center;
    transition:transform .25s cubic-bezier(.22,.61,.36,1);
  }
  .trial-cta:hover .trial-cta-arrow{transform:translateX(4px);}
  .trial-note{display:block; margin-top:18px; font-size:13.5px; color:#8189B8;}

  @media(max-width:860px){
    .sw-grid{grid-template-columns:1fr; gap:16px;}
    .sw-col{padding:28px 22px;}
    .sw-col h3{font-size:19px;}
    .sw-col h3 br, .sw-close br{display:none;}
    .pm-grid{grid-template-columns:1fr; gap:14px;}
    .pm-card{padding:26px 22px;}
    .trial-card{padding:44px 20px; border-radius:20px;}
    .trial-head{font-size:27px; gap:8px;}
    .trial-pill{padding:7px 20px;}
    .trial-desc{font-size:15px; margin-top:18px;}
    .trial-desc br{display:none;}
    .trial-perks{gap:8px; margin-top:24px;}
    .trial-perks li{font-size:13.5px; padding:9px 14px;}
    .trial-cta{font-size:15.5px; padding:7px 7px 7px 24px; gap:10px; margin-top:28px;}
    .trial-cta-arrow{width:42px; height:42px;}
    .trial-spark-a{width:38px; height:38px; top:18px; right:20px;}
    .trial-spark-b, .trial-spark-c{display:none;}
    .sc-val.up{font-size:34px;}
    .sc-val.dim{font-size:20px;}
    .hero-dots{margin-top:20px;}
  }

  /* ---------- FEATURE HUB (Figma 1527:18820) ---------- */
  .hub{
    position:relative; width:100%; max-width:760px; margin:64px auto 0;
    aspect-ratio:760/600;
  }
  .hub-ring{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:56%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(52,84,244,0.10) 0%, rgba(52,84,244,0.05) 55%, rgba(52,84,244,0) 72%);
    border:1px solid rgba(52,84,244,0.10);
  }
  .hub-core{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:188px; height:188px; border-radius:50%; background:var(--white);
    box-shadow:0 18px 44px -18px rgba(31,47,160,0.28);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  }
  .hub-mark{
    width:79px; height:79px; border-radius:17px; background:#2563EB;
    display:flex; align-items:center; justify-content:center;
  }
  .hub-mark svg{display:block;}
  .hub-name{font-size:23px; font-weight:800; color:var(--ink-900); letter-spacing:-0.02em;}
  .hub-node{
    position:absolute; transform:translate(-50%,-50%);
    width:170px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  }
  .hub-ic{
    width:70px; height:70px; border-radius:50%; background:var(--white); flex:none;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px -10px rgba(31,47,160,0.28);
  }
  .hub-ic svg{display:block;}
  .hub-txt{display:flex; flex-direction:column; gap:2px;}
  .hub-txt b{font-size:15px; font-weight:800; color:#1F1F1F; letter-spacing:0.2px; line-height:1.43;}
  .hub-txt span{font-size:13px; font-weight:600; color:#5C5D69; line-height:1.45;}
  .hub-n1{left:50%; top:14%;}
  .hub-n2{left:79%; top:38%;}
  .hub-n3{left:70%; top:80%;}
  .hub-n4{left:30%; top:80%;}
  .hub-n5{left:21%; top:38%;}

  /* The radial hub cannot hold its shape on a phone, so it becomes a single
     card of aligned rows — icons share one column, so nothing drifts. */
  @media(max-width:860px){
    .hub{
      aspect-ratio:auto; max-width:420px; margin:36px auto 0;
      display:flex; flex-direction:column; align-items:stretch; gap:0;
    }
    .hub-ring{display:none;}
    .hub-core{
      position:static; transform:none; align-self:center;
      width:auto; height:auto; border-radius:999px;
      flex-direction:row; gap:12px; padding:11px 24px 11px 13px; margin-bottom:22px;
      box-shadow:0 12px 30px -14px rgba(31,47,160,0.32);
    }
    .hub-mark{width:46px; height:46px; border-radius:13px;}
    .hub-mark svg{width:27px; height:27px;}
    .hub-name{font-size:19px;}
    .hub-node{
      position:static; transform:none; width:100%; text-align:left;
      display:grid; grid-template-columns:52px 1fr; column-gap:14px; row-gap:0;
      align-items:center; padding:15px 18px; background:var(--white);
      border:1px solid var(--blue-100); border-bottom:none;
    }
    .hub-n1{border-radius:16px 16px 0 0;}
    .hub-n5{border-bottom:1px solid var(--blue-100); border-radius:0 0 16px 16px;}
    .hub-ic{width:52px; height:52px; background:var(--blue-050); box-shadow:none;}
    .hub-ic svg{width:26px; height:26px;}
    .hub-txt{gap:3px;}
    .hub-txt b{font-size:15.5px;}
    .hub-txt span{font-size:13px; line-height:1.5;}
    .hub-txt span br{display:none;}
  }

  /* ================= MOBILE REFINEMENTS (≤860px) ================= */
  @media(max-width:860px){

    /* --- FLOW: purpose-built mobile timeline instead of a tall stack --- */
    .flow-row{
      flex-direction:column; align-items:stretch; gap:0;
      max-width:400px; margin:40px auto 0;
    }
    .flow-arrow{display:none;}
    .flow-node{
      position:relative; width:100%; max-width:none; text-align:left;
      display:grid; grid-template-columns:56px 1fr; column-gap:16px; row-gap:3px;
      align-items:center; padding-bottom:26px;
    }
    .flow-node:last-child{padding-bottom:0;}
    /* connector running down through the icon column */
    .flow-node:not(:last-child)::before{
      content:''; position:absolute; left:27.5px; top:56px; bottom:8px; width:2px;
      background:linear-gradient(var(--blue-100), rgba(52,84,244,0.12));
    }
    .flow-icon-slot{grid-column:1; grid-row:1/3; height:auto; display:block;}
    .flow-icon{
      width:56px; height:56px; position:relative; z-index:1;
      box-shadow:0 8px 20px -10px rgba(31,47,160,0.28);
    }
    .flow-icon-img{width:28px; height:28px;}
    .flow-node.core .flow-icon{width:56px; height:56px;}
    .flow-node.core .flow-icon-img{width:32px; height:32px;}
    .flow-node b{grid-column:2; grid-row:1; align-self:end; font-size:17px; margin-top:0;}
    .flow-node span{grid-column:2; grid-row:2; align-self:start; font-size:13.5px; line-height:1.5;}
    .flow-node span br{display:none;}

    /* --- PROBLEM CARDS: centre the head, keep copy readable --- */
    .problem-card{text-align:center;}
    .problem-head{flex-direction:column; align-items:center; gap:12px; margin-bottom:12px;}
    .problem-card h3 br{display:none;}
    .problem-card p br{display:none;}

    /* --- CHAT: right column actually sits right --- */
    .chat-col.right .chat-item{align-self:flex-end;}
    .chat-col.left .chat-item{align-self:flex-start;}
    .chat-item{max-width:84%;}
    .prob-chat{padding:0 10px;}   /* room for the bubble tails */
    /* reveal straight up on mobile: sideways travel pushed the page wider than the screen */
    .js-reveal [data-reveal="from-left"],
    .js-reveal [data-reveal="from-right"]{transform:translateY(18px) scale(.97);}

    /* --- WHY: the two CTAs must fit the screen --- */
    .why-cta-row{width:100%; gap:10px;}
    .why-btn{width:auto; flex:1 1 0; min-width:0; padding:13px 8px;}

    /* --- FINAL: centre the left column, keep the data card usable --- */
    .final-left{text-align:center;}
    .final-left h3 br{display:none;}
    .check-list{display:inline-flex; flex-direction:column; text-align:left; margin:0 auto;}
    .stat-row{gap:8px;}
    .stat-row .label{font-size:11.5px; white-space:nowrap;}
    .stat-row .value{font-size:15px; letter-spacing:-0.02em;}
    .stat-row .delta{font-size:11px; white-space:nowrap;}
    /* grid children default to min-width:auto, which blocks the scroll container
       from shrinking and stretched the whole page wider than the screen */
    .final-grid, .final-left, .final-right{min-width:0;}
    .split-tables{overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0;}
    .split-tables .mini-table{min-width:340px;}
    .split-tables.full .mini-table{font-size:14px;}
    .split-tables.full .mini-table th{white-space:nowrap;}

    /* --- FEATURE HUB: lone last node centres under the pair above --- */
    .hub-node:last-child{grid-column:1/-1;}

    /* --- keep centred section copy from drifting --- */
    .sec-sub br{display:none;}
    .trial-card h2 br{display:none;}
  }

  @media (prefers-reduced-motion:reduce){
    .headline .accent, .hero-turn .accent{animation:none;}
    .hero-mark{animation:none;}
  }

  /* ==========================================================================
     TYPE SCALE — 역할별 본문 타이포 체계
     파일 곳곳에 흩어져 있던 크기를 아래 9단계로 통일한다. 이 블록이 가장 마지막에
     오므로 위쪽의 개별 선언보다 우선한다. 새 텍스트를 추가할 때도 여기 목록에
     선택자만 끼워 넣으면 전체 리듬이 유지된다.

       display 46 / h2 42 / h3 22 / h4 19 / h5 17
       lead 18 / body 16 / small 15 / caption 13.5 / micro 12.5
     ========================================================================== */

  /* --- 소제목(키커) : 섹션 위 라벨은 밝기만 다르고 크기·자간은 동일 --- */
  .sec-kicker,
  .dark-kicker,
  .why-badge,
  .trial-kicker,
  .hs-badge{
    font-size:16px; font-weight:800; letter-spacing:1.6px;
  }

  /* --- h3 : 큰 카드 / 마무리 문장 --- */
  .why-card h4,
  .why-close-title,
  .final-left h3,
  .hs-cta-title,
  .step-card h3,
  .sw-col h3{font-size:22px;}

  /* --- h4 : 일반 카드 제목 --- */
  .sol-item h3,
  .problem-card h3,
  .uc-card h3,
  .usecase-card h4,
  .pm-card h3,
  .hub-name,
  .story-card h3,
  .pillar-card h3{font-size:19px;}

  /* --- h5 : 작은 카드 / 표 머리 --- */
  .trust-card h4,
  .ba-col h3,
  .hs-title,
  .sw-close{font-size:17px;}

  /* --- lead : 섹션 설명 한 줄 --- */
  .sec-sub,
  .cost-punch,
  .footer-cta p,
  .faq-item summary{font-size:18px;}

  /* --- body : 카드 본문 --- */
  .sol-item p,
  .why-card p,
  .review-card p,
  .faq-item .faq-a,
  .check-list li,
  .hero .sub,
  .price-extra h4,
  .sw-list li,
  .step-card p,
  .pm-card p,
  .chat-bubble,
  .problem-card p,
  .uc-card p,
  .story-card > p,
  .usecase-card p,
  .hs-desc,
  .hs-cta-desc,
  .ba-col li,
  .flow-node b,
  .trial-desc,
  .trial-cta,
  .cc-btn,
  .hs-cta-btn,
  .why-btn,
  .btn-lg{font-size:16px;}

  /* --- small : 보조 본문 / UI --- */
  .nav-links,
  .btn,
  .btn-ghost,
  .cd-table,
  .price-desc,
  .price-extra p,
  .price-feat li,
  .cc-day,
  .cc-list li,
  .cb-name,
  .cb-us-name,
  .trial-perks li,
  .pillar-card p,
  .hub-txt b,
  .hs-label,
  .hs-value,
  .split-tables.full .mini-table{font-size:15px;}

  /* --- caption : 주석 / 출처 / 푸터 --- */
  .mini-table,
  .flow-node span,
  .review-metric,
  .review-who,
  .review-note,
  .footer-contact,
  .footer-col ul,
  .footer-corp p,
  .trial-note,
  .cd-note,
  .step-badge,
  .step-ui-box,
  .hero-solution,
  .hero-cta small,
  .price-note,
  .story-who,
  .sc-metric,
  .hub-txt span,
  .trust-card p{font-size:13.5px;}

  /* --- micro : 배지 / 태그 / 지표 라벨 --- */
  .hero-badge-pill,
  .cd-check,
  .uc-chip,
  .price-tag,
  .cc-ribbon,
  .cc-foot,
  .bar-item,
  .trust-disc,
  .footer-col h5,
  .footer-bottom,
  .sc-lbl,
  .dark-note,
  .story-tag,
  .uv-pill,
  .problem-num,
  .sw-tag,
  .stat-row .label,
  .stat-row .delta{font-size:12.5px;}

  @media(max-width:860px){
    /* 모바일은 한 단계씩 낮춰 같은 리듬을 유지한다 */
    .why-card h4,
    .why-close-title,
    .final-left h3,
    .hs-cta-title,
    .step-card h3,
    .sw-col h3{font-size:19px;}

    .sol-item h3,
    .problem-card h3,
    .uc-card h3,
    .usecase-card h4,
    .pm-card h3,
    .hub-name,
    .story-card h3,
    .pillar-card h3{font-size:17.5px;}

    .trust-card h4,
    .ba-col h3,
    .hs-title,
    .sw-close{font-size:16px;}

    .sec-sub,
    .cost-punch,
    .footer-cta p,
    .faq-item summary{font-size:16px;}

    .sol-item p,
    .why-card p,
    .review-card p,
    .faq-item .faq-a,
    .check-list li,
    .hero .sub,
    .price-extra h4,
    .sw-list li,
    .step-card p,
    .pm-card p,
    .chat-bubble,
    .problem-card p,
    .uc-card p,
    .story-card > p,
    .usecase-card p,
    .hs-desc,
    .hs-cta-desc,
    .ba-col li,
    .flow-node b,
    .trial-desc,
    .trial-cta,
    .cc-btn,
    .hs-cta-btn,
    .why-btn,
    .btn-lg{font-size:15px;}

    .nav-links,
    .btn,
    .btn-ghost,
    .cd-table,
    .price-desc,
    .price-extra p,
    .price-feat li,
    .cc-day,
    .cc-list li,
    .cb-name,
    .cb-us-name,
    .trial-perks li,
    .pillar-card p,
    .hub-txt b,
    .hs-label,
    .hs-value,
    .split-tables.full .mini-table{font-size:14px;}

    .mini-table,
    .flow-node span,
    .review-metric,
    .review-who,
    .review-note,
    .footer-contact,
    .footer-col ul,
    .footer-corp p,
    .trial-note,
    .cd-note,
    .step-badge,
    .step-ui-box,
    .hero-solution,
    .hero-cta small,
    .price-note,
    .story-who,
    .sc-metric,
    .hub-txt span,
    .trust-card p{font-size:13px;}

    .sec-kicker,
    .dark-kicker,
    .why-badge,
    .trial-kicker,
    .hs-badge{font-size:13px; letter-spacing:1.5px;}

    /* 좌우 여백은 상단바까지 포함해 한 값으로 맞춘다 */
    .wrap{padding:0 16px;}
    .nav{padding:14px 16px;}
  }