:root {
      --bg: #ffffff;
      --bg-soft: #f5f7fb;
      --card: #ffffff;
      --card-border: rgba(0, 0, 0, 0.08);
      --text: #0b1220;
      --muted: #5b647a;
      --cyan: #2eb8ff;
      --cyan-2: #1a8fff;
      --white: #ffffff;
      --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }

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

    .container {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #000;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav {
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
    }

    .brand img {
      width: 74px;
      height: 74px;
      border-radius: 14px;
      object-fit: cover;
      box-shadow: 0 0 28px rgba(94, 223, 255, 0.28);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
      color: rgba(255,255,255,0.7);
      font-size: 0.95rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 20px;
      border-radius: 999px;
      font-weight: 750;
      background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
      color: #031124;
      box-shadow: 0 16px 35px rgba(46, 184, 255, 0.28);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 44px rgba(46, 184, 255, 0.35);
    }

    .hero {
      padding: 92px 0 76px;
      background: linear-gradient(to bottom, #f8fbff, #ffffff);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
      gap: 56px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(94, 223, 255, 0.1);
      border: 1px solid rgba(94, 223, 255, 0.25);
      color: var(--cyan);
      font-weight: 700;
      font-size: 0.92rem;
      margin-bottom: 22px;
    }

    h1 {
      margin: 0;
      max-width: 760px;
      font-size: clamp(2.4rem, 6vw, 5.1rem);
      line-height: 0.98;
      letter-spacing: -0.06em;
    }

    .accent { color: var(--cyan); }

    .lead {
      margin: 26px 0 34px;
      max-width: 660px;
      color: var(--muted);
      font-size: 1.15rem;
    }

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

    .btn-secondary {
      background: rgba(255, 255, 255, 0.08);
      color: var(--white);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: none;
    }

    .hero-card {
      padding: 34px;
      border-radius: 34px;
      background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.045));
      border: 1px solid var(--card-border);
      box-shadow: var(--shadow);
    }

    .hero-logo {
      width: 100%;
      max-width: 120px;
      display: block;
      margin: 0 auto 26px;
      border-radius: 28px;
      box-shadow: 0 0 55px rgba(94, 223, 255, 0.2);
    }

    .quick-list {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .quick-list li {
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--muted);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    section {
      padding: 72px 0;
    }

    .section-head {
      max-width: 720px;
      margin-bottom: 34px;
    }

    h2 {
      margin: 0 0 14px;
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .section-head p {
      margin: 0;
      color: var(--muted);
      font-size: 1.08rem;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .card {
      padding: 26px;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 10px 25px rgba(0,0,0,0.06);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(0,0,0,0.1);
    }

    .icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(94, 223, 255, 0.12);
      color: var(--cyan);
      font-size: 1.5rem;
      margin-bottom: 18px;
    }

    .card h3 {
      margin: 0 0 10px;
      font-size: 1.25rem;
    }

    .card p {
      margin: 0;
      color: var(--muted);
    }

    .process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      counter-reset: step;
    }

    .step {
      position: relative;
      padding: 24px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .step::before {
      counter-increment: step;
      content: "0" counter(step);
      display: inline-flex;
      margin-bottom: 20px;
      color: var(--cyan);
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .step h3 { margin: 0 0 8px; }
    .step p { margin: 0; color: var(--muted); }

    .cta {
      padding: 48px;
      border-radius: 34px;
      background: linear-gradient(135deg, rgba(94,223,255,0.18), rgba(46,184,255,0.08));
      border: 1px solid rgba(94,223,255,0.28);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .cta h2 { margin-bottom: 10px; }
    .cta p { margin: 0; color: var(--muted); max-width: 620px; }

    footer {
      padding: 44px 0;
      background: #1a1a1a;
      color: rgba(255,255,255,0.7);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr;
      gap: 30px;
    }

    .footer-title {
      color: var(--white);
      font-weight: 800;
      margin-bottom: 10px;
    }

    .footer-links {
      display: grid;
      gap: 8px;
    }

    @media (max-width: 900px) {
      .hero-grid,
      .cards,
      .process,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .nav-links { display: none; }
      .hero { padding-top: 58px; }
      .cta { flex-direction: column; align-items: flex-start; padding: 32px; }
    }