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

.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
}

:root {
      --bg: #080C14;
      --bg-card: #0F1623;
      --bg-elevated: #161E2E;
      --border: #1E293B;
      --border-sub: #162032;
      --accent: #3B82F6;
      --accent-light: #60A5FA;
      --accent-dim: #1D3A6B;
      --accent-glow: rgba(59, 130, 246, 0.14);
      --teal: #14B8A6;
      --teal-dim: #0D3B35;
      --success: #22C55E;
      --warning: #F59E0B;
      --text-primary: #F1F5F9;
      --text-sec: #94A3B8;
      --text-muted: #475569;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 20px;
      --radius-2xl: 28px
}

html {
      scroll-behavior: smooth
}

body {
      background: var(--bg);
      color: var(--text-primary);
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased
}

a {
      color: inherit;
      text-decoration: none
}

img {
      display: block;
      max-width: 100%;
      height: auto
}

.container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px
}

.section {
      padding: 96px 0
}

nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(8, 12, 20, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border)
}

.nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px
}

.logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.4px
}

.logo-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #1D4ED8, #3B82F6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px
}

.logo span {
      color: var(--accent-light)
}

.nav-links {
      display: flex;
      align-items: center;
      gap: 32px
}

.nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-sec);
      transition: color .2s
}

.nav-links a:hover {
      color: var(--text-primary)
}

.nav-cta {
      background: var(--accent);
      color: #fff !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      padding: 9px 20px;
      border-radius: var(--radius-lg);
      transition: background .2s, transform .15s
}

.nav-cta:hover {
      background: #2563EB;
      transform: translateY(-1px)
}

.hamburger {
      display: none;
      background: 0 0;
      border: none;
      cursor: pointer;
      color: var(--text-sec)
}

.hero {
      padding: 120px 0 96px;
      text-align: center;
      position: relative;
      overflow: hidden
}

.hero::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none
}

.hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--accent-glow);
      border: 1px solid var(--accent-dim);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-light);
      margin-bottom: 28px
}

.hero-badge .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success)
}

h1 {
      font-size: clamp(38px, 6vw, 68px);
      font-weight: 800;
      letter-spacing: -1.5px;
      line-height: 1.08;
      color: var(--text-primary);
      margin-bottom: 24px
}

h1 .accent {
      color: var(--accent-light)
}

h1 .teal {
      color: var(--teal)
}

.hero-sub {
      font-size: clamp(16px, 2.2vw, 20px);
      color: var(--text-sec);
      max-width: 600px;
      margin: 0 auto 44px;
      line-height: 1.6
}

.hero-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap
}

.btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--accent);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      padding: 15px 32px;
      border-radius: var(--radius-xl);
      border: none;
      cursor: pointer;
      transition: background .2s, transform .15s;
      box-shadow: 0 0 32px rgba(59, 130, 246, 0.3)
}

.btn-primary:hover {
      background: #2563EB;
      transform: translateY(-2px)
}

.btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--bg-elevated);
      color: var(--text-primary);
      font-size: 16px;
      font-weight: 600;
      padding: 15px 28px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: border-color .2s, transform .15s
}

.btn-secondary:hover {
      border-color: var(--accent);
      transform: translateY(-2px)
}

.hero-social {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 56px;
      flex-wrap: wrap
}

.social-stat {
      text-align: center
}

.social-stat strong {
      display: block;
      font-size: 22px;
      font-weight: 800;
      color: var(--text-primary)
}

.social-stat span {
      font-size: 12px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .8px
}

.social-divider {
      width: 1px;
      height: 36px;
      background: var(--border)
}

.stores {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 40px;
      flex-wrap: wrap
}

.store-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 11px 20px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      transition: border-color .2s, transform .15s
}

.store-btn:hover {
      border-color: var(--accent);
      transform: translateY(-2px)
}

.store-btn svg {
      flex-shrink: 0
}

.phone-wrap {
      position: relative;
      margin: 72px auto 0;
      max-width: 320px
}

.phone-frame {
      background: var(--bg-card);
      border: 1.5px solid var(--border);
      border-radius: 36px;
      padding: 12px;
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset
}

.phone-screen {
      background: var(--bg);
      border-radius: 26px;
      overflow: hidden;
      position: relative
}

.phone-notch {
      width: 88px;
      height: 26px;
      background: var(--bg-card);
      border-radius: 0 0 16px 16px;
      margin: 0 auto 12px
}

.phone-ui {
      padding: 0 16px 24px
}

.phone-header {
      font-size: 10px;
      color: var(--text-muted);
      margin-bottom: 4px
}

.phone-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.4px;
      color: var(--text-primary);
      margin-bottom: 16px
}

.phone-card {
      background: var(--bg-card);
      border: 1px solid var(--border-sub);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 10px
}

.phone-card-top {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px
}

.phone-avatar {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0
}

.phone-card-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary)
}

.phone-card-sub {
      font-size: 10px;
      color: var(--text-muted)
}

.phone-card-amount {
      margin-left: auto;
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary)
}

.phone-pill {
      display: inline-block;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 9px;
      font-weight: 700
}

.phone-progress {
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin-top: 8px
}

.phone-progress-fill {
      height: 100%;
      border-radius: 2px
}

.phone-fab {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin: 16px auto 0;
      box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4)
}

.glow-ring {
      position: absolute;
      border-radius: 50%;
      pointer-events: none
}

.glow-1 {
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
      top: -80px;
      left: -80px
}

.glow-2 {
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(20, 184, 166, 0.12), transparent 70%);
      bottom: -60px;
      right: -60px
}

.section-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 12px
}

h2 {
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 800;
      letter-spacing: -0.8px;
      line-height: 1.15;
      margin-bottom: 16px
}

.section-sub {
      font-size: 17px;
      color: var(--text-sec);
      max-width: 540px;
      line-height: 1.6
}

.features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;
      margin-top: 56px
}

