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

   :root {
       --primary: #3b82f6;
       --primary-dark: #1d4ed8;
       --text: #111827;
       --text-secondary: #6b7280;
       --text-tertiary: #9ca3af;
       --bg: #f9fafb;
       --surface: #ffffff;
       --surface-soft: #f8fafc;
       --border: #e5e7eb;
       --border-hover: #d1d5db;
       --radius-sm: 8px;
       --radius-md: 12px;
       --radius-lg: 16px;
       --shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
   }

   html {
       scroll-behavior: smooth;
   }

   body {
       min-height: 100vh;
       font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background:
           radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 28%),
           linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
       color: var(--text);
   }

   .container {
       width: 100%;
       max-width: 1160px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .topbar {
       position: sticky;
       top: 0;
       z-index: 10;
       background: rgba(255, 255, 255, 0.85);
       backdrop-filter: blur(12px);
       border-bottom: 1px solid rgba(229, 231, 235, 0.8);
   }

   .topbar-inner {
       min-height: 74px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
   }

   .brand {
       margin-left: 10px;
       display: inline-flex;
       align-items: center;
       gap: 10px;
       text-decoration: none;
   }

   .brand-mark {
       width: 38px;
       height: 38px;
       border-radius: 12px;
       background: #eff6ff;
       border: 1px solid #bfdbfe;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--primary);
       font-size: 18px;
   }

   .brand-name {
       font-size: 15px;
       font-weight: 700;
       color: var(--text);
   }

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

   .menu-toggle {
       display: none;
       width: 46px;
       height: 46px;
       border-radius: var(--radius-md);
       border: 1px solid var(--border);
       background: var(--surface);
       color: var(--text);
       cursor: pointer;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       transition: background 0.2s, border-color 0.2s, color 0.2s;
       margin-right: 10px;
   }

   .menu-toggle:hover {
       background: var(--surface-soft);
       border-color: var(--border-hover);
   }

   .nav-links a,
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       height: 46px;
       padding: 0 18px;
       border-radius: var(--radius-md);
       text-decoration: none;
       font-size: 14px;
       font-weight: 600;
       transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s;
   }

   .btn-primary {
       background: var(--primary);
       color: #fff;
       box-shadow: 0 8px 24px rgba(59, 130, 246, 0.22);
   }

   .btn-primary:hover {
       background: var(--primary-dark);
       transform: translateY(-1px);
   }

   .btn-secondary {
       background: var(--surface);
       color: var(--text-secondary);
       border: 1px solid var(--border);
   }

   .btn-secondary:hover {
       background: var(--surface-soft);
       color: var(--text);
       border-color: var(--border-hover);
   }

   .hero {
       padding: 58px 0 32px;
   }

   .hero-grid {
       display: grid;
       grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
       gap: 28px;
       align-items: center;
   }

   .badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       font-weight: 600;
       color: var(--primary);
       background: #eff6ff;
       border: 1px solid #bfdbfe;
       border-radius: 999px;
       padding: 6px 12px;
       margin-bottom: 16px;
   }

   .hero h1 {
       font-size: clamp(34px, 5vw, 56px);
       line-height: 1.06;
       letter-spacing: -0.04em;
       margin-bottom: 16px;
   }

   .hero h1 span {
       color: var(--primary);
   }

   .hero p {
       font-size: 16px;
       line-height: 1.75;
       color: var(--text-secondary);
       max-width: 610px;
   }

   .hero-actions {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
       margin-top: 26px;
   }

   .hero-points {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       margin-top: 24px;
   }

   .point {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 10px 14px;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 999px;
       color: var(--text-secondary);
       font-size: 13px;
       font-weight: 500;
   }

   .point i {
       color: var(--primary);
   }

   .hero-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 24px;
       box-shadow: var(--shadow);
       overflow: hidden;
   }

   .hero-card-image {
       aspect-ratio: 4 / 3;
       background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
       overflow: hidden;
   }

   .hero-card-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .hero-card-body {
       padding: 22px;
   }

   .mini-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 12px;
       margin-bottom: 18px;
   }

   .mini-item {
       padding: 14px;
       background: var(--surface-soft);
       border: 1px solid var(--border);
       border-radius: var(--radius-md);
   }

   .mini-item strong {
       display: block;
       font-size: 19px;
       margin-bottom: 4px;
       color: var(--text);
   }

   .mini-item span {
       font-size: 12px;
       line-height: 1.5;
       color: var(--text-secondary);
   }

   .hero-card-body h2 {
       font-size: 20px;
       margin-bottom: 8px;
   }

   .hero-card-body p {
       font-size: 14px;
       color: var(--text-secondary);
       line-height: 1.7;
   }

   .section {
       padding: 34px 0;
   }

   .section-head {
       max-width: 760px;
       margin-bottom: 20px;
   }

   .section-kicker {
       display: inline-flex;
       align-items: center;
       gap: 7px;
       font-size: 12px;
       font-weight: 600;
       color: var(--primary);
       background: #eff6ff;
       border: 1px solid #bfdbfe;
       border-radius: 999px;
       padding: 5px 11px;
       margin-bottom: 12px;
   }

   .section-head h2 {
       font-size: clamp(26px, 4vw, 38px);
       line-height: 1.15;
       letter-spacing: -0.03em;
       margin-bottom: 10px;
   }

   .section-head p {
       font-size: 15px;
       line-height: 1.7;
       color: var(--text-secondary);
   }

   .features {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 16px;
   }

   .feature-card,
   .step-card,
   .cta-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 20px;
   }

   .feature-card {
       padding: 22px;
   }

   .feature-icon {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       background: #eff6ff;
       border: 1px solid #bfdbfe;
       color: var(--primary);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       margin-bottom: 14px;
   }

   .feature-card h3 {
       font-size: 18px;
       margin-bottom: 8px;
   }

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

   .steps {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 16px;
   }

   .step-card {
       padding: 22px;
   }

   .step-number {
       width: 36px;
       height: 36px;
       border-radius: 999px;
       background: #eff6ff;
       border: 1px solid #bfdbfe;
       color: var(--primary);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       font-weight: 700;
       margin-bottom: 14px;
   }

   .step-card h3 {
       font-size: 18px;
       margin-bottom: 8px;
   }

   .step-card p {
       font-size: 14px;
       line-height: 1.7;
       color: var(--text-secondary);
   }

   .cta-card {
       padding: 28px;
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
       gap: 18px;
       align-items: center;
       box-shadow: var(--shadow);
   }

   .cta-card h2 {
       font-size: clamp(24px, 4vw, 34px);
       line-height: 1.15;
       letter-spacing: -0.03em;
       margin-bottom: 8px;
   }

   .cta-card p {
       font-size: 15px;
       line-height: 1.7;
       color: var(--text-secondary);
       max-width: 720px;
   }

   .footer {
       padding: 26px 0 40px;
   }

   .footer-line {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 14px;
       padding-top: 18px;
       border-top: 1px solid var(--border);
       color: var(--text-tertiary);
       font-size: 13px;
       flex-wrap: wrap;
   }

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

   .footer-links a {
       color: var(--text-secondary);
       text-decoration: none;
   }

   .footer-links a:hover {
       color: var(--text);
   }

   @media (max-width: 980px) {

       .hero-grid,
       .features,
       .steps,
       .cta-card {
           grid-template-columns: 1fr;
       }

       .hero {
           padding-top: 36px;
       }
   }

   @media (max-width: 640px) {
       .container {
           padding: 0 16px;
       }

       .topbar-inner {
           min-height: auto;
           padding: 14px 0;
           align-items: center;
           flex-direction: row;
           flex-wrap: wrap;
       }

       .menu-toggle {
           display: inline-flex;
       }

       .nav-links {
           width: 100%;
           display: none;
           flex-direction: column;
           align-items: stretch;
           gap: 10px;
           padding-top: 12px;
       }

       .nav-links.is-open {
           display: flex;
       }

       .nav-links a,
       .btn {
           width: 100%;
       }

       .hero p,
       .section-head p,
       .cta-card p {
           font-size: 14px;
       }

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