:root {
      --primary: #DC2626;
      --primary-300: #EF4444;
      --accent: #00C896;
      --accent-300: #00E6A8;

      --bg: #0B0E11;
      --panel: rgba(23, 26, 32, .86);
      --text: #EAECEF;
      --muted: #B7BDC6;
      --dim: #8E99A7;
      --b1: rgba(220, 38, 38, .16);
      --b2: rgba(220, 38, 38, .28);
      --panel-contrast: #0b0f13;
      --shadow: 0 14px 40px rgba(0, 0, 0, .35);
      --edge: rgba(255, 255, 255, .06);
  }

  @media (prefers-color-scheme: light) {
      :root {
          --bg: #f7f8fa;
          --panel: rgba(255, 255, 255, .9);
          --panel-contrast: #fff;
          --text: #151922;
          --muted: #475161;
          --dim: #667085;
          --b1: rgba(220, 38, 38, .18);
          --b2: rgba(220, 38, 38, .26);
          --shadow: 0 10px 24px rgba(16, 24, 40, .12);
          --edge: rgba(16, 24, 40, .06);
      }
  }

  :root {
      --grad-primary: linear-gradient(135deg, var(--primary), var(--primary-300));
      --container: 1200px;
      --r-m: 14px;
      --r-l: 18px;
  }

  *,
  *::before,
  *::after {
      box-sizing: border-box
  }

  html {
      scroll-behavior: smooth
  }

  input.error, textarea.error, select.error {
    border: 2px solid red;
}

  @media(prefers-reduced-motion:reduce) {
      html {
          scroll-behavior: auto
      }

      * {
          animation-duration: .01ms !important;
          transition-duration: .01ms !important
      }
  }

  body {
      margin: 0;
      background:
          radial-gradient(90vw 70vw at 10% -10%, rgba(220, 38, 38, .06), transparent 60%),
          radial-gradient(60vw 50vw at 110% 10%, rgba(0, 200, 150, .05), transparent 60%),
          var(--bg);
      color: var(--text);
      font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
      line-height: 1.6;
      min-height: 100dvh;
      overflow-x: hidden;
      position: relative;
  }

  body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url('assets/img/bck.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      opacity: 0.03;
      z-index: -1;
      pointer-events: none;
  }

  .container {
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: 24px
  }

  .skip-link {
      position: absolute;
      left: 10px;
      top: -50px;
      background: #fff;
      color: #111;
      padding: 10px 14px;
      border-radius: 8px;
      font-weight: 800;
      z-index: 9
  }

  .skip-link:focus {
      top: 10px;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, .4)
  }

  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0
  }

  #loading-screen {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      opacity: 1;
      transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  #loading-screen.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
  }

  .loading-content {
      text-align: center;
      animation: fadeInUp 0.8s ease;
  }

  .loading-logo {
      width: 400px;
      height: auto;
      margin-bottom: 30px;
      animation: pulse 2s ease-in-out infinite;
  }

  .loading-spinner {
      width: 50px;
      height: 50px;
      border: 4px solid rgba(220, 38, 38, 0.2);
      border-top: 4px solid #DC2626;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto;
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px)
      }

      to {
          opacity: 1;
          transform: translateY(0)
      }
  }

  @keyframes pulse {

      0%,
      100% {
          transform: scale(1);
          opacity: 1
      }

      50% {
          transform: scale(1.05);
          opacity: 0.8
      }
  }

  @keyframes spin {
      to {
          transform: rotate(360deg)
      }
  }


  @keyframes Pulse {

      0%,
      100% {
          transform: scale(1)
      }

      50% {
          transform: scale(1.05)
      }
  }


  /* ================== Logo Top ================== */
  .logo-top {
      position: static;
      z-index: 1000
  }

  .logo-top .container {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0;
      gap: 20px
  }

  .logo-top .logo {
      display: block;
      text-decoration: none
  }

  .logo-top .logo img {
      width: 144px;
      height: 96px;
      object-fit: contain
  }

  .logo-top .nav-links {
      display: flex;
      gap: 30px
  }

  .logo-top .nav-links a {
      color: var(--text);
      text-decoration: none;
      font-weight: 500;
      transition: color .2s ease
  }

  .logo-top .nav-links a:hover {
      color: var(--grad-primary)
  }

  #progress {
      position: fixed;
      inset: 0 auto auto 0;
      height: 3px;
      background: var(--grad-primary);
      width: 0;
      z-index: 9999;
      box-shadow: 0 6px 18px rgba(220, 38, 38, .35)
  }


  @media(max-width:768px) {
      .logo-top .container {
          flex-direction: row;
          justify-content: space-between;
          gap: 10px;
          align-items: center
      }

      .logo-top .nav-links {
          flex-wrap: wrap;
          justify-content: flex-end;
          gap: 15px
      }

      .logo-top .nav-links a {
          font-size: 13px;
          padding: 6px 10px;
          min-height: 36px;
          display: flex;
          align-items: center;
          justify-content: center
      }

      .hero .container {
          grid-template-columns: 1fr;
          gap: 40px
      }

      .hero-content {
          text-align: center
      }

      .cta-buttons {
          justify-content: center
      }

      .success-rate {
          text-align: center
      }

      .features-grid {
          grid-template-columns: 1fr;
          gap: 30px
      }

      .testimonials-grid {
          grid-template-columns: 1fr;
          gap: 30px
      }

      .faq-grid {
          grid-template-columns: 1fr
      }

      .contact-grid {
          grid-template-columns: 1fr;
          gap: 30px
      }

      .container {
          padding-inline: 16px
      }

      .fl input,
      .fl select,
      .fl textarea {
          min-height: 48px;
          font-size: 16px
      }

      .cta-btn {
          min-height: 48px;
          padding: 16px 24px
      }
  }

  @media(max-width:480px) {
      .logo-top .logo img {
          width: 80px;
          height: 53px
      }

      .loading-logo {
          width: 280px
      }

      .logo-top .nav-links a {
          font-size: 12px;
          padding: 4px 8px;
          min-height: 32px
      }

      .hero {
          padding: 30px 0 50px
      }

      .hero h1 {
          font-size: 22px
      }

      .hero p {
          font-size: 14px
      }

      .cta-buttons {
          flex-direction: column;
          align-items: center
      }

      .cta-buttons .btn {
          width: 100%;
          max-width: 280px
      }

      .features-grid {
          gap: 20px
      }

      .testimonials-grid {
          gap: 20px
      }

      .contact-grid {
          gap: 20px
      }

      .container {
          padding-inline: 12px
      }

      .hero-form {
          padding: 16px
      }
  }

  @media(min-width:1200px) {
      .container {
          max-width: 1400px
      }

      .hero .container {
          gap: 100px
      }

      .features-grid {
          grid-template-columns: repeat(3, 1fr)
      }

      .testimonials-grid {
          grid-template-columns: repeat(3, 1fr)
      }
  }

  @media(max-width:400px) {
      .logo-top .container {
          flex-direction: column;
          gap: 8px;
          text-align: center
      }

      .logo-top .nav-links {
          justify-content: center;
          gap: 10px
      }

      .logo-top .nav-links a {
          font-size: 11px;
          padding: 3px 6px;
          min-height: 28px
      }

      .hero h1 {
          font-size: 20px
      }

      .hero p {
          font-size: 13px
      }

      .success-rate {
          padding: 10px 14px
      }

      .percentage {
          font-size: 18px
      }
  }

  /* Touch-friendly improvements */
  @media(hover:none) and (pointer:coarse) {
      .cta-btn:hover {
          transform: none
      }

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

      .fl input:focus,
      .fl select:focus,
      .fl textarea:focus {
          box-shadow: 0 0 0 2px rgba(240, 185, 11, .28)
      }
  }

  /* High contrast mode support */
  @media(prefers-contrast:high) {
      .logo-top {
          border-bottom: 2px solid var(--text)
      }

      .cta-btn {
          border: 2px solid currentColor
      }

      .fl input,
      .fl select,
      .fl textarea {
          border: 2px solid var(--text)
      }
  }

  /* Reduced motion support */
  @media(prefers-reduced-motion:reduce) {
      .orb {
          animation: none
      }

      .cta-btn {
          transition: none
      }

      .fl label {
          transition: none
      }
  }

  /* ================== SVG Icon system ================== */
  .i {
      width: 1.15em;
      height: 1.15em;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      vertical-align: -2px
  }

  .i-2x {
      width: 28px;
      height: 28px
  }

  /* ================== Hero + Orbs ================== */
  .hero {
      position: relative;
      padding: clamp(60px, 10vw, 100px) 0 clamp(80px, 10vw, 120px);
      isolation: isolate
  }

  .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('assets/img/bck.jpg');
      background-size: cover;
      background-position: center;
      opacity: 0.05;
      z-index: -1;
      pointer-events: none;
  }

  .hero .container {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(26px, 6vw, 80px);
      align-items: center
  }

  @media(max-width:960px) {
      .hero .container {
          grid-template-columns: 1fr
      }

      .hero-content {
          text-align: center
      }
  }

  .orbs {
      position: absolute;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      overflow: hidden
  }

  .orb {
      position: absolute;
      filter: blur(40px);
      opacity: .18;
      border-radius: 50%
  }

  .orb--gold {
      background: #DC2626;
      width: 480px;
      height: 480px;
      left: -120px;
      top: -120px
  }

  .orb--mint {
      background: #00C896;
      width: 420px;
      height: 420px;
      right: -120px;
      bottom: -140px
  }

  .success-rate {
      display: inline-block;
      padding: 14px 18px;
      border-radius: 12px;
      background: var(--grad-primary);
      color: #fff;
      font-weight: 800;
      box-shadow: 0 18px 50px rgba(220, 38, 38, .22)
  }

  .percentage {
      display: block;
      font-size: clamp(20px, 4.2vw, 30px);
      line-height: 1
  }

  .hero h1 {
      font-size: clamp(28px, 5.2vw, 56px);
      line-height: 1.15;
      margin: 18px 0 12px;
      letter-spacing: -.01em
  }

  .hero p {
      color: var(--muted);
      max-width: 60ch;
      margin: 0 0 26px;
      font-size: clamp(16px, 2.2vw, 18px)
  }

  .cta-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
  }

  .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 20px;
      border-radius: 12px;
      font-weight: 800;
      text-decoration: none;
      border: 1px solid transparent;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease
  }

  .cta-primary {
      background: var(--grad-primary);
      color: #0B0E11;
      box-shadow: 0 14px 32px rgba(240, 185, 11, .28)
  }

  .cta-primary:hover {
      transform: translateY(-2px)
  }

  .cta-secondary {
      background: transparent;
      color: var(--primary);
      border-color: var(--primary)
  }

  .cta-secondary:hover {
      background: var(--primary);
      color: #0B0E11
  }

  .magnet {
      --tx: 0;
      --ty: 0;
      transform: translate(var(--tx), var(--ty));
      will-change: transform
  }

  .hero-form {
      position: relative;
      background: var(--panel);
      border: 1px solid var(--b1);
      border-radius: var(--r-l);
      padding: clamp(20px, 4vw, 40px);
      box-shadow: var(--shadow);
      overflow: hidden
  }

  .hero-form::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: conic-gradient(from 180deg at 50% 50%, rgba(240, 185, 11, .4), rgba(255, 255, 255, .0), rgba(240, 185, 11, .25));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: .18
  }

  #message {
      margin-top: 10px;
      color: green;
      font-weight: bold;
      display: none;
  }

  .hero-form-title h3 {
      margin: 0 0 6px;
      font-size: clamp(18px, 3vw, 24px)
  }

  .hero-form-title p {
      margin: 0 0 18px;
      color: var(--dim);
      font-size: 14px
  }

  /* Floating labels */
  .fl {
      position: relative
  }

  .fl input,
  .fl select,
  .fl textarea {
      width: 100%;
      padding: 18px 14px 14px;
      border-radius: 12px;
      border: 1px solid var(--b1);
      background: var(--panel-contrast);
      color: var(--text);
      font-size: 16px;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
      -webkit-appearance: none;
      appearance: none
  }

  .fl textarea {
      min-height: 120px;
      resize: vertical
  }

  .fl label {
      position: absolute;
      left: 12px;
      top: 12px;
      color: var(--dim);
      font-size: 13px;
      padding: 0 6px;
      background: linear-gradient(var(--panel-contrast), var(--panel-contrast)) padding-box;
      border-radius: 4px;
      transition: transform .18s ease, color .18s ease, font-size .18s ease, top .18s ease
  }

  .fl:focus-within label,
  .fl input:not(:placeholder-shown)+label,
  .fl select:valid+label,
  .fl textarea:not(:placeholder-shown)+label {
      top: -8px;
      left: 10px;
      font-size: 11px;
      color: var(--primary);
      transform: translateY(0)
  }

  .hero-form input:focus,
  .hero-form select:focus,
  .hero-form textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(240, 185, 11, .28)
  }

  .hero-form .submit-btn {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 12px;
      background: var(--grad-primary);
      color: #0B0E11;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(240, 185, 11, .25);
      transition: transform .18s ease, box-shadow .18s ease
  }

  .hero-form .submit-btn:hover:not(:disabled) {
      transform: translateY(-2px)
  }

  .hero-form .submit-btn:disabled {
      opacity: .7;
      cursor: not-allowed
  }

  .main-content {
      padding: clamp(48px, 8vw, 80px) 0
  }

  .section {
      margin-bottom: clamp(60px, 10vw, 100px)
  }

  .section-title {
      text-align: center;
      margin-bottom: clamp(36px, 6vw, 70px)
  }

  .section-title h2 {
      font-size: clamp(24px, 4.6vw, 42px);
      margin: 0 0 10px;
      letter-spacing: -.01em
  }

  .section-title h2::after {
      content: "";
      display: block;
      height: 3px;
      width: 90px;
      margin: 12px auto 0;
      background: var(--grad-primary);
      border-radius: 2px
  }

  .section-title p {
      color: var(--muted);
      max-width: 60ch;
      margin: 0 auto
  }

  .grid {
      display: grid;
      gap: clamp(18px, 3vw, 30px)
  }

  .features-grid {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
  }

  .stories-grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
  }

  .team-grid {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
  }

  .legal-grid,
  .regions-grid {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
  }

  .card {
      position: relative;
      background: var(--panel);
      border: 1px solid var(--edge);
      border-radius: var(--r-m);
      padding: clamp(20px, 3vw, 32px);
      box-shadow: var(--shadow);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
      transform-style: preserve-3d
  }

  .card:hover {
      transform: translateY(-4px);
      border-color: var(--b2)
  }

  .card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .08), transparent 60%);
      opacity: 0;
      transition: opacity .18s ease;
      pointer-events: none
  }

  .card:hover::after {
      opacity: 1
  }

  .icon {
      width: 64px;
      height: 64px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: var(--grad-primary);
      color: #0B0E11;
      box-shadow: 0 12px 28px rgba(240, 185, 11, .25);
      margin-inline: auto;
      margin-bottom: 14px
  }

  .icon .i {
      width: 28px;
      height: 28px
  }

  .process-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: clamp(16px, 3vw, 30px)
  }

  .process-step {
      text-align: center
  }

  .step-number {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      margin: 0 auto 12px;
      display: grid;
      place-items: center;
      background: var(--grad-primary);
      color: #0B0E11;
      font-weight: 900;
      font-size: 22px;
      box-shadow: 0 12px 28px rgba(240, 185, 11, .25)
  }

  .scam-types-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: clamp(18px, 3vw, 30px);
      margin-top: clamp(20px, 4vw, 40px)
  }

  .scam-type-card ul {
      list-style: none;
      margin: 0;
      padding: 0
  }

  .scam-type-card li {
      position: relative;
      padding: 8px 0 8px 22px;
      border-bottom: 1px solid var(--edge);
      color: var(--dim)
  }

  .scam-type-card li:last-child {
      border-bottom: none
  }

  .scam-type-card li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--primary);
      font-weight: 900
  }

  .statistics-section {
      background: var(--panel);
      border: 1px solid var(--edge);
      border-radius: var(--r-l);
      padding: clamp(28px, 5vw, 56px) 0
  }

  .statistics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: clamp(16px, 3vw, 30px);
      margin-top: clamp(24px, 4vw, 50px)
  }

  .stat-number {
      font-size: clamp(26px, 4.6vw, 42px);
      font-weight: 900;
      color: var(--primary)
  }

  .stat-label {
      font-weight: 800;
      margin: 6px 0 4px
  }

  .stat-description {
      color: var(--dim)
  }

  .member-avatar {
      width: 96px;
      height: 96px;
      border-radius: 14px;
      margin: 0 auto 12px;
      overflow: hidden;
      border: 1px solid var(--edge);
      background: #000
  }

  .member-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .25s ease
  }

  .team-member:hover .member-avatar img {
      transform: scale(1.06)
  }

  .member-title {
      color: var(--primary);
      font-weight: 900;
      margin-bottom: 8px
  }

  .member-credentials {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center
  }

  .credential {
      background: var(--grad-primary);
      color: #0B0E11;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 900
  }

  .faq-container {
      max-width: 860px;
      margin: 24px auto 0
  }

  .faq-item {
      background: var(--panel);
      border: 1px solid var(--edge);
      border-radius: 12px;
      overflow: hidden
  }

  .faq-question {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 20px;
      background: rgba(255, 255, 255, 0.95);
      cursor: pointer;
      border: none;
      color: inherit;
      text-align: left;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: background 0.2s ease, box-shadow 0.2s ease
  }

  .faq-question:hover {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12)
  }

  .faq-question h3 {
      margin: 0;
      font-size: clamp(16px, 2.6vw, 18px);
      font-weight: 800
  }

  .faq-ripple {
      position: absolute;
      inset: auto;
      transform: translate(-50%, -50%);
      pointer-events: none;
      border-radius: 999px;
      opacity: .14;
      background: currentColor;
      width: 0;
      height: 0
  }

  .faq-item+.faq-item {
      margin-top: 12px
  }

  .faq-icon {
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      color: var(--primary)
  }

  .faq-icon path {
      transition: transform .22s ease, opacity .22s ease
  }

  .faq-item[aria-expanded="true"] .faq-icon path.minus {
      opacity: 1;
      transform: scale(1)
  }

  .faq-item[aria-expanded="true"] .faq-icon path.plus {
      opacity: 0;
      transform: scale(.6)
  }

  .faq-answer {
      height: 0;
      overflow: hidden;
      padding: 0 20px;
      background: rgba(10, 12, 15, .5);
      border-top: 1px solid var(--edge);
      transition: height .28s ease, padding .28s ease
  }

  .faq-item[aria-expanded="true"] .faq-answer {
      padding: 16px 20px
  }

  .coverage-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: clamp(16px, 3vw, 30px);
      margin: clamp(24px, 4vw, 50px) 0
  }

  .coverage-number {
      font-size: clamp(26px, 4.6vw, 42px);
      font-weight: 900;
      color: var(--primary)
  }

  .coverage-label {
      font-weight: 800
  }

  .region-countries {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
  }

  .region-countries span {
      background: var(--grad-primary);
      color: #0B0E11;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 900
  }

  /* Footer */
  footer {
      background: rgba(11, 14, 17, .94);
      border-top: 1px solid var(--b2);
      box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
      padding: clamp(48px, 8vw, 120px) 0 56px
  }

  .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: clamp(18px, 3vw, 50px);
      margin-bottom: clamp(24px, 4vw, 50px)
  }

  .footer-section {
      border: 1px solid var(--edge);
      background: rgba(30, 32, 38, .6);
      padding: clamp(16px, 3vw, 24px);
      border-radius: var(--r-m);
      transition: transform .18s ease, border-color .18s ease, background .18s ease
  }

  .footer-section:hover {
      transform: translateY(-3px);
      border-color: var(--b2);
      background: rgba(30, 32, 38, .82)
  }

  .footer-section h3 {
      margin: 0 0 12px;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-size: clamp(16px, 2.8vw, 18px)
  }

  .footer-section h3::after {
      content: "";
      display: block;
      width: 60px;
      height: 2px;
      background: var(--grad-primary);
      border-radius: 2px;
      margin-top: 8px
  }

  .footer-section p,
  .footer-section a {
      color: var(--dim);
      text-decoration: none;
      display: block;
      margin: 8px 0;
      font-weight: 500
  }

  .footer-section a:hover {
      color: var(--primary)
  }

  .footer-bottom {
      text-align: center;
      padding-top: 24px;
      border-top: 1px solid var(--edge);
      color: var(--muted);
      font-weight: 800
  }

  .footer-nav {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 16px;
      flex-wrap: wrap
  }

  .footer-nav a {
      color: var(--muted);
      text-decoration: none;
      font-size: 14px;
      transition: color .2s ease
  }

  .footer-nav a:hover {
      color: var(--primary)
  }

  .to-top {
      position: fixed;
      right: 18px;
      bottom: 78px;
      z-index: 9;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #0B0E11;
      background: var(--grad-primary);
      border: none;
      box-shadow: 0 12px 28px rgba(240, 185, 11, .25);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity .18s ease, visibility .18s ease, transform .18s ease
  }

  .to-top.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
  }

  .to-top:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(240, 185, 11, .28), 0 12px 28px rgba(240, 185, 11, .25)
  }