.hard-drive-page {
      overflow: hidden;
  }

  .hdd-hero {
      position: relative;
      padding: 40px 0 40px;
      overflow: hidden;
      background-image: url('../../img/product/hard-drive-recover/banner-backgorund.png');
      background-position: center;
      background-size: cover;
  }

  .hdd-hero .hdd-hero-background {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
  }

  .hdd-hero .hdd-hero-background::before {
      position: absolute;
      top: -100px;
      left: 190px;
      width: 600px;
      height: 600px;
      border-radius: 600px;
      background: rgba(103, 232, 249, 0.16);
      filter: blur(120px);
      content: "";
  }

  .hdd-hero .hdd-hero-background::after {
      position: absolute;
      right: 100px;
      bottom: -100px;
      width: 500px;
      height: 500px;
      border-radius: 500px;
      background: rgba(96, 165, 250, 0.12);
      filter: blur(120px);
      content: "";
  }

  .hdd-hero .hdd-hero-letter {
      position: absolute;
      top: 40px;
      left: 50%;
      color: transparent;
      font-size: 720px;
      font-weight: 900;
      line-height: 650px;
      opacity: 0.25;
      transform: translateX(-50%);
      -webkit-text-stroke: 1px rgba(34, 189, 233, 0.25);
  }

  .hdd-hero .hdd-hero-grid {
      position: absolute;
      inset: 0;
      opacity: 0.25;
      background-image:
          linear-gradient(to right, #e2e8f0 1px, transparent 1px),
          linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 700px 600px at center, #000000 60%, transparent 100%);
  }

  .hdd-hero .hdd-hero-sectors {
      position: absolute;
      top: 320px;
      left: 50%;
      display: grid;
      grid-template-columns: repeat(8, 28px);
      gap: 12px;
      opacity: 0.55;
      transform: translateX(-50%);
  }

  .hdd-hero .hdd-hero-sectors span {
      width: 28px;
      height: 28px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: rgba(248, 250, 252, 0.4);
  }

  .hdd-hero .hdd-hero-sectors span:nth-child(7n) {
      border-color: rgba(34, 189, 233, 0.55);
      background: rgba(34, 189, 233, 0.1);
      box-shadow: 0 0 8px rgba(34, 189, 233, 0.15);
  }

  .hdd-hero .hdd-hero-container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1184px;
      margin: 0 auto;
      padding: 0 16px;
  }

  .hdd-hero .hdd-hero-heading {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
  }

  .hdd-hero .hdd-hero-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border: 1px solid rgba(203, 213, 225, 0.8);
      border-radius: 30px;
      color: #334155;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
      font-size: 12px;
      font-weight: 700;
  }

  .hdd-hero .hdd-hero-label i {
      color: #22bde9;
  }

  .hdd-hero .hdd-hero-heading h1 {
      max-width: 900px;
      margin: 32px auto 0;
      color: #020617;
      font-size: 60px;
      font-weight: 900;
      line-height: 66px;
      letter-spacing: -2px;
  }

  .hdd-hero .hdd-hero-heading h1 strong {
      display: block;
      color: transparent;
      background: linear-gradient(90deg, #0ea5e9, #22bde9, #6366f1);
      background-clip: text;
  }

  .hdd-hero .hdd-hero-heading>p {
      max-width: 768px;
      margin: 24px auto 0;
      color: #475569;
      font-size: 18px;
      font-weight: 500;
      line-height: 29px;
  }

  .hdd-hero .hdd-hero-downloads,
  .hdd-cta .hdd-cta-downloads {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 40px;
  }

  .hdd-hero .hdd-hero-downloads a,
  .hdd-cta .hdd-cta-downloads a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      width: 226px;
      height: 56px;
      border: 2px solid #ff814a;
      border-radius: 14px;
      color: #ff814a;
      background: #ffffff;
      box-shadow: 0 12px 25px rgba(249, 115, 22, 0.12);
      transition: transform 200ms, box-shadow 200ms;
  }

  .hdd-hero .hdd-hero-downloads a:first-child,
  .hdd-cta .hdd-cta-downloads a:first-child {
      color: #ffffff;
      background: #ff814a;
  }

  .hdd-hero .hdd-hero-downloads a:hover,
  .hdd-cta .hdd-cta-downloads a:hover {
      box-shadow: 0 16px 30px rgba(249, 115, 22, 0.2);
      transform: translateY(-2px);
  }

  .hdd-hero .hdd-hero-downloads a>i,
  .hdd-cta .hdd-cta-downloads a>i {
      font-size: 30px;
  }

  .hdd-hero .hdd-hero-downloads span,
  .hdd-cta .hdd-cta-downloads span {
      display: flex;
      flex-direction: column;
      text-align: left;
  }

  .hdd-hero .hdd-hero-downloads .text-strong,
  .hdd-cta .hdd-cta-downloads .text-strong {
      font-size: 14px;
  }

  .hdd-hero .hdd-hero-downloads .text-small,
  .hdd-cta .hdd-cta-downloads .text-small {
      margin-top: 4px;
      font-size: 10px;
  }

  .hdd-hero .hdd-hero-engine {
      max-width: 896px;
      margin: 64px auto 0;
      padding: 24px;
      border: 1px solid rgba(203, 213, 225, 0.5);
      border-radius: 40px;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: 0 25px 55px rgba(148, 163, 184, 0.24);
  }

  .hdd-hero .hdd-hero-engine-layout {
      display: grid;
      grid-template-columns: 7fr 5fr;
      gap: 32px;
      align-items: center;
      padding: 32px;
  }

  .hdd-hero .hdd-hero-engine-image img {
      display: block;
      width: 100%;
      max-width: 490px;
      height: auto;
      border-radius: 24px;
  }

  .hdd-hero .hdd-hero-engine-copy {
      padding: 8px 0;
  }

  .hdd-hero .hdd-hero-engine-copy>span {
      color: #4f46e5;
      font-size: 12px;
      font-weight: 700;
  }

  .hdd-hero .hdd-hero-engine-copy>span::before {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 6px;
      border-radius: 6px;
      background: #6366f1;
      content: "";
  }

  .hdd-hero .hdd-hero-engine-copy h2 {
      margin: 16px 0;
      color: #020617;
      font-size: 24px;
      font-weight: 900;
      line-height: 32px;
  }

  .hdd-hero .hdd-hero-engine-copy p {
      margin: 0;
      color: #475569;
      font-size: 14px;
      line-height: 23px;
  }

  .hdd-hero .hdd-hero-engine-specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 24px;
  }

  .hdd-hero .hdd-hero-engine-specs .text-small {
      padding: 14px;
      border: 1px solid #f1f5f9;
      border-radius: 16px;
      color: #94a3b8;
      background: #f8fafc;
      font-size: 10px;
      font-weight: 700;
  }

  .hdd-hero .hdd-hero-engine-specs .text-strong {
      display: block;
      margin-top: 5px;
      color: #1e293b;
      font-size: 12px;
  }

  .hdd-hero .hdd-hero-support {
      margin: 24px 0 0;
      color: #94a3b8;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
  }

  .drive-journey,
  .drive-types,
  .drive-problems,
  .recoverable-data,
  .recovery-science,
  .scan-stages,
  .drive-brands,
  .hdd-faq {
      padding: 96px 0;
      border-bottom: 1px solid #f1f5f9;
  }

  .drive-journey,
  .drive-problems,
  .recovery-science,
  .drive-brands {
      background: #ffffff;
  }

  .drive-types,
  .recoverable-data,
  .scan-stages,
  .hdd-faq {
      background: #f8fafc;
  }

  .drive-journey .drive-journey-container,
  .drive-types .drive-types-container,
  .drive-problems .drive-problems-container,
  .recoverable-data .recoverable-data-container,
  .recovery-science .recovery-science-container,
  .scan-stages .scan-stages-container,
  .drive-brands .drive-brands-container {
      width: 100%;
      max-width: 1184px;
      margin: 0 auto;
      padding: 0 16px;
  }

  .drive-journey .drive-journey-heading,
  .drive-types .drive-types-heading,
  .recoverable-data .recoverable-data-heading,
  .recovery-science .recovery-science-heading,
  .scan-stages .scan-stages-heading,
  .drive-brands .drive-brands-heading,
  .hdd-faq .hdd-faq-heading {
      max-width: 768px;
      margin: 0 auto 64px;
      text-align: center;
  }

  .drive-journey .drive-journey-heading>span,
  .drive-types .drive-types-heading>span,
  .drive-problems .drive-problems-intro>span,
  .recoverable-data .recoverable-data-heading>span,
  .recovery-science .recovery-science-heading>span,
  .scan-stages .scan-stages-heading>span,
  .drive-brands .drive-brands-heading>span,
  .hdd-faq .hdd-faq-heading>span {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 30px;
      color: #0891b2;
      background: #ecfeff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
  }

  .drive-types .drive-types-heading>span,
  .recoverable-data .recoverable-data-heading>span,
  .drive-brands .drive-brands-heading>span {
      color: #4f46e5;
      background: #eef2ff;
  }

  .drive-journey .drive-journey-heading h2,
  .drive-types .drive-types-heading h2,
  .drive-problems .drive-problems-intro h2,
  .recoverable-data .recoverable-data-heading h2,
  .recovery-science .recovery-science-heading h2,
  .scan-stages .scan-stages-heading h2,
  .drive-brands .drive-brands-heading h2,
  .hdd-faq .hdd-faq-heading h2 {
      margin: 16px 0;
      color: #020617;
      font-size: 36px;
      font-weight: 900;
      line-height: 43px;
      letter-spacing: -1px;
  }

  .drive-journey .drive-journey-heading p,
  .drive-types .drive-types-heading p,
  .drive-problems .drive-problems-intro>p,
  .recoverable-data .recoverable-data-heading p,
  .recovery-science .recovery-science-heading p,
  .scan-stages .scan-stages-heading p,
  .drive-brands .drive-brands-heading p,
  .hdd-faq .hdd-faq-heading p {
      margin: 0;
      color: #475569;
      font-size: 16px;
      line-height: 26px;
  }

  .drive-journey .drive-journey-list {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
  }

  .drive-journey .drive-journey-list::before {
      position: absolute;
      z-index: 0;
      top: 64px;
      right: 92px;
      left: 92px;
      border-top: 1px dashed #cbd5e1;
      content: "";
  }

  .drive-journey .drive-journey-card {
      position: relative;
      z-index: 1;
      display: flex;
      min-height: 280px;
      flex-direction: column;
      align-items: center;
      padding: 24px;
      border: 1px solid #f1f5f9;
      border-radius: 24px;
      background: #f8fafc;
      text-align: center;
      transition: border-color 300ms, background 300ms, box-shadow 300ms, transform 300ms;
  }

  .drive-journey .drive-journey-card:hover {
      border-color: #cbd5e1;
      background: #ffffff;
      box-shadow: 0 16px 30px rgba(148, 163, 184, 0.16);
      transform: translateY(-3px);
  }

  .drive-journey .drive-journey-card>.text-strong {
      display: flex;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      border: 1px solid #1e293b;
      border-radius: 40px;
      color: #ffffff;
      background: #0f172a;
      box-shadow: 0 5px 10px rgba(15, 23, 42, 0.18);

      font-size: 12px;
  }

  .drive-journey .drive-journey-card>span {
      display: inline-block;
      padding: 3px 8px;
      border: 1px solid;
      border-radius: 20px;
      font-size: 9px;
      font-weight: 700;
  }

  .drive-journey .drive-journey-healthy>span {
      border-color: #a7f3d0;
      color: #047857;
      background: #ecfdf5;
  }

  .drive-journey .drive-journey-deleted>span {
      border-color: #fde68a;
      color: #b45309;
      background: #fffbeb;
  }

  .drive-journey .drive-journey-corrupted>span {
      border-color: #fecdd3;
      color: #be123c;
      background: #fff1f2;
  }

  .drive-journey .drive-journey-lost>span {
      border-color: #c7d2fe;
      color: #4338ca;
      background: #eef2ff;
  }

  .drive-journey .drive-journey-recovered>span {
      border-color: #a5f3fc;
      color: #0e7490;
      background: #ecfeff;
  }

  .drive-journey .drive-journey-card h3 {
      margin: 10px 0 8px;
      color: #020617;
      font-size: 14px;
      font-weight: 900;
  }

  .drive-journey .drive-journey-card p {
      margin: 0;
      color: #64748b;
      font-size: 12px;
      line-height: 19px;
  }

  .drive-journey .drive-journey-note {
      display: table;
      margin: 48px auto 0;
      padding: 12px 24px;
      border: 1px solid #e2e8f0;
      border-radius: 30px;
      color: #334155;
      background: #f8fafc;
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
      font-size: 16px;
      font-weight: 700;
  }

  .drive-journey .drive-journey-note i {
      margin-right: 7px;
      color: #22bde9;
  }

  .drive-types .drive-types-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
  }

  .drive-types .drive-types-card {
      display: flex;
      min-height: 360px;
      flex-direction: column;
      padding: 32px;
      border: 1px solid rgba(203, 213, 225, 0.5);
      border-radius: 32px;
      background: #ffffff;
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
      transition: border-color 300ms, box-shadow 300ms, transform 300ms;
  }

  .drive-types .drive-types-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 12px 25px rgba(148, 163, 184, 0.18);
      transform: translateY(-3px);
  }

  .drive-types .drive-types-card>i {
      display: flex;
      width: 48px;
      height: 48px;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      border: 1px solid #f1f5f9;
      border-radius: 16px;
      color: #22bde9;
      background: #f8fafc;
      font-size: 24px;
  }

  .drive-types .drive-types-card h3 {
      margin: 0;
      color: #020617;
      font-size: 18px;
      font-weight: 900;
  }

  .drive-types .drive-types-card>p {
      min-height: 44px;
      margin: 16px 0 0;
      color: #64748b;
      font-size: 12px;
      line-height: 20px;
  }

  .drive-types .drive-types-card ul {
      margin: auto 0 0;
      padding: 24px 0 0;
      border-top: 1px solid #f1f5f9;
      list-style: none;
  }

  .drive-types .drive-types-card li {
      position: relative;
      margin-top: 8px;
      padding-left: 20px;
      color: #475569;
      font-size: 11px;
  }

  .drive-types .drive-types-card li::before {
      font-family: "iconfont" !important;
      position: absolute;
      left: 0;
      color: #22bde9;
      font-weight: 900;
      content: "\e626";
  }

  .drive-problems .drive-problems-container {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 48px;
      align-items: center;
  }

  .drive-problems .drive-problems-intro h2 {
      text-align: left;
  }

  .drive-problems .drive-problems-notice {
      display: flex;
      gap: 10px;
      margin-top: 24px;
      padding: 24px;
      border: 1px solid #fde68a;
      border-radius: 24px;
      color: #78350f;
      background: #fffbeb;
  }

  .drive-problems .drive-problems-notice>i {
      color: #d97706;
      font-size: 21px;
  }

  .drive-problems .drive-problems-notice .text-strong {
      font-size: 14px;
  }

  .drive-problems .drive-problems-notice p {
      margin: 12px 0 0;
      color: #92400e;
      font-size: 13px;
      line-height: 21px;
  }

  .drive-problems .drive-problems-table {
      padding: 32px;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      background: #f8fafc;
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
  }

  .drive-problems .drive-problems-head {
      display: flex;
      justify-content: space-between;
      padding-bottom: 16px;
      border-bottom: 1px solid #e2e8f0;
      color: #0f172a;

      font-size: 12px;
      text-transform: uppercase;
  }

  .drive-problems .drive-problems-table ul {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
  }

  .drive-problems .drive-problems-table li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      padding: 14px;
      border: 1px solid #f1f5f9;
      border-radius: 16px;
      color: #1e293b;
      background: #ffffff;
      font-size: 14px;
      font-weight: 600;
      transition: border-color 200ms, box-shadow 200ms;
  }

  .drive-problems .drive-problems-table li:hover {
      border-color: #cbd5e1;
      box-shadow: 0 4px 10px rgba(148, 163, 184, 0.12);
  }

  .drive-problems .drive-problems-table .text-small {
      color: #94a3b8;

      font-size: 10px;
      font-weight: 500;
  }

  .drive-problems .drive-problems-table .text-small .text-strong {
      display: inline-block;
      margin-left: 8px;
      padding: 5px 10px;
      border: 1px solid #cffafe;
      border-radius: 20px;
      color: #22bde9;
      background: #ecfeff;
      font-size: 12px;
  }

  .recoverable-data .recoverable-data-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
  }

  .recoverable-data .recoverable-data-card {
      padding: 24px;
      border: 1px solid rgba(203, 213, 225, 0.5);
      border-radius: 24px;
      background: #ffffff;
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
      transition: border-color 300ms, box-shadow 300ms, transform 300ms;
  }

  .recoverable-data .recoverable-data-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 12px 25px rgba(148, 163, 184, 0.16);
      transform: translateY(-3px);
  }

  .recoverable-data .recoverable-data-card>i {
      display: flex;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      border: 1px solid #e0f2fe;
      border-radius: 16px;
      color: #0ea5e9;
      background: #f0f9ff;
      font-size: 20px;
  }

  .recoverable-data .recoverable-data-card h3 {
      margin: 0;
      color: #020617;
      font-size: 16px;
      font-weight: 900;
  }

  .recoverable-data .recoverable-data-card>.text-strong {
      display: block;
      min-height: 28px;
      margin-top: 5px;
      color: #0891b2;
      font-size: 10px;
  }

  .recoverable-data .recoverable-data-card p {
      min-height: 78px;
      margin: 10px 0 0;
      padding-top: 10px;
      border-top: 1px solid #f8fafc;
      color: #64748b;
      font-size: 12px;
      line-height: 19px;
  }

  .recovery-science .recovery-science-flow {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
  }

  .recovery-science .recovery-science-flow::before {
      position: absolute;
      top: 44px;
      right: 170px;
      left: 170px;
      height: 2px;
      background: linear-gradient(90deg, #cffafe, rgba(34, 189, 233, 0.2), #e0e7ff);
      content: "";
  }

  .recovery-science .recovery-science-card {
      position: relative;
      padding: 24px;
      border: 1px solid #f1f5f9;
      border-radius: 24px;
      background: #f8fafc;
      transition: border-color 200ms, background 200ms, transform 200ms;
  }

  .recovery-science .recovery-science-card:hover {
      border-color: #cbd5e1;
      background: #ffffff;
      transform: translateY(-2px);
  }

  .recovery-science .recovery-science-card>.text-strong {
      position: relative;
      z-index: 1;
      display: flex;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      border: 1px solid #1e293b;
      border-radius: 16px;
      color: #ffffff;
      background: #0f172a;
      box-shadow: 0 5px 10px rgba(15, 23, 42, 0.18);

      font-size: 12px;
  }

  .recovery-science .recovery-science-card h3 {
      margin: 0 0 6px;
      color: #020617;
      font-size: 14px;
      font-weight: 900;
  }

  .recovery-science .recovery-science-card p {
      margin: 0;
      color: #64748b;
      font-size: 12px;
      line-height: 19px;
  }

  .recovery-science .recovery-science-note {
      display: table;
      max-width: 760px;
      margin: 48px auto 0;
      padding: 12px 24px;
      border: 1px solid #f1f5f9;
      border-radius: 30px;
      color: #64748b;
      background: #f8fafc;
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      line-height: 21px;
  }

  .recovery-science .recovery-science-note i {
      margin-right: 7px;
      color: #f59e0b;
  }

  .recovery-science .recovery-science-note strong {
      color: #0f172a;
  }

  .scan-stages .scan-stages-layout {
      display: grid;
      grid-template-columns: 4fr 8fr;
      gap: 32px;
      align-items: stretch;
  }

  .scan-stages .scan-stages-tabs {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
  }

  .scan-stages .scan-stages-tabs button {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border: 1px solid rgba(203, 213, 225, 0.5);
      border-radius: 16px;
      color: #020617;
      background: rgba(255, 255, 255, 0.55);
      text-align: left;
      cursor: pointer;
      transition: border-color 300ms, background 300ms, box-shadow 300ms;
  }

  .scan-stages .scan-stages-tabs button:hover {
      background: #ffffff;
  }

  .scan-stages .scan-stages-tabs button.active {
      border-color: #22bde9;
      background: #ffffff;
      box-shadow: 0 10px 24px rgba(34, 189, 233, 0.12);
  }

  .scan-stages .scan-stages-tabs button span {
      display: flex;
      flex-direction: column;
      gap: 5px;
  }

  .scan-stages .scan-stages-tabs button .text-small {
      color: #94a3b8;

      font-size: 10px;
      font-weight: 700;
  }

  .scan-stages .scan-stages-tabs button .text-strong {
      font-size: 16px;
      font-weight: 900;
  }

  .scan-stages .scan-stages-tabs button i {
      display: flex;
      width: 32px;
      height: 32px;
      align-items: center;
      justify-content: center;
      border-radius: 32px;
      color: #94a3b8;
      background: #f1f5f9;
      transition: color 300ms, background 300ms;
  }

  .scan-stages .scan-stages-tabs button.active i {
      color: #ffffff;
      background: #22bde9;
  }

  .scan-stages .scan-stages-panel {
      display: flex;
      min-height: 345px;
      flex-direction: column;
      justify-content: space-between;
      padding: 40px;
      border: 1px solid #bae6fd;
      border-radius: 40px;
      background: #ffffff;
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
      opacity: 0;
      transform: translateX(15px);
      transition: opacity 180ms, transform 180ms;
  }

  .scan-stages .scan-stages-panel.is-visible {
      opacity: 1;
      transform: translateX(0);
  }

  .scan-stages .scan-stages-panel>span {
      align-self: flex-start;
      padding: 6px 12px;
      border-radius: 5px;
      color: #ffffff;
      background: #0f172a;

      font-size: 10px;
      font-weight: 700;
  }

  .scan-stages .scan-stages-panel h3 {
      margin: 20px 0 12px;
      color: #020617;
      font-size: 24px;
      font-weight: 900;
  }

  .scan-stages .scan-stages-panel>p {
      margin: 0;
      color: #475569;
      font-size: 14px;
      line-height: 23px;
  }

  .scan-stages .scan-stages-panel>div {
      margin-top: 28px;
      padding: 24px;
      border-radius: 24px;
      background: #f8fafc;
  }

  .scan-stages .scan-stages-panel>div .text-strong {
      display: block;
      color: #0f172a;

      font-size: 10px;
      letter-spacing: 1px;
  }

  .scan-stages .scan-stages-panel>div em {
      display: block;
      margin-top: 8px;
      color: #475569;
      font-size: 12px;
  }

  .drive-brands .drive-brands-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 24px;
  }

  .drive-brands .drive-brands-grid>div {
      display: flex;
      height: 96px;
      align-items: center;
      justify-content: center;
      padding: 16px;
      border: 1px solid #f1f5f9;
      border-radius: 16px;
      background: #f8fafc;
      transition: border-color 300ms, background 300ms, box-shadow 300ms, transform 300ms;
  }

  .drive-brands .drive-brands-grid>div:hover {
      border-color: #cbd5e1;
      background: #ffffff;
      box-shadow: 0 12px 22px rgba(148, 163, 184, 0.18);
      transform: scale(1.03);
  }

  .drive-brands .drive-brands-grid img {
      display: block;
      width: 100%;
      max-width: 140px;
      height: 50px;
      object-fit: contain;
  }

  .drive-brands .drive-brands-note {
      margin: 48px 0 0;
      color: #94a3b8;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
  }

  .drive-brands .drive-brands-note i {
      margin-right: 6px;
      color: #22bde9;
  }

  .hdd-faq .hdd-faq-container {
      width: 100%;
      max-width: 928px;
      margin: 0 auto;
      padding: 0 16px;
  }

  .hdd-faq .hdd-faq-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  .hdd-faq .hdd-faq-item {
      overflow: hidden;
      border: 1px solid rgba(203, 213, 225, 0.5);
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
  }

  .hdd-faq .hdd-faq-item button {
      position: relative;
      display: block;
      width: 100%;
      padding: 24px 64px 24px 24px;
      border: 0;
      color: #020617;
      background: #ffffff;
      text-align: left;
      font-size: 16px;
      font-weight: 900;
      cursor: pointer;
      transition: background 200ms;
  }

  .hdd-faq .hdd-faq-item button:hover {
      background: #f8fafc;
  }

  .hdd-faq .hdd-faq-item button i {
      position: absolute;
      top: 50%;
      right: 24px;
      display: flex;
      width: 24px;
      height: 24px;
      align-items: center;
      justify-content: center;
      border: 1px solid #f1f5f9;
      border-radius: 24px;
      color: #64748b;
      background: #f8fafc;
      font-size: 13px;
      transform: translateY(-50%);
      transition: color 200ms, background 200ms, border-color 200ms, transform 200ms;
  }

  .hdd-faq .hdd-faq-item.open button i {
      border-color: #cffafe;
      color: #22bde9;
      background: #ecfeff;
      transform: translateY(-50%) rotate(180deg);
  }

  .hdd-faq .hdd-faq-item>p {
      display: none;
      margin: 0;
      padding: 16px 24px 24px;
      border-top: 1px solid #f8fafc;
      color: #475569;
      font-size: 14px;
      line-height: 23px;
  }

  .hdd-cta {
      position: relative;
      padding: 96px 0;
      overflow: hidden;
      color: #1e293b;
      background: linear-gradient(135deg, #f8fafc, #ffffff, #e7faff);
      text-align: center;
  }

  .hdd-cta .hdd-cta-background {
      position: absolute;
      inset: 0;
      opacity: 0.35;
      background-image:
          linear-gradient(to right, #f1f5f9 1px, transparent 1px),
          linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
      background-size: 64px 64px;
  }

  .hdd-cta .hdd-cta-container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 928px;
      margin: 0 auto;
      padding: 0 16px;
  }

  .hdd-cta .hdd-cta-container>i {
      color: #020617;
      font-size: 48px;
  }

  .hdd-cta .hdd-cta-container h2 {
      margin: 20px 0 0;
      color: #020617;
      font-size: 48px;
      font-weight: 900;
      line-height: 55px;
      letter-spacing: -1.5px;
  }

  .hdd-cta .hdd-cta-container>p {
      max-width: 576px;
      margin: 24px auto 0;
      color: #475569;
      font-size: 16px;
      line-height: 26px;
  }

  .hdd-cta .hdd-cta-container>.text-small {
      display: block;
      margin-top: 24px;
      color: #94a3b8;
      font-size: 11px;
      font-weight: 700;
  }

  @media (max-width: 1000px) {
      .hdd-hero .hdd-hero-engine-layout {
          grid-template-columns: 1fr;
      }

      .hdd-hero .hdd-hero-engine-image img {
          margin: 0 auto;
      }

      .drive-journey .drive-journey-list {
          grid-template-columns: repeat(2, 1fr);
      }

      .drive-journey .drive-journey-list::before {
          display: none;
      }

      .drive-types .drive-types-grid,
      .recoverable-data .recoverable-data-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .drive-problems .drive-problems-container,
      .scan-stages .scan-stages-layout {
          grid-template-columns: 1fr;
      }

      .recovery-science .recovery-science-flow {
          grid-template-columns: repeat(2, 1fr);
      }

      .recovery-science .recovery-science-flow::before {
          display: none;
      }

      .drive-brands .drive-brands-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (max-width: 640px) {
      .hdd-hero {
          padding: 88px 0 72px;
      }

      .hdd-hero .hdd-hero-letter {
          top: 80px;
          font-size: 420px;
          line-height: 420px;
      }

      .hdd-hero .hdd-hero-heading h1 {
          font-size: 40px;
          line-height: 45px;
          letter-spacing: -1px;
      }

      .hdd-hero .hdd-hero-heading>p {
          font-size: 16px;
          line-height: 25px;
      }

      .hdd-hero .hdd-hero-downloads,
      .hdd-cta .hdd-cta-downloads {
          flex-direction: column;
          align-items: center;
      }

      .hdd-hero .hdd-hero-downloads a,
      .hdd-cta .hdd-cta-downloads a {
          width: 100%;
          max-width: 286px;
      }

      .hdd-hero .hdd-hero-engine {
          padding: 12px;
          border-radius: 28px;
      }

      .hdd-hero .hdd-hero-engine-layout {
          padding: 12px;
      }

      .hdd-hero .hdd-hero-engine-specs {
          grid-template-columns: 1fr;
      }

      .drive-journey,
      .drive-types,
      .drive-problems,
      .recoverable-data,
      .recovery-science,
      .scan-stages,
      .drive-brands,
      .hdd-faq,
      .hdd-cta {
          padding: 72px 0;
      }

      .drive-journey .drive-journey-heading,
      .drive-types .drive-types-heading,
      .recoverable-data .recoverable-data-heading,
      .recovery-science .recovery-science-heading,
      .scan-stages .scan-stages-heading,
      .drive-brands .drive-brands-heading,
      .hdd-faq .hdd-faq-heading {
          margin-bottom: 40px;
      }

      .drive-journey .drive-journey-heading h2,
      .drive-types .drive-types-heading h2,
      .drive-problems .drive-problems-intro h2,
      .recoverable-data .recoverable-data-heading h2,
      .recovery-science .recovery-science-heading h2,
      .scan-stages .scan-stages-heading h2,
      .drive-brands .drive-brands-heading h2,
      .hdd-faq .hdd-faq-heading h2 {
          font-size: 30px;
          line-height: 36px;
      }

      .drive-journey .drive-journey-list,
      .drive-types .drive-types-grid,
      .recoverable-data .recoverable-data-grid,
      .recovery-science .recovery-science-flow {
          grid-template-columns: 1fr;
      }

      .drive-journey .drive-journey-card {
          min-height: 0;
      }

      .drive-journey .drive-journey-note {
          border-radius: 20px;
          font-size: 14px;
          line-height: 21px;
      }

      .drive-types .drive-types-card {
          min-height: 0;
      }

      .drive-problems .drive-problems-table {
          padding: 16px;
      }

      .drive-problems .drive-problems-table li {
          align-items: flex-start;
          gap: 12px;
      }

      .drive-problems .drive-problems-table .text-small {
          max-width: 155px;
          text-align: right;
      }

      .scan-stages .scan-stages-panel {
          min-height: 390px;
          padding: 24px;
          border-radius: 28px;
      }

      .drive-brands .drive-brands-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 14px;
      }

      .drive-brands .drive-brands-grid>div {
          height: 86px;
          padding: 10px;
      }

      .hdd-faq .hdd-faq-item button {
          padding: 21px 55px 21px 20px;
          font-size: 14px;
      }

      .hdd-faq .hdd-faq-item button i {
          right: 18px;
      }

      .hdd-cta .hdd-cta-container h2 {
          font-size: 36px;
          line-height: 43px;
      }
  }