.home-hero {
      position: relative;
      min-height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 7rem 0 3rem;
      overflow: hidden;
    }

    .home-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, var(--color-bg-warm), var(--color-bg-secondary) 62%, var(--color-bg));
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(100% - 40px, 1180px);
      margin: 0 auto;
      text-align: center;
    }

    .hero-kicker {
      display: block;
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 900;
      line-height: 1.3;
      color: var(--color-text);
      margin-bottom: .35rem;
    }

    .hero-title {
      display: block;
      font-size: clamp(2.2rem, 5vw, 4.2rem);
      font-weight: 900;
      line-height: 1.14;
      letter-spacing: 0;
    }

    .hero-copy {
      margin: 1.35rem auto 0;
      max-width: 720px;
      color: var(--color-text-secondary);
      font-size: 1rem;
      line-height: 1.85;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin-top: 1.75rem;
    }

    .hero-demo {
      display: grid;
      grid-template-columns: minmax(220px, 280px) 84px minmax(260px, 340px);
      gap: 22px;
      align-items: center;
      justify-content: center;
      margin-top: 42px;
    }

    .phone-card,
    .desktop-card {
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: 0 20px 45px rgba(0,0,0,.05);
    }

    .phone-card {
      border-radius: 24px;
      padding: 20px;
    }

    .phone-notch,
    .phone-home {
      height: 5px;
      margin: 0 auto;
      border-radius: 999px;
      background: var(--color-bg-elevated);
    }

    .phone-notch {
      width: 56px;
      margin-bottom: 18px;
    }

    .phone-home {
      width: 36px;
      height: 4px;
      margin-top: 18px;
    }

    .bubble {
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 10px 13px;
      margin-top: 10px;
      color: var(--color-text-secondary);
      background: var(--color-bg-secondary);
      font-size: .78rem;
      line-height: 1.6;
      text-align: left;
    }

    .bubble-user {
      margin-top: 0;
      color: var(--color-primary);
      background: color-mix(in srgb, var(--color-primary) 8%, white);
      border-color: color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
    }

    .bubble-ok {
      color: #16a34a;
    }

    .hero-z {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      border-radius: 999px;
      background: var(--color-primary);
      color: #fff;
      font-weight: 900;
      box-shadow: 0 0 28px rgba(87,90,255,.26);
    }

    .desktop-card {
      border-radius: 14px;
      overflow: hidden;
      text-align: left;
    }

    .window-bar {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--color-border);
      color: var(--color-text-muted);
      font-size: .72rem;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
    }

    .task-list {
      padding: 18px;
      color: var(--color-text-secondary);
      font-size: .8rem;
      line-height: 1.85;
    }

    .task-list p {
      margin: 0 0 5px;
    }

    .progress {
      height: 5px;
      margin-top: 12px;
      border-radius: 999px;
      background: var(--color-bg-elevated);
      overflow: hidden;
    }

    .progress span {
      display: block;
      width: 72%;
      height: 100%;
      background: var(--color-primary);
    }

    .home-grid-4,
    .home-grid-5,
    .home-grid-3,
    .home-grid-2 {
      display: grid;
      gap: 18px;
    }

    .home-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .home-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .mini-card,
    .task-card,
    .expert-card-home,
    .security-card {
      background: #fff;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .mini-card:hover,
    .task-card:hover,
    .expert-card-home:hover,
    .security-card:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
      box-shadow: 0 12px 28px rgba(0,0,0,.06);
    }

    .mini-card {
      padding: 34px 22px;
      text-align: center;
    }

    .task-card,
    .expert-card-home {
      min-height: 160px;
      padding: 22px 20px;
    }

    .security-card {
      display: flex;
      align-items: center;
      gap: 16px;
      min-height: 100px;
      padding: 20px;
    }

    .icon-box {
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border-radius: 13px;
      color: var(--color-primary);
      background: color-mix(in srgb, var(--color-primary) 10%, white);
    }

    .mini-card .icon-box {
      width: 56px;
      height: 56px;
      margin-bottom: 20px;
    }

    .task-card > .icon-box,
    .expert-card-home > .icon-box {
      margin-bottom: 16px;
    }

    .task-title,
    .expert-title-home,
    .mini-title {
      margin: 0 0 8px;
      color: var(--color-text);
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .mini-title {
      font-size: 1.05rem;
    }

    .task-desc,
    .expert-desc-home,
    .expert-tasks-home,
    .mini-desc,
    .security-desc {
      margin: 0;
      color: var(--color-text-secondary);
      font-size: .9rem;
      line-height: 1.65;
    }

    .expert-tasks-home {
      margin-top: 8px;
      color: var(--color-text-muted);
      font-size: .76rem;
    }

    .preview-frame {
      overflow: hidden;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 22px 50px rgba(0,0,0,.06);
    }

    .scenario-list {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }

    .scenario-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      background: #fff;
    }

    .scenario-title {
      margin: 0 0 2px;
      color: var(--color-text);
      font-size: .9rem;
      font-weight: 800;
    }

    .scenario-desc {
      margin: 0;
      color: var(--color-text-secondary);
      font-size: .78rem;
      line-height: 1.5;
    }

    .home-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 36px;
      text-align: center;
    }

    .home-step-icon {
      width: 80px;
      height: 80px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 22px;
      border-radius: 20px;
      color: var(--color-primary);
      background: var(--color-bg-warm);
      border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
    }

    @media (max-width: 1100px) {
      .home-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .home-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .scenario-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
      .home-hero {
        padding-top: 6.5rem;
      }

      .hero-demo,
      .home-grid-5,
      .home-grid-4,
      .home-grid-3,
      .home-grid-2,
      .home-steps,
      .scenario-list {
        grid-template-columns: 1fr;
      }

      .hero-demo {
        gap: 18px;
      }
    }