.feature-card {
      background: var(--bg-card);
      border: 1px solid var(--border-sub);
      border-radius: var(--radius-2xl);
      padding: 32px;
      position: relative;
      overflow: hidden;
      transition: border-color .25s, transform .2s
}

.feature-card:hover {
      border-color: var(--accent-dim);
      transform: translateY(-3px)
}

.feature-card.featured {
      border-color: var(--accent-dim)
}

.feature-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 20px
}

.feature-card h3 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--text-primary)
}

.feature-card p {
      font-size: 14px;
      color: var(--text-sec);
      line-height: 1.65
}

.feature-detail {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border-sub)
}

.feature-detail ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px
}

.feature-detail li {
      font-size: 13px;
      color: var(--text-muted);
      display: flex;
      align-items: flex-start;
      gap: 8px
}

.feature-detail li::before {
      content: '✓';
      color: var(--success);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px
}

.feature-tag {
      display: inline-block;
      margin-top: 16px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .5px;
      padding: 4px 10px;
      border-radius: 999px
}

.steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0;
      margin-top: 56px
}

.step {
      padding: 32px 28px;
      position: relative
}

.step:not(:last-child)::after {
      content: '→';
      position: absolute;
      right: -12px;
      top: 44px;
      color: var(--text-muted);
      font-size: 20px
}

.step-num {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--accent-glow);
      border: 1px solid var(--accent-dim);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 800;
      color: var(--accent-light);
      margin-bottom: 16px
}

.step h3 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px
}

.step p {
      font-size: 14px;
      color: var(--text-sec);
      line-height: 1.6
}

.split-showcase {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 48px
}

.split-card {
      background: var(--bg-card);
      border: 1.5px solid var(--border-sub);
      border-radius: 18px;
      padding: 24px;
      text-align: center;
      transition: border-color .2s, transform .2s
}

.split-card:hover {
      border-color: var(--accent-dim);
      transform: translateY(-3px)
}

.split-card.active {
      border-color: var(--accent);
      background: var(--accent-glow)
}

.split-icon {
      font-size: 28px;
      margin-bottom: 12px
}

.split-card h4 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 6px
}

.split-card p {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5
}

.split-section {
      background: var(--bg-card);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border)
}

.split-example {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border)
}

.compare-section {
      padding: 96px 0
}

.compare-table {
      margin-top: 48px;
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      overflow: hidden
}

.compare-row {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      align-items: center;
      border-bottom: 1px solid var(--border-sub)
}

.compare-row:last-child {
      border-bottom: none
}

.compare-row.header {
      background: var(--bg-elevated);
      font-weight: 700;
      font-size: 13px;
      color: var(--text-sec);
      text-transform: uppercase;
      letter-spacing: .8px
}

.compare-cell {
      padding: 18px 24px;
      font-size: 14px
}

.compare-cell.feature-name {
      color: var(--text-primary);
      font-weight: 500
}

.compare-cell.center {
      text-align: center
}

.compare-cell.yy {
      background: rgba(59, 130, 246, 0.04)
}

.tick {
      color: var(--success);
      font-size: 18px
}

.cross {
      color: var(--text-muted);
      font-size: 16px
}

.compare-app-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--accent-light)
}

.testimonials-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 56px
}

.tcard {
      background: var(--bg-card);
      border: 1px solid var(--border-sub);
      border-radius: 20px;
      padding: 28px
}

.tcard-stars {
      color: var(--warning);
      font-size: 14px;
      margin-bottom: 12px
}

.tcard p {
      font-size: 14px;
      color: var(--text-sec);
      line-height: 1.65;
      margin-bottom: 20px;
      font-style: italic
}

.tcard-author {
      display: flex;
      align-items: center;
      gap: 12px
}

.tcard-avatar {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #fff
}

.tcard-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary)
}

.tcard-from {
      font-size: 11px;
      color: var(--text-muted)
}

.cta-banner {
      background: var(--bg-card);
      border: 1px solid var(--accent-dim);
      border-radius: var(--radius-2xl);
      padding: 64px 48px;
      text-align: center;
      position: relative;
      overflow: hidden
}

.cta-banner::before {
      content: '';
      position: absolute;
      top: -80px;
      left: 50%;
      transform: translateX(-50%);
      width: 600px;
      height: 300px;
      background: radial-gradient(ellipse, rgba(59, 130, 246, 0.18), transparent 70%);
      pointer-events: none
}

.cta-banner h2 {
      margin-bottom: 14px
}

.cta-banner p {
      font-size: 16px;
      color: var(--text-sec);
      margin-bottom: 36px
}

footer {
      border-top: 1px solid var(--border);
      padding: 56px 0 40px
}

.footer-inner {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px
}

.footer-brand .logo {
      margin-bottom: 14px
}

.footer-brand p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.65;
      max-width: 260px
}

.footer-meta {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 12px;
      line-height: 1.6
}

.footer-col h4 {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 16px;
      letter-spacing: .3px
}

.footer-col a {
      display: block;
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 10px;
      transition: color .15s
}

.footer-col a:hover {
      color: var(--accent-light)
}

.footer-bottom {
      border-top: 1px solid var(--border);
      margin-top: 48px;
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px
}

.footer-bottom p {
      font-size: 12px;
      color: var(--text-muted)
}

.footer-socials {
      display: flex;
      gap: 14px
}

.footer-socials a {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      transition: border-color .15s
}

.footer-socials a:hover {
      border-color: var(--accent)
}

.faq-grid {
      display: grid;
      gap: 12px;
      margin-top: 48px
}

.faq-item {
      background: var(--bg-card);
      border: 1px solid var(--border-sub);
      border-radius: var(--radius-lg);
      overflow: hidden
}

.faq-question {
      width: 100%;
      text-align: left;
      padding: 20px 24px;
      background: 0 0;
      border: none;
      color: var(--text-primary);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background .2s
}

