.contact-hero {
      position: relative;
      padding: 80px 0;
      overflow: hidden;
      border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  }

  .contact-hero .contact-hero-grid {
      position: absolute;
      inset: 0;
      opacity: 0.3;
      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 60% 50% at 50% 0%, #000 70%, transparent 100%);
  }

  .contact-hero .contact-hero-glow {
      position: absolute;
      top: 0;
      width: 384px;
      height: 384px;
      border-radius: 384px;
      filter: blur(64px);
  }

  .contact-hero .contact-hero-glow-left {
      left: 25%;
      background: rgba(165, 243, 252, 0.2);
  }

  .contact-hero .contact-hero-glow-right {
      top: 40px;
      right: 25%;
      background: rgba(199, 210, 254, 0.1);
  }

  .contact-hero .contact-hero-container {
      position: relative;
      z-index: 2;
      max-width: 896px;
      margin: 0 auto;
      padding: 0 16px;
      text-align: center;
  }

  .contact-hero .contact-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 24px;
      padding: 6px 14px;
      border: 1px solid #cffafe;
      border-radius: 999px;
      color: #22bde9;
      background: #ecfeff;
      font-size: 12px;
      font-weight: 600;
      line-height: 16px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
  }

  .contact-hero .contact-hero-badge i {
      font-size: 14px;
  }

  .contact-hero .contact-hero-container h1 {
      margin: 0 0 24px;
      color: #020617;
      font-size: 48px;
      font-weight: 800;
      line-height: 60px;
      letter-spacing: -1.2px;
  }

  .contact-hero .contact-hero-container>p {
      max-width: 672px;
      margin: 0 auto;
      color: #475569;
      font-size: 18px;
      line-height: 29px;
  }

  .contact-channels {
      padding: 64px 0;
  }

  .contact-channels .contact-channels-container {
      max-width: 1152px;
      margin: 0 auto;
      padding: 0 16px;
  }

  .contact-channels .contact-touch-card {
      display: grid;
      grid-template-columns: 5fr 7fr;
      align-items: center;
      gap: 32px;
      margin-bottom: 32px;
      padding: 32px;
      border: 1px solid rgba(226, 232, 240, 0.8);
      border-radius: 24px;
      background: #ffffff;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  }

  .contact-channels .contact-touch-copy h2 {
      margin: 0 0 16px;
      color: #0f172a;
      font-size: 24px;
      font-weight: 700;
      line-height: 32px;
  }

  .contact-channels .contact-touch-copy>p {
      margin: 0 0 16px;
      color: #475569;
      font-size: 14px;
      line-height: 23px;
  }

  .contact-channels .contact-touch-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 14px;
      border: 1px dashed #e2e8f0;
      border-radius: 12px;
      color: #64748b;
      background: rgba(248, 250, 252, 0.5);
  }

  .contact-channels .contact-touch-note>span {
      width: 6px;
      height: 6px;
      flex: 0 0 6px;
      margin-top: 6px;
      border-radius: 6px;
      background: #22bde9;
  }

  .contact-channels .contact-touch-note p {
      margin: 0;
      font-size: 12px;
      line-height: 16px;
  }

  .contact-channels .contact-email-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 24px;
      border: 1px solid #f1f5f9;
      border-radius: 16px;
      background: #f8fafc;
  }

  .contact-channels .contact-email-address {
      display: flex;
      align-items: center;
      gap: 16px;
  }

  .contact-channels .contact-email-address>i {
      display: flex;
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      color: #22bde9;
      background: rgba(34, 189, 233, 0.1);
      font-size: 24px;
  }

  .contact-channels .contact-email-address span {
      display: block;
      color: #94a3b8;
      font-size: 10px;
      line-height: 16px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
  }

  .contact-channels .contact-email-address a {
      color: #0f172a;
      font-size: 18px;
      font-weight: 800;
      line-height: 28px;
      transition: color 200ms ease;
  }

  .contact-channels .contact-email-address a:hover {
      color: #22bde9;
  }

  .contact-channels .contact-email-actions {
      display: flex;
      gap: 10px;
  }

  .contact-channels .contact-email-actions button,
  .contact-channels .contact-email-actions a {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      color: #334155;
      background: #ffffff;
      font-size: 12px;
      font-weight: 600;
      line-height: 16px;
      cursor: pointer;
      transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
  }

  .contact-channels .contact-email-actions a {
      padding: 10px 20px;
      border-color: #22bde9;
      color: #ffffff;
      background: #22bde9;
      font-weight: 700;
  }

  .contact-channels .contact-email-actions .is-copied {
      color: #059669;
  }

  .contact-channels .contact-guide-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
  }

  .contact-channels .contact-guide-card {
      display: flex;
      min-height: 282px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      padding: 32px;
      border: 1px solid rgba(226, 232, 240, 0.8);
      border-radius: 24px;
      background: #ffffff;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
      transition: border-color 300ms ease;
  }

  .contact-channels .contact-guide-card:hover {
      border-color: #cbd5e1;
  }

  .contact-channels .contact-guide-card>div>i {
      display: flex;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      border-radius: 12px;
      color: #22bde9;
      background: #ecfeff;
      font-size: 20px;
  }

  .contact-channels .contact-resource-card>div>i {
      color: #6366f1;
      background: #eef2ff;
  }

  .contact-channels .contact-guide-copy h3 {
      margin: 0 0 8px;
      color: #0f172a;
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
  }

  .contact-channels .contact-guide-copy p {
      margin: 0;
      color: #475569;
      font-size: 14px;
      line-height: 23px;
  }

  .contact-channels .contact-guide-card>a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding-top: 8px;
      color: #22bde9;
      font-size: 14px;
      font-weight: 700;
  }

  .contact-channels .contact-resource-card>a {
      color: #4f46e5;
  }

  .contact-help {
      padding: 64px 0;
      border-top: 1px solid rgba(226, 232, 240, 0.4);
      border-bottom: 1px solid rgba(226, 232, 240, 0.4);
      background: rgba(241, 245, 249, 0.5);
  }

  .contact-help .contact-help-container {
      max-width: 1024px;
      margin: 0 auto;
      padding: 0 16px;
  }

  .contact-help .contact-help-heading {
      max-width: 672px;
      margin: 0 auto 40px;
      text-align: center;
  }

  .contact-help .contact-help-heading h2 {
      margin: 0 0 8px;
      color: #020617;
      font-size: 30px;
      font-weight: 800;
      line-height: 36px;
  }

  .contact-help .contact-help-heading p {
      margin: 0;
      color: #64748b;
      font-size: 14px;
      line-height: 20px;
  }

  .contact-help .contact-help-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
  }

  .contact-help .contact-help-card {
      min-height: 196px;
      padding: 20px;
      border: 1px solid rgba(226, 232, 240, 0.6);
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
      text-align: left;
      transition: box-shadow 300ms ease;
  }

  .contact-help .contact-help-card:hover {
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }

  .contact-help .contact-help-card>i {
      display: flex;
      width: 36px;
      height: 36px;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      border-radius: 12px;
      font-size: 20px;
  }

  .contact-help .contact-help-product>i {
      color: #22bde9;
      background: rgba(236, 254, 255, 0.6);
  }

  .contact-help .contact-help-recovery>i {
      color: #6366f1;
      background: rgba(238, 242, 255, 0.6);
  }

  .contact-help .contact-help-trouble>i {
      color: #f43f5e;
      background: rgba(255, 241, 242, 0.6);
  }

  .contact-help .contact-help-feedback>i {
      color: #10b981;
      background: rgba(236, 253, 245, 0.6);
  }

  .contact-help .contact-help-card h3 {
      margin: 0 0 12px;
      color: #0f172a;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
  }

  .contact-help .contact-help-card p {
      margin: 0;
      color: #64748b;
      font-size: 12px;
      line-height: 18px;
  }

  .contact-before {
      padding: 64px 0;
  }

  .contact-before .contact-before-container {
      max-width: 896px;
      margin: 0 auto;
      padding: 0 16px;
  }

  .contact-before .contact-before-card {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 32px;
      padding: 40px;
      overflow: hidden;
      border: 1px solid #1e293b;
      border-radius: 24px;
      color: #ffffff;
      background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
      box-shadow: 0 20px 35px rgba(15, 23, 42, 0.15);
  }

  .contact-before .contact-before-glow {
      position: absolute;
      top: 0;
      right: 0;
      width: 256px;
      height: 256px;
      border-radius: 256px;
      background: rgba(6, 182, 212, 0.1);
      filter: blur(64px);
  }

  .contact-before .contact-before-card>i {
      position: relative;
      z-index: 2;
      display: flex;
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(6, 182, 212, 0.2);
      border-radius: 16px;
      color: #22bde9;
      background: rgba(6, 182, 212, 0.1);
      font-size: 24px;
  }

  .contact-before .contact-before-content {
      position: relative;
      z-index: 2;
      flex: 1;
  }

  .contact-before .contact-before-heading {
      margin-bottom: 24px;
  }

  .contact-before .contact-before-heading h2 {
      margin: 0 0 8px;
      color: #ffffff;
      font-size: 24px;
      font-weight: 700;
      line-height: 32px;
  }

  .contact-before .contact-before-heading p {
      margin: 0;
      color: #94a3b8;
      font-size: 14px;
      line-height: 20px;
  }

  .contact-before .contact-before-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 16px;
  }

  .contact-before .contact-before-grid>div {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
  }

  .contact-before .contact-before-grid i {
      flex: 0 0 auto;
      margin-top: 2px;
      color: #22bde9;
      font-size: 16px;
  }

  .contact-before .contact-before-grid span {
      color: #cbd5e1;
      font-size: 12px;
      font-weight: 500;
      line-height: 15px;
  }

  .contact-before .contact-before-note {
      margin: 0;
      color: #64748b;
      font-size: 11px;
      font-style: italic;
      line-height: 16px;
  }

  .contact-cta {
      position: relative;
      padding: 64px 0;
      overflow: hidden;
      border-top: 1px solid rgba(29, 164, 204, 0.2);
      color: #ffffff;
      background: linear-gradient(135deg, #22bde9 0%, #2ac0c1 100%);
      text-align: center;
  }

  .contact-cta .contact-cta-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 255, 255, 0.15), transparent);
  }

  .contact-cta .contact-cta-container {
      position: relative;
      z-index: 2;
      max-width: 672px;
      margin: 0 auto;
      padding: 0 16px;
  }

  .contact-cta .contact-cta-heading {
      margin-bottom: 24px;
  }

  .contact-cta .contact-cta-heading h2 {
      margin: 0 0 12px;
      color: #ffffff;
      font-size: 36px;
      font-weight: 800;
      line-height: 40px;
      letter-spacing: -0.9px;
  }

  .contact-cta .contact-cta-heading p {
      max-width: 448px;
      margin: 0 auto;
      color: rgba(236, 254, 255, 0.9);
      font-size: 14px;
      line-height: 23px;
  }

  .contact-cta .contact-cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
  }

  .contact-cta .contact-cta-actions a {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border: 1px solid #ffffff;
      border-radius: 999px;
      color: #22bde9;
      background: #ffffff;
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
      font-size: 14px;
      font-weight: 700;
      line-height: 20px;
  }

  .contact-cta .contact-cta-actions a:last-child {
      border-color: rgba(255, 255, 255, 0.3);
      color: #ffffff;
      background: transparent;
      box-shadow: none;
  }

  @media (max-width: 1024px) {
      .contact-channels .contact-touch-card {
          grid-template-columns: 1fr;
      }

      .contact-channels .contact-email-box {
          width: 100%;
      }

      .contact-help .contact-help-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
  }

  @media (max-width: 768px) {
      .contact-page {
          padding-top: 0;
      }

      .contact-hero {
          padding: 64px 0;
      }

      .contact-hero .contact-hero-container h1 {
          font-size: 36px;
          line-height: 45px;
      }

      .contact-hero .contact-hero-container>p {
          font-size: 16px;
          line-height: 26px;
      }

      .contact-channels {
          padding: 48px 0;
      }

      .contact-channels .contact-touch-card {
          padding: 24px;
      }

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

      .contact-channels .contact-guide-card {
          min-height: 0;
          padding: 24px;
      }

      .contact-before .contact-before-card {
          flex-direction: column;
          gap: 24px;
          padding: 24px;
      }
  }

  @media (max-width: 640px) {
      .contact-hero .contact-hero-container h1 {
          font-size: 30px;
          line-height: 38px;
      }

      .contact-hero .contact-hero-container>p {
          font-size: 14px;
          line-height: 23px;
      }

      .contact-channels .contact-email-box {
          align-items: stretch;
          flex-direction: column;
      }

      .contact-channels .contact-email-actions {
          width: 100%;
      }

      .contact-channels .contact-email-actions button,
      .contact-channels .contact-email-actions a {
          flex: 1;
          justify-content: center;
      }

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

      .contact-help .contact-help-card {
          min-height: 0;
      }

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

      .contact-cta .contact-cta-heading h2 {
          font-size: 30px;
          line-height: 36px;
      }

      .contact-cta .contact-cta-actions {
          flex-direction: column;
      }
  }