* { box-sizing:border-box; }
    html, body { margin:0; }
    body {
      /* TalkBridge sub-brand palette */
      --tb-yellow:#FFF100;
      --tb-ink:#1A1A1A;
      --tb-surface-warm:#F7F7F2;
      --tb-hairline:#E2E2DE;
      --tb-mint:#2E8E91;
      --tb-blue:#2F6BAA;
      /* remap DS tokens to the sub-brand */
      --bg-default:#FFFFFF;
      --bg-subtle:#F7F7F2;
      --bg-card:#FFFFFF;
      --bg-muted:#F0F0EA;
      --bg-input:#FFFFFF;
      --border-default:#E2E2DE;
      --border-darker:#D8D8D2;
      --border-strong:#C9C9C2;
      --border-accent:#1A1A1A;
      --border-informative:#1A1A1A;
      --text-default:#1A1A1A;
      --text-subtle:#3D3D3B;
      --text-muted:#6B6B66;
      --text-hint:#9A9A94;
      --text-informative:#2F6BAA;
      --icon-default-muted:#9A9A94;
      --icon-success:#2E8E91;
      --bg-state-primary:#1A1A1A;
      --bg-state-primary-hover:#000000;
      --bg-state-gray:#1A1A1A;
      --bg-inverted:#1A1A1A;
      --bg-state-brand:#1A1A1A;
      font-family:var(--font-body); background:var(--bg-default); color:var(--text-default);
    }
    a { color:var(--text-informative); text-decoration:none; }
    .wordmark { font-family:"Poppins", var(--font-headline); font-weight:600; letter-spacing:-0.01em; }
    .wrap { max-width:1160px; margin:0 auto; padding:0 32px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-body); font-weight:600; border-radius:6px; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:background 150ms, border-color 150ms; text-decoration:none; }
    .btn-sm { padding:8px 15px; font-size:var(--size-sm); }
    .btn-md { padding:10px 18px; font-size:var(--size-sm); }
    .btn-lg { padding:13px 26px; font-size:var(--size-md); }
    .btn-primary { background:var(--tb-yellow); color:var(--tb-ink); }
    .btn-primary:hover { background:#F2E500; color:var(--tb-ink); }
    .btn-secondary { background:var(--bg-card); color:var(--text-default); border-color:var(--tb-ink); }
    .btn-secondary:hover { background:var(--tb-surface-warm); }
    .btn-soft { background:#1A1A1A0d; color:var(--text-subtle); }
    .btn-soft:hover { background:#1A1A1A17; }
    .badge { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-body); font-weight:600; white-space:nowrap; min-height:20px; padding:2px 8px; font-size:var(--size-xs); border-radius:4px; letter-spacing:var(--letter-spacing-tracking-normal); }
    .badge-neutral { background:var(--tb-surface-warm); color:var(--text-subtle); border:1px solid var(--tb-hairline); }
    .badge-mint { background:#e3f1f1; color:var(--tb-mint); }
    .badge-blue { background:#e6eef7; color:var(--tb-blue); }
    .badge-violet { background:#e3f1f1; color:var(--tb-mint); }
    .hl { background:linear-gradient(to top, var(--tb-yellow) 24%, transparent 24%); padding:0 4px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
    @keyframes tb-blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

    /* ===== 반응형 (모바일 ≤768px) ===== */
    @media (max-width:768px){
      .wrap{ padding-left:20px; padding-right:20px; }
      .bigpad{ padding-top:52px !important; padding-bottom:52px !important; }
      .nav-links{ display:none !important; }
      .hero-h1{ font-size:32px !important; line-height:1.3 !important; }
      .hero-sub{ font-size:16px !important; }
      .grid-1{ grid-template-columns:1fr !important; }
      .compare-divider{ display:none !important; }
      .flow-row{ flex-direction:column !important; align-items:center !important; }
      .flow-step{ width:100% !important; max-width:280px; }
      .flow-conn{ padding-top:0 !important; width:auto !important; padding:10px 0 !important; }
      .flow-conn i{ transform:rotate(90deg); }
      .cta-row{ flex-direction:column !important; }
      .cta-row .btn{ width:100%; }
    }

    /* ===== 마우스오버 인터랙션 (포인터 디바이스 한정) ===== */
    @media (hover:hover){
      .nav-links a{ transition:color 150ms; }
      .nav-links a:hover{ color:var(--text-default); }
      /* 카드 리프트 (모드·요금 카드) */
      .lift{ transition:transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease; }
      .lift:hover{ transform:translateY(-5px); box-shadow:var(--shadow-modal-sm); }
      /* 연결방법 스텝 아이콘 */
      .flow-step .flow-icon{ transition:transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease, border-color 200ms ease; }
      .flow-step:hover .flow-icon{ transform:translateY(-5px); box-shadow:0 9px 0 0 var(--tb-hairline); border-color:var(--tb-ink); }
      /* 블로그 카드 */
      .blog-card{ transition:transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease; }
      .blog-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-modal-sm); }
      .blog-thumb img{ transition:transform 320ms cubic-bezier(.2,.7,.3,1); }
      .blog-card:hover .blog-thumb img{ transform:scale(1.06); }
      .blog-title{ transition:color 160ms; }
      .blog-card:hover .blog-title{ color:var(--tb-blue); }
      /* 봇 설치 버튼 */
      .install-btn{ transition:transform 160ms ease, filter 160ms ease; }
      .install-btn:hover{ transform:translateY(-2px); filter:brightness(1.12); }
    }

    /* ===== 진입 애니메이션 (Zen Fade Cascade) — html.tb-motion 게이트로 FOUC 방지 ===== */
    html.tb-motion [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
    html.tb-motion [data-reveal].is-visible{ opacity:1; transform:none; }
    /* 카드 그리드 순차 페이드 (opacity만 — hover transform 미간섭) */
    html.tb-motion [data-reveal-stagger] > *{ opacity:0; transition:opacity .55s ease; }
    html.tb-motion [data-reveal-stagger].is-visible > *{ opacity:1; }
    html.tb-motion [data-reveal-stagger].is-visible > *:nth-child(2){ transition-delay:.09s; }
    html.tb-motion [data-reveal-stagger].is-visible > *:nth-child(3){ transition-delay:.18s; }
    html.tb-motion [data-reveal-stagger].is-visible > *:nth-child(4){ transition-delay:.26s; }
    html.tb-motion [data-reveal-stagger].is-visible > *:nth-child(5){ transition-delay:.32s; }

    /* ===== 앰비언트: CLI 코드블록 sheen sweep (Holographic Shimmer 축약) ===== */
    html.tb-motion .code-anim{ position:relative; overflow:hidden; }
    html.tb-motion .code-anim::after{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; pointer-events:none;
      background:linear-gradient(100deg, transparent 0%, rgba(95,208,138,0.10) 44%, rgba(255,255,255,0.15) 50%, rgba(95,208,138,0.10) 56%, transparent 100%);
      transform:skewX(-18deg); animation:tb-sheen 7s ease-in-out infinite; }
    @keyframes tb-sheen{ 0%,72%{ left:-60%; } 90%,100%{ left:130%; } }

    /* ===== 앰비언트: 대형 CTA 소프트 글로우 브리딩 (Pulsing Glow 축약) ===== */
    html.tb-motion .btn-lg.btn-primary{ animation:tb-cta-glow 3.2s ease-in-out infinite; }
    @keyframes tb-cta-glow{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,241,0,0); } 50%{ box-shadow:0 6px 22px -4px rgba(255,241,0,0.55); } }

    /* ===== 마이크로 인터랙션 (hover) ===== */
    @media (hover:hover){
      .btn i.ri-arrow-right-line, a i.ri-arrow-right-line{ transition:transform 180ms ease; }
      .btn:hover i.ri-arrow-right-line, a:hover i.ri-arrow-right-line{ transform:translateX(3px); }
      .nav-links a{ position:relative; }
      .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--tb-ink); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform 200ms cubic-bezier(.2,.7,.3,1); }
      .nav-links a:hover::after{ transform:scaleX(1); }
    }

    /* ===== 접근성: 모션 최소화 시 전부 정적으로 ===== */
    @media (prefers-reduced-motion: reduce){
      html.tb-motion [data-reveal], html.tb-motion [data-reveal].is-visible,
      html.tb-motion [data-reveal-stagger] > *, html.tb-motion [data-reveal-stagger].is-visible > *{ opacity:1 !important; transform:none !important; transition:none !important; }
      html.tb-motion .code-anim::after, html.tb-motion .btn-lg.btn-primary{ animation:none !important; }
      .btn:hover i.ri-arrow-right-line, a:hover i.ri-arrow-right-line, .nav-links a:hover::after{ transform:none !important; }
    }