.faq-question:hover {
      background: rgba(59, 130, 246, 0.05)
}

.faq-icon {
      font-size: 20px;
      transition: transform .3s
}

.faq-item.active .faq-icon {
      transform: rotate(180deg)
}

.faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease
}

.faq-item.active .faq-answer {
      max-height: 300px
}

.faq-answer p {
      padding: 0 24px 20px;
      font-size: 14px;
      color: var(--text-sec);
      line-height: 1.7
}

.sticky-cta {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .3s, transform .3s;
      pointer-events: none
}

.sticky-cta.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all
}

.sticky-cta .btn-primary {
      box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4)
}

                        .page-hero {
                              position: relative;
                              padding: 100px 0 60px;
                              text-align: center;
                              overflow: hidden;
                        }

                        .page-hero::before {
                              content: '';
                              position: absolute;
                              inset: 0;
                              pointer-events: none
                        }

                        .breadcrumb-sep {
                              color: var(--border)
                        }

                        h1 {
                              font-size: clamp(32px, 5vw, 56px);
                              font-weight: 800;
                              letter-spacing: -1.2px;
                              line-height: 1.1;
                              color: var(--text-primary);
                              margin-bottom: 20px
                        }

                        .page-hero-sub {
                              font-size: clamp(15px, 2vw, 18px);
                              color: var(--text-sec);
                              max-width: 560px;
                              margin: 0 auto;
                              line-height: 1.6
                        }

                        .section-sub {
                              font-size: 16px;
                              color: var(--text-sec);
                              max-width: 520px;
                              line-height: 1.65
                        }

                        .steps-detailed {
                              display: flex;
                              flex-direction: column;
                              gap: 0;
                              margin-top: 64px;
                              position: relative
                        }

                        .steps-detailed::before {
                              content: '';
                              position: absolute;
                              left: 28px;
                              top: 56px;
                              bottom: 56px;
                              width: 2px;
                              background: linear-gradient(to bottom, var(--accent-dim), rgba(30, 41, 59, 0));
                              z-index: 0
                        }

                        .step-detailed {
                              display: grid;
                              grid-template-columns: 56px 1fr;
                              gap: 40px;
                              padding: 0 0 64px;
                              position: relative;
                              opacity: 0;
                              transform: translateX(-20px);
                              transition: opacity .5s ease, transform .5s ease
                        }

                        .step-detailed.visible {
                              opacity: 1;
                              transform: translateX(0)
                        }

                        .step-detailed:last-child {
                              padding-bottom: 0
                        }

                        .step-left {
                              display: flex;
                              flex-direction: column;
                              align-items: center;
                              gap: 0;
                              position: relative;
                              z-index: 1
                        }

                        .step-num {
                              width: 56px;
                              height: 56px;
                              border-radius: 16px;
                              background: var(--accent-glow);
                              border: 2px solid var(--accent-dim);
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              font-size: 20px;
                              font-weight: 800;
                              color: var(--accent-light);
                              flex-shrink: 0;
                              transition: background .3s, border-color .3s, transform .3s, box-shadow .3s
                        }

                        .step-detailed:hover .step-num {
                              background: var(--accent-dim);
                              border-color: var(--accent);
                              transform: scale(1.05);
                              box-shadow: 0 0 20px var(--accent-glow);
                        }

                        .step-detailed.visible .step-num {
                              background: var(--accent-dim);
                              border-color: var(--accent)
                        }

                        .step-right {
                              padding-top: 10px
                        }

                        .step-right h3 {
                              font-size: 22px;
                              font-weight: 700;
                              color: var(--text-primary);
                              margin-bottom: 12px
                        }

                        .step-right p {
                              font-size: 15px;
                              color: var(--text-sec);
                              line-height: 1.7;
                              max-width: 600px;
                              margin-bottom: 24px
                        }

                        .step-detail-card {
                              background: var(--bg-card);
                              border: 1px solid var(--border-sub);
                              border-radius: var(--radius-xl);
                              padding: 28px;
                              display: grid;
                              grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                              gap: 16px;
                              transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
                        }

                        .step-detail-card:hover {
                              transform: translateY(-5px);
                              border-color: var(--accent-dim);
                              box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                        }

                        .detail-point {
                              display: flex;
                              flex-direction: column;
                              gap: 6px
                        }

                        .detail-point-icon {
                              font-size: 22px
                        }

                        .detail-point-title {
                              font-size: 13px;
                              font-weight: 700;
                              color: var(--text-primary)
                        }

                        .detail-point-desc {
                              font-size: 12px;
                              color: var(--text-muted);
                              line-height: 1.5
                        }

                        .tips-section {
                              background: var(--bg-card);
                              border-top: 1px solid var(--border);
                              border-bottom: 1px solid var(--border)
                        }

                        .tips-grid {
                              display: grid;
                              grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                              gap: 20px;
                              margin-top: 48px
                        }

                        .tip-card {
                              background: var(--bg);
                              border: 1px solid var(--border-sub);
                              border-radius: var(--radius-xl);
                              padding: 28px;
                              transition: border-color .2s, transform .2s;
                              opacity: 0;
                              transform: translateY(16px)
                        }

                        .tip-card.visible {
                              opacity: 1;
                              transform: translateY(0)
                        }

                        .tip-card:hover {
                              border-color: var(--accent-dim);
                              transform: translateY(-3px)
                        }

                        .tip-icon {
                              font-size: 28px;
                              margin-bottom: 14px
                        }

                        .tip-card h3 {
                              font-size: 16px;
                              font-weight: 700;
                              color: var(--text-primary);
                              margin-bottom: 8px
                        }

                        .tip-card p {
                              font-size: 13px;
                              color: var(--text-sec);
                              line-height: 1.65
                        }

                        .video-placeholder {
                              margin-top: 64px;
                              background: var(--bg-card);
                              border: 1px dashed var(--border);
                              border-radius: var(--radius-2xl);
                              padding: 80px 40px;
                              text-align: center;
                              position: relative;
                              overflow: hidden
                        }

                        .video-placeholder::before {
                              content: '';
                              position: absolute;
                              inset: 0;
                              background: radial-gradient(ellipse 400px 300px at 50% 50%, rgba(59, 130, 246, 0.06), transparent);
                              pointer-events: none
                        }

                        .play-btn {
                              width: 72px;
                              height: 72px;
                              border-radius: 50%;
                              background: var(--accent);
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              margin: 0 auto 20px;
                              box-shadow: 0 0 40px rgba(59, 130, 246, 0.4);
                              cursor: pointer
                        }

                        .play-btn svg {
                              margin-left: 4px
                        }

                                          .faq-search-wrap {
                                                margin: 40px auto 0;
                                                max-width: 520px;
                                                position: relative
                                          }

                                          .faq-search {
                                                width: 100%;
                                                padding: 16px 48px 16px 20px;
                                                background: var(--bg-card);
                                                border: 1px solid var(--border);
                                                border-radius: var(--radius-xl);
                                                font-size: 15px;
                                                color: var(--text-primary);
                                                font-family: inherit;
                                                outline: none;
                                                transition: border-color .2s
                                          }

                                          .faq-search::placeholder {
                                                color: var(--text-muted)
                                          }

                                          .faq-search:focus {
                                                border-color: var(--accent)
                                          }

                                          .search-icon {
                                                position: absolute;
                                                right: 18px;
                                                top: 50%;
                                                transform: translateY(-50%);
                                                color: var(--text-muted);
                                                pointer-events: none
                                          }

                                          .faq-categories {
                                                display: flex;
                                                align-items: center;
                                                gap: 10px;
                                                margin-top: 32px;
                                                flex-wrap: wrap;
                                                justify-content: center
                                          }

                                          .cat-btn {
                                                padding: 8px 18px;
                                                border-radius: 999px;
                                                border: 1px solid var(--border);
                                                background: transparent;
                                                color: var(--text-muted);
                                                font-size: 13px;
                                                font-weight: 600;
                                                cursor: pointer;
                                                transition: all .2s;
                                                font-family: inherit
                                          }

                                          .cat-btn:hover,
                                          .cat-btn.active {
                                                background: var(--accent-glow);
                                                border-color: var(--accent);
                                                color: var(--accent-light)
                                          }

                                          .faq-main {
                                                display: grid;
                                                grid-template-columns: 1fr 320px;
                                                gap: 48px;
                                                margin-top: 64px;
                                                align-items: start
                                          }

                                          .faq-grid {
                                                display: flex;
                                                flex-direction: column;
                                                gap: 10px
                                          }

                                          .faq-item {
                                                background: var(--bg-card);
                                                border: 1px solid var(--border-sub);
                                                border-radius: var(--radius-lg);
                                                overflow: hidden;
                                                transition: border-color .2s
                                          }

                                          .faq-item:hover {
                                                border-color: var(--accent-dim)
                                          }

                                          .faq-item.active {
                                                border-color: var(--accent-dim)
                                          }

                                          .faq-question {
                                                width: 100%;
                                                text-align: left;
                                                padding: 20px 24px;
                                                background: 0 0;
                                                border: none;
                                                color: var(--text-primary);
                                                font-size: 16px;
                                                font-weight: 600;
                                                cursor: pointer;
                                                display: flex;
                                                align-items: center;
                                                justify-content: space-between;
                                                gap: 12px;
                                                transition: background .2s;
                                                font-family: inherit
                                          }

                                          .faq-icon {
                                                font-size: 20px;
                                                transition: transform .3s;
                                                flex-shrink: 0;
                                                color: var(--text-muted)
                                          }

                                          .faq-item.active .faq-icon {
                                                transform: rotate(180deg);
                                                color: var(--accent-light)
                                          }

                                          .faq-answer {
                                                max-height: 0;
                                                overflow: hidden;
                                                transition: max-height .35s ease
                                          }

                                          .faq-item.active .faq-answer {
                                                max-height: 400px
                                          }

                                          .faq-answer p {
                                                padding: 0 24px 20px;
                                                font-size: 14px;
                                                color: var(--text-sec);
                                                line-height: 1.75
                                          }

                                          .faq-no-results {
                                                display: none;
                                                padding: 40px;
                                                text-align: center;
                                                color: var(--text-muted);
                                                font-size: 15px
                                          }

                                          .faq-sidebar {
                                                position: sticky;
                                                top: 84px
                                          }

                                          .sidebar-card {
                                                background: var(--bg-card);
                                                border: 1px solid var(--border-sub);
                                                border-radius: var(--radius-xl);
                                                padding: 28px;
                                                margin-bottom: 16px
                                          }

                                          .sidebar-card h3 {
                                                font-size: 15px;
                                                font-weight: 700;
                                                color: var(--text-primary);
                                                margin-bottom: 16px
                                          }

                                          .sidebar-card p {
                                                font-size: 13px;
                                                color: var(--text-sec);
                                                line-height: 1.65;
                                                margin-bottom: 16px
                                          }

                                          .sidebar-links {
                                                display: flex;
                                                flex-direction: column;
                                                gap: 8px
                                          }

                                          .sidebar-link {
                                                display: flex;
                                                align-items: center;
                                                gap: 10px;
                                                font-size: 13px;
                                                color: var(--text-sec);
                                                padding: 10px 14px;
                                                border-radius: var(--radius-md);
                                                border: 1px solid var(--border-sub);
                                                transition: all .2s
                                          }

                                          .sidebar-link:hover {
                                                color: var(--accent-light);
                                                border-color: var(--accent-dim);
                                                background: var(--accent-glow)
                                          }

                                          .sidebar-link-icon {
                                                font-size: 16px;
                                                flex-shrink: 0
                                          }

                                          .contact-btn {
                                                display: flex;
                                                align-items: center;
                                                justify-content: center;
                                                gap: 8px;
                                                width: 100%;
                                                padding: 12px;
                                                background: var(--accent);
                                                color: #fff;
                                                font-size: 14px;
                                                font-weight: 600;
                                                border-radius: var(--radius-lg);
                                                border: none;
                                                cursor: pointer;
                                                font-family: inherit;
                                                transition: background .2s;
                                                text-decoration: none
                                          }

                                          .contact-btn:hover {
                                                background: #2563EB
                                          }

                                          .cta-section {
                                                background: var(--bg-card);
                                                border-top: 1px solid var(--border)
                                          }

                                          .cta-banner {
                                                border: 1px solid var(--accent-dim);
                                                border-radius: var(--radius-2xl);
                                                padding: 64px 48px;
                                                text-align: center;
                                                position: relative;
                                                overflow: hidden
                                          }

                                                .policy-content {
                                                      padding: 80px 0
                                                }

                                                h1 {
                                                      font-size: clamp(32px, 5vw, 48px);
                                                      font-weight: 800;
                                                      letter-spacing: -1.2px;
                                                      margin-bottom: 24px;
                                                      text-align: center
                                                }

                                                .last-updated {
                                                      text-align: center;
                                                      color: var(--text-muted);
                                                      font-size: 14px;
                                                      margin-bottom: 48px
                                                }

                                                h2 {
                                                      font-size: 24px;
                                                      font-weight: 800;
                                                      margin: 40px 0 20px;
                                                      color: var(--text-primary);
                                                      border-left: 4px solid var(--accent);
                                                      padding-left: 16px
                                                }

                                                h3 {
                                                      font-size: 18px;
                                                      font-weight: 700;
                                                      margin: 24px 0 12px;
                                                      color: var(--text-primary)
                                                }

                                                p {
                                                      margin-bottom: 20px;
                                                      color: var(--text-sec)
                                                }

                                                ul {
                                                      margin-bottom: 24px;
                                                      padding-left: 20px;
                                                      color: var(--text-sec)
                                                }

                                                li {
                                                      margin-bottom: 10px
                                                }

                                                .important-notice {
                                                      background: var(--accent-glow);
                                                      border: 1px solid var(--accent-dim);
                                                      border-radius: var(--radius-lg);
                                                      padding: 24px;
                                                      margin: 32px 0
                                                }

                                                .important-notice p {
                                                      color: var(--text-primary);
                                                      margin-bottom: 0;
                                                      font-weight: 600
                                                }

                                                .deletion-box {
                                                      background: rgba(239, 68, 68, 0.1);
                                                      border: 1px solid rgba(239, 68, 68, 0.2);
                                                      border-radius: var(--radius-lg);
                                                      padding: 24px;
                                                      margin: 32px 0
                                                }

                                                .deletion-box h3 {
                                                      color: #F87171;
                                                      margin-top: 0
                                                }

                                                body {
                                                      background: var(--bg);
                                                      color: var(--text-primary);
                                                      font-family: 'Inter', system-ui, sans-serif;
                                                      font-size: 16px;
                                                      line-height: 1.7;
                                                      -webkit-font-smoothing: antialiased
                                                }

                                                .logo {
                                                      display: flex;
                                                      align-items: center;
                                                      gap: 12px;
                                                      font-size: 22px;
                                                      font-weight: 800;
                                                      text-decoration: none;
                                                      color: inherit
                                                }

                                                .logo-icon {
                                                      width: 36px;
                                                      height: 36px;
                                                      border-radius: 10px;
                                                      background: transparent !important;
                                                      display: flex;
                                                      align-items: center;
                                                      justify-content: center;
                                                      border: 1px solid rgba(255, 255, 255, 0.1)
                                                }

                                                .page-header {
                                                      padding: 80px 0 48px;
                                                      text-align: center;
                                                      border-bottom: 1px solid var(--border)
                                                }

                                                h1 {
                                                      font-size: 42px;
                                                      font-weight: 800;
                                                      letter-spacing: -1px;
                                                      margin-bottom: 16px
                                                }

                                                .last-updated {
                                                      font-size: 14px;
                                                      color: var(--text-muted)
                                                }

                                                .content-section {
                                                      padding: 64px 0
                                                }

                                                .legal-content h2 {
                                                      font-size: 24px;
                                                      font-weight: 700;
                                                      margin: 40px 0 20px;
                                                      color: var(--text-primary)
                                                }

                                                .legal-content p {
                                                      margin-bottom: 20px;
                                                      color: var(--text-sec)
                                                }

                                                .legal-content ul {
                                                      margin-bottom: 24px;
                                                      padding-left: 20px
                                                }

                                                .legal-content li {
                                                      margin-bottom: 12px;
                                                      color: var(--text-sec)
                                                }

                                                .legal-content strong {
                                                      color: var(--text-primary)
                                                }

                                                .alert-box {
                                                      background: var(--accent-glow);
                                                      border: 1px solid var(--accent-dim);
                                                      border-radius: var(--radius-lg);
                                                      padding: 24px;
                                                      margin: 32px 0
                                                }

                                                .alert-box p {
                                                      margin-bottom: 0;
                                                      font-size: 15px;
                                                      color: var(--accent-light);
                                                      font-weight: 500
                                                }

                                                .footer-col a {
                                                      display: block;
                                                      font-size: 13px;
                                                      color: var(--text-muted);
                                                      margin-bottom: 10px;
                                                      text-decoration: none;
                                                      transition: color .15s
                                                }

                                                .footer-bottom {
                                                      border-top: 1px solid var(--border);
                                                      margin-top: 48px;
                                                      padding-top: 24px;
                                                      display: flex;
                                                      align-items: center;
                                                      justify-content: space-between;
                                                      font-size: 12px;
                                                      color: var(--text-muted)
                                                }

                                                      .deletion-card {
                                                            background: var(--bg-card);
                                                            border: 1px solid var(--border-sub);
                                                            border-radius: var(--radius-2xl);
                                                            padding: 48px;
                                                            margin-bottom: 64px
                                                      }

                                                      .method {
                                                            margin-bottom: 40px
                                                      }

                                                      .method-number {
                                                            display: inline-block;
                                                            width: 32px;
                                                            height: 32px;
                                                            background: var(--accent);
                                                            color: #fff;
                                                            border-radius: 50%;
                                                            text-align: center;
                                                            line-height: 32px;
                                                            font-weight: 700;
                                                            margin-bottom: 16px
                                                      }

                                                      .method h2 {
                                                            font-size: 22px;
                                                            font-weight: 800;
                                                            margin-bottom: 12px;
                                                            color: var(--text-primary)
                                                      }

                                                      .method p {
                                                            color: var(--text-sec);
                                                            font-size: 16px;
                                                            line-height: 1.7
                                                      }

                                                      .method strong {
                                                            color: var(--text-primary)
                                                      }

                                                      .after-deletion {
                                                            background: rgba(59, 130, 246, 0.05);
                                                            border: 1px solid var(--accent-dim);
                                                            border-radius: var(--radius-lg);
                                                            padding: 24px
                                                      }

                                                      .after-deletion h3 {
                                                            font-size: 18px;
                                                            font-weight: 700;
                                                            margin-bottom: 12px;
                                                            color: var(--accent-light)
                                                      }

                                                      .after-deletion p {
                                                            font-size: 15px;
                                                            color: var(--text-sec);
                                                            margin-bottom: 0
                                                      }

                                                      .blog-grid {
                                                            display: grid;
                                                            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
                                                            gap: 24px;
                                                            margin: 60px 0 100px;
                                                      }

                                                      .blog-card {
                                                            background: var(--bg-card);
                                                            border: 1px solid var(--border-sub);
                                                            border-radius: var(--radius-2xl);
                                                            overflow: hidden;
                                                            transition: transform 0.2s, border-color 0.2s;
                                                            display: flex;
                                                            flex-direction: column;
                                                      }

                                                      .blog-card:hover {
                                                            transform: translateY(-6px);
                                                            border-color: var(--accent-dim);
                                                      }

                                                      .blog-card-img {
                                                            height: 240px;
                                                            background: url('/blog/assets/blog-split-expenses.png');
                                                            background-size: cover;
                                                            background-position: center;
                                                            position: relative;
                                                      }

                                                      .blog-card-img::after {
                                                            content: '';
                                                            position: absolute;
                                                            inset: 0;
                                                            background: linear-gradient(to top, rgba(8, 12, 20, 0.4), transparent);
                                                      }

                                                      .blog-card-content {
                                                            padding: 32px;
                                                            flex-grow: 1;
                                                            display: flex;
                                                            flex-direction: column;
                                                      }

                                                      .blog-tag {
                                                            font-size: 11px;
                                                            font-weight: 700;
                                                            color: var(--accent-light);
                                                            text-transform: uppercase;
                                                            letter-spacing: 1px;
                                                            margin-bottom: 12px;
                                                      }

                                                      .blog-card h2 {
                                                            font-family: 'Outfit', sans-serif;
                                                            font-size: 22px;
                                                            font-weight: 700;
                                                            margin-bottom: 16px;
                                                            line-height: 1.3;
                                                      }

                                                      .blog-card p {
                                                            font-size: 14px;
                                                            color: var(--text-sec);
                                                            margin-bottom: 24px;
                                                            flex-grow: 1;
                                                      }

                                                      .blog-footer {
                                                            display: flex;
                                                            align-items: center;
                                                            justify-content: space-between;
                                                            font-size: 12px;
                                                            color: var(--text-muted);
                                                            padding-top: 20px;
                                                            border-top: 1px solid var(--border-sub);
                                                      }


                                                            html {
                                                                  scroll-behavior: smooth;
                                                            }

                                                            body {
                                                                  background: var(--bg);
                                                                  color: var(--text-primary);
                                                                  font-family: 'Inter', system-ui, sans-serif;
                                                                  font-size: 17px;
                                                                  line-height: 1.7;
                                                                  -webkit-font-smoothing: antialiased;
                                                            }

                                                            a {
                                                                  color: inherit;
                                                                  text-decoration: none;
                                                                  transition: color 0.2s;
                                                            }

                                                            .hero {
                                                                  padding: 120px 0 80px;
                                                                  text-align: center;
                                                                  position: relative;
                                                                  overflow: hidden;
                                                            }

                                                            .hero::before {
                                                                  content: '';
                                                                  position: absolute;
                                                                  inset: 0;
                                                                  pointer-events: none;
                                                            }

                                                            .breadcrumb {
                                                                  display: inline-flex;
                                                                  align-items: center;
                                                                  gap: 8px;
                                                                  font-size: 13px;
                                                                  font-weight: 600;
                                                                  color: var(--accent-light);
                                                                  text-transform: uppercase;
                                                                  letter-spacing: 1px;
                                                                  margin-bottom: 24px;
                                                            }

                                                            h1 {
                                                                  font-family: 'Outfit', sans-serif;
                                                                  font-size: clamp(32px, 5vw, 52px);
                                                                  font-weight: 800;
                                                                  line-height: 1.2;
                                                                  letter-spacing: -1px;
                                                                  margin-bottom: 24px;
                                                                  background: linear-gradient(to bottom, #fff, #94A3B8);
                                                                  -webkit-background-clip: text;
                                                                  -webkit-text-fill-color: transparent;
                                                            }

                                                            .meta-row {
                                                                  display: flex;
                                                                  align-items: center;
                                                                  justify-content: center;
                                                                  gap: 16px;
                                                                  font-size: 14px;
                                                                  color: var(--text-muted);
                                                                  margin-bottom: 40px;
                                                            }

                                                            .meta-row span {
                                                                  display: flex;
                                                                  align-items: center;
                                                                  gap: 6px;
                                                            }

                                                            .meta-row .dot {
                                                                  width: 4px;
                                                                  height: 4px;
                                                                  border-radius: 50%;
                                                                  background: var(--text-muted);
                                                            }

                                                            .article-wrap {
                                                                  padding-bottom: 100px;
                                                                  max-width: 800px;
                                                                  margin: 0 auto;
                                                            }

                                                            .intro {
                                                                  font-size: 20px;
                                                                  line-height: 1.6;
                                                                  color: var(--text-sec);
                                                                  margin-bottom: 48px;
                                                            }

                                                            h2 {
                                                                  font-family: 'Outfit', sans-serif;
                                                                  font-size: 32px;
                                                                  font-weight: 700;
                                                                  margin: 56px 0 24px;
                                                                  color: var(--text-primary);
                                                                  letter-spacing: -0.5px;
                                                            }

                                                            h3 {
                                                                  font-family: 'Outfit', sans-serif;
                                                                  font-size: 24px;
                                                                  font-weight: 700;
                                                                  margin: 32px 0 16px;
                                                                  color: var(--text-primary);
                                                            }

                                                            p {
                                                                  margin-bottom: 24px;
                                                            }

                                                            ul,
                                                            ol {
                                                                  margin-bottom: 24px;
                                                                  padding-left: 20px;
                                                            }

                                                            li {
                                                                  margin-bottom: 12px;
                                                                  color: var(--text-sec);
                                                            }

                                                            strong {
                                                                  color: var(--text-primary);
                                                            }

                                                            .callout {
                                                                  background: var(--bg-card);
                                                                  border: 1px solid var(--border-sub);
                                                                  border-radius: var(--radius-xl);
                                                                  padding: 32px;
                                                                  margin: 40px 0;
                                                                  position: relative;
                                                            }

                                                            .callout-label {
                                                                  position: absolute;
                                                                  top: -12px;
                                                                  left: 32px;
                                                                  background: var(--bg-elevated);
                                                                  border: 1px solid var(--border);
                                                                  padding: 4px 12px;
                                                                  border-radius: 999px;
                                                                  font-size: 12px;
                                                                  font-weight: 700;
                                                                  color: var(--accent-light);
                                                                  text-transform: uppercase;
                                                                  letter-spacing: 0.5px;
                                                            }

                                                            .callout p:last-child {
                                                                  margin-bottom: 0;
                                                            }

                                                            .warning-box {
                                                                  border-color: rgba(239, 68, 68, 0.2);
                                                                  background: rgba(239, 68, 68, 0.05);
                                                            }

                                                            .warning-box .callout-label {
                                                                  color: #F87171;
                                                                  border-color: rgba(239, 68, 68, 0.3);
                                                            }

                                                            .success-box {
                                                                  border-color: rgba(34, 197, 94, 0.2);
                                                                  background: rgba(34, 197, 94, 0.05);
                                                            }

                                                            .success-box .callout-label {
                                                                  color: var(--success);
                                                                  border-color: rgba(34, 197, 94, 0.3);
                                                            }

                                                            .method-grid {
                                                                  display: grid;
                                                                  grid-template-columns: 1fr;
                                                                  gap: 24px;
                                                                  margin: 40px 0;
                                                            }

                                                            .method-card {
                                                                  background: var(--bg-card);
                                                                  border: 1px solid var(--border-sub);
                                                                  border-radius: var(--radius-xl);
                                                                  padding: 32px;
                                                                  transition: border-color 0.2s, transform 0.2s;
                                                            }

                                                            .method-card:hover {
                                                                  border-color: var(--accent-dim);
                                                                  transform: translateY(-4px);
                                                            }

                                                            .method-card h3 {
                                                                  margin-top: 0;
                                                                  font-size: 22px;
                                                                  display: flex;
                                                                  align-items: center;
                                                                  gap: 12px;
                                                            }

                                                            .method-icon {
                                                                  font-size: 28px;
                                                            }

                                                            .tips-list {
                                                                  list-style: none;
                                                                  padding-left: 0;
                                                            }

                                                            .tips-list li {
                                                                  padding: 16px 20px;
                                                                  background: var(--bg-card);
                                                                  border: 1px solid var(--border-sub);
                                                                  border-radius: var(--radius-lg);
                                                                  display: flex;
                                                                  align-items: flex-start;
                                                                  gap: 16px;
                                                            }

                                                            .tips-list li::before {
                                                                  content: '🔥';
                                                                  flex-shrink: 0;
                                                            }

                                                            .app-banner {
                                                                  background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
                                                                  border: 1px solid var(--accent-dim);
                                                                  border-radius: var(--radius-2xl);
                                                                  padding: 48px;
                                                                  text-align: center;
                                                                  margin: 64px 0;
                                                                  position: relative;
                                                                  overflow: hidden;
                                                            }

                                                            .app-banner::before {
                                                                  content: '';
                                                                  position: absolute;
                                                                  top: -100px;
                                                                  right: -100px;
                                                                  width: 300px;
                                                                  height: 300px;
                                                                  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
                                                                  pointer-events: none;
                                                            }

                                                            .app-banner h2 {
                                                                  margin-top: 0;
                                                                  margin-bottom: 16px;
                                                            }

                                                            .app-banner p {
                                                                  color: var(--text-sec);
                                                                  margin-bottom: 32px;
                                                                  max-width: 500px;
                                                                  margin-left: auto;
                                                                  margin-right: auto;
                                                            }

                                                            .btn-primary {
                                                                  display: inline-flex;
                                                                  align-items: center;
                                                                  gap: 10px;
                                                                  background: var(--accent);
                                                                  color: #fff;
                                                                  padding: 16px 36px;
                                                                  border-radius: var(--radius-xl);
                                                                  font-weight: 700;
                                                                  font-size: 16px;
                                                                  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
                                                                  transition: transform 0.2s, background 0.2s;
                                                            }

                                                            .btn-primary:hover {
                                                                  background: #2563EB;
                                                                  transform: translateY(-2px);
                                                            }

                                                                        html {
                                                                              scroll-behavior: smooth;
                                                                        }

                                                                        .hero {
                                                                              padding: 120px 0 80px;
                                                                              text-align: center;
                                                                              position: relative;
                                                                              overflow: hidden;
                                                                        }

                                                                        .breadcrumb {
                                                                              display: inline-flex;
                                                                              align-items: center;
                                                                              gap: 8px;
                                                                              font-size: 13px;
                                                                              font-weight: 600;
                                                                              color: var(--accent-light);
                                                                              text-transform: uppercase;
                                                                              letter-spacing: 1px;
                                                                              margin-bottom: 24px;
                                                                        }

                                                                        h1 {
                                                                              font-family: 'Outfit', sans-serif;
                                                                              font-size: clamp(32px, 5vw, 52px);
                                                                              font-weight: 800;
                                                                              line-height: 1.2;
                                                                              letter-spacing: -1px;
                                                                              margin-bottom: 24px;
                                                                              background: linear-gradient(to bottom, #fff, #94A3B8);
                                                                              -webkit-background-clip: text;
                                                                              -webkit-text-fill-color: transparent;
                                                                        }

                                                                        .meta-row {
                                                                              display: flex;
                                                                              align-items: center;
                                                                              justify-content: center;
                                                                              gap: 16px;
                                                                              font-size: 14px;
                                                                              color: var(--text-muted);
                                                                              margin-bottom: 40px;
                                                                        }

                                                                        h2 {
                                                                              font-family: 'Outfit', sans-serif;
                                                                              font-size: 32px;
                                                                              font-weight: 700;
                                                                              margin: 56px 0 24px;
                                                                              color: var(--text-primary);
                                                                              letter-spacing: -0.5px;
                                                                        }

                                                                        h3 {
                                                                              font-family: 'Outfit', sans-serif;
                                                                              font-size: 24px;
                                                                              font-weight: 700;
                                                                              margin: 32px 0 16px;
                                                                              color: var(--text-primary);
                                                                        }

                                                                        p {
                                                                              margin-bottom: 24px;
                                                                        }

                                                                        ul {
                                                                              margin-bottom: 24px;
                                                                              padding-left: 20px;
                                                                        }

                                                                        li {
                                                                              margin-bottom: 12px;
                                                                              color: var(--text-sec);
                                                                        }

                                                                        strong {
                                                                              color: var(--text-primary);
                                                                        }

                                                                        .table-wrap {
                                                                              overflow-x: auto;
                                                                              margin: 40px 0;
                                                                              border-radius: var(--radius-xl);
                                                                              border: 1px solid var(--border-sub);
                                                                        }

                                                                        table {
                                                                              width: 100%;
                                                                              border-collapse: collapse;
                                                                              background: var(--bg-card);
                                                                              text-align: left;
                                                                        }

                                                                        th,
                                                                        td {
                                                                              padding: 16px 20px;
                                                                              border-bottom: 1px solid var(--border-sub);
                                                                        }

                                                                        th {
                                                                              background: var(--bg-elevated);
                                                                              color: var(--text-primary);
                                                                              font-family: 'Outfit', sans-serif;
                                                                              font-size: 15px;
                                                                              font-weight: 700;
                                                                        }

                                                                        td {
                                                                              font-size: 15px;
                                                                              color: var(--text-sec);
                                                                        }

                                                                        .check {
                                                                              color: var(--success);
                                                                              font-weight: 700;
                                                                        }

                                                                        .cross {
                                                                              color: #F87171;
                                                                        }

                                                                        .feature-card {
                                                                              background: var(--bg-card);
                                                                              border: 1px solid var(--border-sub);
                                                                              border-radius: var(--radius-xl);
                                                                              padding: 32px;
                                                                              margin-bottom: 24px;
                                                                        }

                                                                        .feature-card h3 {
                                                                              margin-top: 0;
                                                                        }

                                                                        .winner-badge {
                                                                              display: inline-block;
                                                                              padding: 4px 12px;
                                                                              background: var(--accent-glow);
                                                                              color: var(--accent-light);
                                                                              border-radius: 999px;
                                                                              font-size: 12px;
                                                                              font-weight: 700;
                                                                              margin-top: 12px;
                                                                        }

                                                                        .app-banner {
                                                                              background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
                                                                              border: 1px solid var(--accent-dim);
                                                                              border-radius: var(--radius-2xl);
                                                                              padding: 48px;
                                                                              text-align: center;
                                                                              margin: 64px 0;
                                                                        }

                                                                        .btn-primary {
                                                                              display: inline-flex;
                                                                              align-items: center;
                                                                              gap: 10px;
                                                                              background: var(--accent);
                                                                              color: #fff;
                                                                              padding: 16px 36px;
                                                                              border-radius: var(--radius-xl);
                                                                              font-weight: 700;
                                                                              box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
                                                                        }

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .container {
        padding: 0 24px;
    }

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

    .steps, .steps-detailed {
        grid-template-columns: 1fr;
    }

    .steps-detailed::before {
        left: 20px;
    }

    .step-detailed {
        grid-template-columns: 44px 1fr;
        gap: 20px;
    }

    .step-num {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .step-detail-card {
        grid-template-columns: 1fr 1fr;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .story-grid {
        grid-template-columns: 1fr;
    }

    .founder-card {
        position: static;
    }

    .compare-row {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .compare-cell {
        padding: 14px 12px;
        font-size: 12px;
    }
}
@media (max-width: 480px) {
    .hero {
        padding: 80px 0 40px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .step-detail-card {
        grid-template-columns: 1fr;
    }

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

    .logo {
        font-size: 20px;
    }

    .compare-row {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .compare-cell {
        padding: 10px;
        font-size: 11px;
    }
}