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

  :root {
    --ink: #0F111D;
    --navy: #000245;
    --blue: #1750FF;
    --ink-2: rgba(255,255,255,0.6);
    --ink-3: rgba(255,255,255,0.8);
  }
  .accent { color: #DFFF54; }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: #000; }
  body {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img { display: block; }

  /* ─────────── SECTION SCALING ─────────── */
  /* Each .section has a fixed design width; contents are absolutely-
     positioned against that canvas. `container-type: inline-size` lets us
     use `cqw` units so 1 cqw === 1/100th of the section's current width,
     making every pixel scale proportionally. */
  .section {
    position: relative;
    width: 100%;
    overflow: hidden;
    container-type: inline-size;
  }
  .canvas {
    position: relative;
    width: 100%;
  }

  /* ─────────── PC (desktop) ─────────── */
  /* design width 1920. 1cqw = 19.20px at native size → px => cqw: px / 19.2 */
  .pc { display: block; }
  .mo { display: none; }
  @media (max-width: 768px) {
    .pc { display: none; }
    .mo { display: block; }
  }
  @media (min-width: 769px) {
    /* Cap layout width at the design size so cqw-based scaling
       does not keep growing on ultra-wide screens. */
    html, body {
      background: #171a20;
    }
    .pc {
      max-width: 1920px;
      margin: 0 auto;
    }
    .pc .section {
      max-width: 1920px;
      margin: 0 auto;
    }
    .site-header .header-inner {
      max-width: 1920px;
      margin: 0 auto;
    }
  }

  /* helper: turn Figma px into cqw for a 1920-wide canvas */
  /* we use custom properties with calc(Npx / 19.2 * 1cqw) inline */

  /* ═══════════════════════════════════════════════════════════════
     PC LAYOUT  (1920 design width)
     ═══════════════════════════════════════════════════════════════ */

  /* #01 Hero PC — 1920×974 */
  .pc-hero .canvas {
    aspect-ratio: 1920 / 974;
    background: url("../assets/pc/01_hero_bg.png") center / cover no-repeat;
  }
  .pc-hero h1 {
    position: absolute;
    left: calc(223 / 1920 * 100cqw);
    top: calc(250 / 1920 * 100cqw);
    margin: 0;
    font-weight: 700;
    font-size: calc(66 / 1920 * 100cqw);
    line-height: calc(102 / 1920 * 100cqw);
    color: #fff;
    letter-spacing: -0.02em;
    white-space: pre-line;
  }
  .pc-hero .sub {
    position: absolute;
    left: calc(223 / 1920 * 100cqw);
    top: calc(610 / 1920 * 100cqw);
    margin: 0;
    font-size: calc(24 / 1920 * 100cqw);
    line-height: calc(38 / 1920 * 100cqw);
    color: var(--ink-3);
    white-space: pre-line;
    max-width: calc(420 / 1920 * 100cqw);
  }
  .pc-hero .stores {
    position: absolute;
    left: calc(223 / 1920 * 100cqw);
    top: calc(753 / 1920 * 100cqw);
    display: flex;
    gap: calc(22 / 1920 * 100cqw);
  }
  .store-btn {
    width: calc(225 / 1920 * 100cqw);
    height: calc(65 / 1920 * 100cqw);
    border-radius: calc(10 / 1920 * 100cqw);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .store-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
  .store-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .store-btn svg { width: calc(34 / 1920 * 100cqw); height: auto; flex-shrink: 0; }
  .store-btn .labels {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .store-btn .small {
    font-size: calc(11 / 1920 * 100cqw);
    font-weight: 500;
    color: #000;
    letter-spacing: 0.02em;
  }
  .store-btn .big {
    font-size: calc(22 / 1920 * 100cqw);
    font-weight: 700;
    color: #000;
  }

  /* #02 Brand PC — 1920×1398 */
  .pc-brand .canvas {
    aspect-ratio: 1920 / 1398;
    background: url("../assets/pc/02_brand.png") center / cover no-repeat;
  }
  .pc-brand .t1 {
    position: absolute;
    top: calc(90 / 1920 * 100cqw);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: calc(66 / 1920 * 100cqw);
    line-height: 1.25;
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }
  .pc-brand .t2 {
    position: absolute;
    top: calc(230 / 1920 * 100cqw);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    font-size: calc(34 / 1920 * 100cqw);
    line-height: 1.4;
    color: rgba(255,255,255,0.88);
    text-align: center;
    white-space: nowrap;
  }
  .pc-brand .t3 {
    position: absolute;
    top: calc(1170 / 1920 * 100cqw);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: calc(66 / 1920 * 100cqw);
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }

  /* #03 Pain PC — 1920×1204 */
  .pc-pain .canvas {
    aspect-ratio: 1920 / 1204;
    background: url("../assets/pc/03_pain.png") center / cover no-repeat;
  }
  .pc-pain .eyebrow {
    position: absolute;
    top: calc(100 / 1920 * 100cqw);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: calc(28 / 1920 * 100cqw);
    line-height: calc(36 / 1920 * 100cqw);
    color: var(--ink-2);
    text-align: center;
  }
  .pc-pain .title {
    position: absolute;
    top: calc(175 / 1920 * 100cqw);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: calc(42 / 1920 * 100cqw);
    line-height: calc(50 / 1920 * 100cqw);
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }
  .pc-pain .bubble {
    position: absolute;
    font-family: Pretendard;
    /* Keep icon-to-text spacing consistent across all pain bubbles */
    padding-left: calc(34 / 1920 * 100cqw);
  }
  .pc-pain .bubble .q {
    font-weight: 700;
    font-size: calc(24 / 1920 * 100cqw);
    line-height: calc(36 / 1920 * 100cqw);
    color: rgba(0,0,0,0.8);
    margin: 0 0 calc(4 / 1920 * 100cqw) 0;
  }
  .pc-pain .bubble .a {
    font-weight: 500;
    font-size: calc(16 / 1920 * 100cqw);
    line-height: calc(24 / 1920 * 100cqw);
    color: rgba(0,0,0,0.6);
    margin: 0;
  }

  /* #04 USP PC — 1920×1921 */
  .pc-usp .canvas {
    aspect-ratio: 1920 / 1921;
    background: url("../assets/pc/04_usp.png") center / cover no-repeat;
  }
  .pc-usp .eyebrow {
    position: absolute;
    top: calc(140 / 1920 * 100cqw);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: calc(28 / 1920 * 100cqw);
    color: var(--ink-2);
    text-align: center;
  }
  .pc-usp .title {
    position: absolute;
    top: calc(220 / 1920 * 100cqw);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: calc(42 / 1920 * 100cqw);
    line-height: calc(56 / 1920 * 100cqw);
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }
  .pc-usp .title .hl { color: #F8E028; }
  .pc-usp .card-a {
    position: absolute;
    top: calc(960 / 1920 * 100cqw);
    left: calc(70 / 1920 * 100cqw);
    width: calc(420 / 1920 * 100cqw);
    text-align: right;
  }
  .pc-usp .card-b {
    position: absolute;
    top: calc(1430 / 1920 * 100cqw);
    left: calc(1420 / 1920 * 100cqw);
    width: calc(360 / 1920 * 100cqw);
    text-align: left;
  }
  .pc-usp .chip {
    display: block;
    font-weight: 700;
    font-size: calc(24 / 1920 * 100cqw);
    line-height: calc(32 / 1920 * 100cqw);
    color: #fff;
    margin: 0 0 calc(20 / 1920 * 100cqw) 0;
  }
  .pc-usp .h {
    font-weight: 500;
    font-size: calc(20 / 1920 * 100cqw);
    line-height: calc(32 / 1920 * 100cqw);
    color: rgba(255,255,255,0.9);
    margin: 0;
    white-space: pre-line;
  }

  /* #05 UI PC — 1920×1402 */
  .pc-ui .canvas {
    aspect-ratio: 1920 / 1402;
    background: url("../assets/pc/05_ui.png") center / cover no-repeat;
  }
  .pc-ui .eyebrow {
    position: absolute;
    top: calc(120 / 1920 * 100cqw);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    font-size: calc(28 / 1920 * 100cqw);
    line-height: calc(36 / 1920 * 100cqw);
    color: rgba(255,255,255,0.7);
    text-align: center;
  }
  .pc-ui .title {
    position: absolute;
    top: calc(200 / 1920 * 100cqw);
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: calc(42 / 1920 * 100cqw);
    line-height: calc(56 / 1920 * 100cqw);
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }
  .pc-ui .title .hl { color: #F8E028; }
  .pc-ui .step {
    position: absolute;
    font-weight: 500;
    font-size: calc(25 / 1920 * 100cqw);
    line-height: calc(30 / 1920 * 100cqw);
    color: #fff;
    text-align: right;
    width: calc(260 / 1920 * 100cqw);
    white-space: nowrap;
  }
  .pc-ui .step small { display: none; }

  /* #06 CTA PC — 1920×1108 */
  .pc-cta .canvas {
    aspect-ratio: 1920 / 1108;
    background: url("../assets/pc/06_cta.png") center / cover no-repeat;
  }
  .pc-cta .eyebrow {
    position: absolute;
    top: calc(100 / 1920 * 100cqw);
    left: calc(814 / 1920 * 100cqw);
    width: calc(293 / 1920 * 100cqw);
    font-weight: 700;
    font-size: calc(28 / 1920 * 100cqw);
    line-height: calc(36 / 1920 * 100cqw);
    color: rgba(255,255,255,0.6);
    text-align: center;
  }
  .pc-cta .title {
    position: absolute;
    top: calc(180 / 1920 * 100cqw);
    left: calc(560 / 1920 * 100cqw);
    width: calc(800 / 1920 * 100cqw);
    font-weight: 700;
    font-size: calc(52 / 1920 * 100cqw);
    line-height: calc(68 / 1920 * 100cqw);
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }
  .pc-cta .sub {
    position: absolute;
    top: calc(571 / 1920 * 100cqw);
    right: calc(172 / 1920 * 100cqw);
    left: auto;
    width: max-content;
    font-weight: 700;
    font-size: calc(38 / 1920 * 100cqw);
    line-height: calc(50 / 1920 * 100cqw);
    color: #fff;
    text-align: right;
    white-space: pre-line;
  }
  .pc-cta .sub .hl { color: #F8E028; }
  .pc-cta .body {
    position: absolute;
    top: calc(716 / 1920 * 100cqw);
    left: calc(1268 / 1920 * 100cqw);
    width: calc(480 / 1920 * 100cqw);
    font-size: calc(22 / 1920 * 100cqw);
    line-height: calc(30 / 1920 * 100cqw);
    color: rgba(255,255,255,0.8);
    text-align: right;
    white-space: pre-line;
  }
  .pc-cta .btns {
    position: absolute;
    top: calc(860 / 1920 * 100cqw);
    left: calc(1384 / 1920 * 100cqw);
    display: flex;
    gap: calc(14 / 1920 * 100cqw);
  }
  .pc-cta .app-btn {
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: calc(12 / 1920 * 100cqw);
    color: #fff;
    font-weight: 500;
    font-size: calc(20 / 1920 * 100cqw);
    padding: calc(16 / 1920 * 100cqw) calc(20 / 1920 * 100cqw);
    text-decoration: none;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
  }
  .pc-cta .app-btn:hover { background: #fff; color: var(--navy); }

  /* #07 Footer — 1920×348 */
  .footer {
    --footer-text-scale: clamp(0.65, calc(0.3 + 0.7 * (100cqw / 1920px)), 1);
    background: var(--ink);
    padding: calc(116 / 1920 * 100cqw) calc(274 / 1920 * 100cqw) calc(106 / 1920 * 100cqw) calc(338 / 1920 * 100cqw);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
  }
  .footer .brand { font-weight: 500; font-size: calc(24px * var(--footer-text-scale)); line-height: calc(50px * var(--footer-text-scale)); margin: 0; }
  .footer .addr { margin: calc(4 / 1920 * 100cqw) 0 0 0; font-size: calc(18px * var(--footer-text-scale)); line-height: calc(20px * var(--footer-text-scale)); color: rgba(255,255,255,0.6); }
  .footer .links { margin-top: calc(32 / 1920 * 100cqw); display: flex; gap: calc(16 / 1920 * 100cqw); }
  .footer .links a { color: #fff; text-decoration: none; font-size: calc(14px * var(--footer-text-scale)); line-height: calc(20px * var(--footer-text-scale)); font-weight: 100; }
  .footer .links a:hover { text-decoration: underline; }
  .footer .kv { display: grid; grid-template-columns: max-content 1fr; column-gap: calc(40 / 1920 * 100cqw); row-gap: calc(16 / 1920 * 100cqw); font-size: calc(18px * var(--footer-text-scale)); line-height: calc(20px * var(--footer-text-scale)); margin: 0; }
  .footer .kv dt { color: #fff; font-weight: 100; margin: 0; }
  .footer .kv dd { color: rgba(255,255,255,0.6); font-weight: 100; margin: 0; }

  /* ═══════════════════════════════════════════════════════════════
     MOBILE LAYOUT  (860 design width, but renders at full viewport)
     ═══════════════════════════════════════════════════════════════ */

  .mo-hero .canvas {
    aspect-ratio: 860 / 1699;
    background: url("../assets/mo/01_hero_phones.png") center / cover no-repeat;
  }
  .mo-hero h1 {
    position: absolute;
    top: calc(130 / 860 * 100cqw);
    left: 0; right: 0;
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size: calc(60 / 860 * 100cqw);
    line-height: calc(90 / 860 * 100cqw);
    color: #fff;
    white-space: pre-line;
  }
  .mo-hero .sub {
    position: absolute;
    top: calc(1452 / 860 * 100cqw);
    left: 0; right: 0;
    margin: 0;
    text-align: center;
    font-size: calc(24 / 860 * 100cqw);
    line-height: calc(38 / 860 * 100cqw);
    color: #fff;
    padding: 0 calc(40 / 860 * 100cqw);
    white-space: pre-line;
  }
  .mo-hero .stores {
    position: absolute;
    top: calc(1550 / 860 * 100cqw);
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: calc(18 / 860 * 100cqw);
  }
  .mo-hero .store-btn {
    width: calc(225 / 860 * 100cqw);
    height: auto;
    border-radius: calc(12 / 860 * 100cqw);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    color: #000;
    text-decoration: none;
  }
  .mo-hero .store-btn img {
    width: 100%;
    height: auto;
    object-fit: initial;
  }
  .mo-hero .store-btn svg { width: calc(36 / 860 * 100cqw); height: auto; }
  .mo-hero .store-btn .small { font-size: calc(13 / 860 * 100cqw); font-weight: 500; }
  .mo-hero .store-btn .big { font-size: calc(22 / 860 * 100cqw); font-weight: 700; }
  .mo-hero .store-btn .labels { display: flex; flex-direction: column; line-height: 1.15; color: #000; }

  /* #02 mo Brand — 860×1378 */
  .mo-brand .canvas {
    aspect-ratio: 860 / 1378;
    background: url("../assets/mo/02_brand.png") center / cover no-repeat;
  }
  .mo-brand .title {
    position: absolute;
    top: calc(120 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 600;
    font-size: calc(72 / 860 * 100cqw);
    line-height: 1.25;
    color: #fff;
  }
  .mo-brand .sub {
    position: absolute;
    top: calc(240 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 500;
    font-size: calc(34 / 860 * 100cqw);
    line-height: calc(50 / 860 * 100cqw);
    color: rgba(255,255,255,0.88);
    padding: 0 calc(60 / 860 * 100cqw);
    white-space: pre-line;
  }
  .mo-brand .cta-text {
    position: absolute;
    top: calc(1220 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 600;
    font-size: calc(60 / 860 * 100cqw);
    color: #fff;
  }

  /* #03 mo Pain — 860×1089 */
  .mo-pain .canvas {
    aspect-ratio: 860 / 1089;
    background: url("../assets/mo/03_pain.png") center / cover no-repeat;
  }
  .mo-pain .eyebrow {
    position: absolute;
    top: calc(100 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 500;
    font-size: calc(28 / 860 * 100cqw);
    color: var(--ink-2);
  }
  .mo-pain .title {
    position: absolute;
    top: calc(175 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 600;
    font-size: calc(38 / 860 * 100cqw);
    line-height: calc(50 / 860 * 100cqw);
    color: #fff;
    white-space: pre-line;
    padding: 0 calc(60 / 860 * 100cqw);
  }
  .mo-pain .bubble-txt {
    position: absolute;
    /* Keep icon-to-text spacing consistent across all pain bubbles */
    padding-left: calc(74 / 860 * 100cqw);
  }
  .mo-pain .bubble-txt .q {
    font-weight: 700;
    font-size: calc(24 / 860 * 100cqw);
    line-height: calc(36 / 860 * 100cqw);
    color: rgba(0,0,0,0.8);
    margin: 0 0 calc(4 / 860 * 100cqw) 0;
  }
  .mo-pain .bubble-txt .a {
    font-weight: 500;
    font-size: calc(18 / 860 * 100cqw);
    line-height: calc(26 / 860 * 100cqw);
    color: rgba(0,0,0,0.6);
    margin: 0;
  }

  /* #04 mo USP — 860×2069 */
  .mo-usp .canvas {
    aspect-ratio: 860 / 2069;
    background: url("../assets/mo/04_usp.png") center / cover no-repeat;
  }
  .mo-usp .eyebrow {
    position: absolute;
    top: calc(140 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 500;
    font-size: calc(28 / 860 * 100cqw);
    color: var(--ink-2);
  }
  .mo-usp .title {
    position: absolute;
    top: calc(215 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 600;
    font-size: calc(38 / 860 * 100cqw);
    line-height: calc(54 / 860 * 100cqw);
    color: #fff;
    white-space: pre-line;
    padding: 0 calc(60 / 860 * 100cqw);
  }
  .mo-ui .title .hl, .mo-usp .title .hl { color: #F8E028; }
  .mo-usp .card-a {
    position: absolute;
    top: calc(555 / 860 * 100cqw);
    left: calc(500 / 860 * 100cqw);
    width: calc(480 / 860 * 100cqw);
    text-align: left;
  }
  .mo-usp .card-b {
    position: absolute;
    top: calc(1685 / 860 * 100cqw);
    right: calc(495 / 860 * 100cqw);
    width: calc(480 / 860 * 100cqw);
    text-align: right;
  }
  .mo-usp .chip {
    display: block;
    font-weight: 500;
    font-size: calc(22 / 860 * 100cqw);
    line-height: calc(44 / 860 * 100cqw);
    color: #fff;
    margin: 0 0 calc(5 / 860 * 100cqw) 0;
  }
  .mo-usp .h {
    font-size: calc(18 / 860 * 100cqw);
    line-height: calc(25 / 860 * 100cqw);
    color: rgba(255,255,255,0.7);
    margin: 0;
    white-space: pre-line;
  }

  /* #05 mo UI — 860×4268 */
  .mo-ui .canvas {
    aspect-ratio: 860 / 4268;
    background: url("../assets/mo/05_ui.png") center / cover no-repeat;
  }
  .mo-ui .eyebrow {
    position: absolute;
    top: calc(150 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 500;
    font-size: calc(28 / 860 * 100cqw);
    color: var(--ink-2);
  }
  .mo-ui .title {
    position: absolute;
    top: calc(220 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 600;
    font-size: calc(38 / 860 * 100cqw);
    line-height: calc(54 / 860 * 100cqw);
    color: #fff;
    white-space: pre-line;
    padding: 0 calc(60 / 860 * 100cqw);
  }
  .mo-ui .step {
    position: absolute;
    left: 0; right: 0;
    text-align: center;
    font-weight: 500;
    font-size: calc(26 / 860 * 100cqw);
    color: #fff;
  }
  .mo-ui .step small {
    display: block;
    font-weight: 500;
    font-size: calc(18 / 860 * 100cqw);
    color: rgba(255,255,255,0.6);
    margin-top: calc(8 / 860 * 100cqw);
  }

  /* #06 mo CTA — 860×1505 */
  .mo-cta .canvas {
    aspect-ratio: 860 / 1505;
    background: url("../assets/mo/06_cta.png") center / cover no-repeat;
  }
  .mo-cta .eyebrow {
    position: absolute;
    top: calc(80 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 500;
    font-size: calc(28 / 860 * 100cqw);
    color: rgba(255,255,255,0.65);
  }
  .mo-cta .mtitle {
    position: absolute;
    top: calc(140 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-weight: 600;
    font-size: calc(46 / 860 * 100cqw);
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
  }
  .mo-cta .body {
    position: absolute;
    top: calc(280 / 860 * 100cqw);
    left: 0; right: 0;
    text-align: center;
    font-size: calc(22 / 860 * 100cqw);
    line-height: calc(34 / 860 * 100cqw);
    color: rgba(255,255,255,0.65);
    white-space: pre-line;
  }
  .mo-cta .subtitle {
    position: absolute;
    top: calc(430 / 860 * 100cqw);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 40 / 860 * 100cqw);
    text-align: center;
    font-weight: 700;
    font-size: calc(44 / 860 * 100cqw);
    line-height: calc(60 / 860 * 100cqw);
    color: #fff;
    white-space: pre-line;
  }
  .mo-cta .subtitle .sub-line { white-space: nowrap; }
  .mo-cta .subtitle .hl { color: #F8E028; }
  .mo-cta .btns {
    position: absolute;
    top: calc(600 / 860 * 100cqw);
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: calc(14 / 860 * 100cqw);
  }
  .mo-cta .app-btn {
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: calc(14 / 860 * 100cqw);
    padding: calc(18 / 860 * 100cqw) calc(28 / 860 * 100cqw);
    font-weight: 700;
    font-size: calc(22 / 860 * 100cqw);
    color: #fff;
    background: transparent;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
  }
  .mo-cta .app-btn:hover { background: #fff; color: var(--navy); }

  /* #07 mo Footer */
  .mo-footer {
    --footer-text-scale: clamp(0.65, calc(0.3 + 0.7 * (100cqw / 1920px)), 1);
    background: var(--ink);
    padding: calc(80 / 860 * 100cqw) calc(79 / 860 * 100cqw);
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(40 / 860 * 100cqw);
    font-family: 'Pretendard', sans-serif;
  }
  .mo-footer .brand { font-weight: 500; font-size: calc(24px * var(--footer-text-scale)); line-height: calc(50px * var(--footer-text-scale)); margin: 0; }
  .mo-footer .addr { margin: calc(16 / 860 * 100cqw) 0 0 0; font-size: calc(18px * var(--footer-text-scale)); line-height: calc(20px * var(--footer-text-scale)); color: rgba(255,255,255,0.6); }
  .mo-footer .links { display: flex; gap: calc(28 / 860 * 100cqw); margin-top: calc(44 / 860 * 100cqw); }
  .mo-footer .links a { color: #fff; text-decoration: none; font-size: calc(14px * var(--footer-text-scale)); line-height: calc(20px * var(--footer-text-scale)); font-weight: 100; }
  .mo-footer .kv { display: grid; grid-template-columns: max-content 1fr; column-gap: calc(20 / 860 * 100cqw); row-gap: calc(16 / 860 * 100cqw); font-size: calc(18px * var(--footer-text-scale)); line-height: calc(20px * var(--footer-text-scale)); margin: 0; }
  .mo-footer .kv dt { color: #fff; margin: 0; font-weight: 100; }
  .mo-footer .kv dd { color: rgba(255,255,255,0.6); margin: 0; font-weight: 100; }

  /* Site header with hubl logo */
  .site-header {
    position: sticky;
    top: 0;
  z-index: 100;
  width: 100%;
  background: #171a20;
  }
.site-header .header-inner {
  width: 100%;
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(4, 10, 64, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.site-header .brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
.site-header .brand img { display: block; height: 30px; width: auto; }
@media (max-width: 900px) {
  .site-header .header-inner { padding: 12px 12px; }
  .site-header .brand img { height: 24px; }
  }