/* ============================================================
   X-05
   Black / Frosted Glass / White Glow
   Mobile-first stylesheet
   ============================================================ */


/* ============================================================
   Reset
   ============================================================ */

   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   html {
       scroll-behavior: smooth;
   }
   
   html,
   body {
       margin: 0;
       padding: 0;
       min-height: 100%;
   }
   
   /* 1. Define the custom font first */
@font-face {
    font-family: 'Orbitron';
    src: url("../fonts/Orbitron-VariableFont_wght.ttf") format('truetype');
    font-weight: 100 900; /* Supports the full range of a variable font */
    font-style: normal;
}

/* 2. Apply it to the body */
body {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255, 255, 255, 0.08),
            transparent 35%
        ),
        #000000;

    color: #f5f5f5;

    /* Added Orbitron as the primary font choice */
    font-family:
        "Orbitron",
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 16px;
    line-height: 1.65;

    min-height: 100vh;

    overflow-x: hidden;
}

   
   
   /* ============================================================
      Global Elements
      ============================================================ */
   
   img {
       max-width: 100%;
       height: auto;
       display: block;
   }
   
   a {
       color: #ffffff;
       text-decoration: none;
       transition:
           color 0.2s ease,
           opacity 0.2s ease,
           text-shadow 0.2s ease;
   }
   
   a:hover {
       color: #ffffff;
       text-shadow:
           0 0 8px rgba(255, 255, 255, 0.65),
           0 0 18px rgba(255, 255, 255, 0.25);
   }
   
   button,
   input,
   select,
   textarea {
       font: inherit;
   }
   
   
   /* ============================================================
      Typography
      ============================================================ */
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       color: #ffffff;
       line-height: 1.2;
       margin-top: 0;
   
       text-shadow:
           0 0 12px rgba(255, 255, 255, 0.12);
   }
   
   h1 {
       font-size: clamp(2.2rem, 8vw, 4.5rem);
       letter-spacing: -0.04em;
   }
   
   h2 {
       font-size: clamp(1.7rem, 5vw, 2.6rem);
   }
   
   h3 {
       font-size: clamp(1.2rem, 4vw, 1.6rem);
   }
   
   p {
       margin-top: 0;
   }
   
   strong {
       color: #ffffff;
   }
   
   .text-center {
       text-align: center;
   }
   
   .text-muted {
       color: rgba(255, 255, 255, 0.58);
   }
   
   .lead {
       font-size: clamp(1.05rem, 3vw, 1.35rem);
       color: rgba(255, 255, 255, 0.75);
   }
   
   .highlight {
       color: #ffffff;
   
       text-shadow:
           0 0 8px rgba(255, 255, 255, 0.8),
           0 0 24px rgba(255, 255, 255, 0.3);
   }
   
   
   /* ============================================================
      Layout
      ============================================================ */
   
   .container {
       width: min(1120px, calc(100% - 2rem));
       margin: 0 auto;
   }
   
   .flex-between {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
   }
   
   
   /* ============================================================
      Header
      ============================================================ */
   
   .site-header {
       position: sticky;
       top: 0;
       z-index: 1000;
   
       background: rgba(0, 0, 0, 0.72);
   
       border-bottom:
           1px solid rgba(255, 255, 255, 0.08);
   
       backdrop-filter: blur(18px);
       -webkit-backdrop-filter: blur(18px);
   
       box-shadow:
           0 8px 40px rgba(0, 0, 0, 0.55);
   }
   
   .site-header .container {
       min-height: 72px;
   
       display: flex;
       align-items: center;
       justify-content: space-between;
   
       gap: 1rem;
   }
   
   .logo {
       display: inline-flex;
       align-items: center;
       flex-shrink: 0;
   }
   
   .logo img {
       width: auto;
       height: 40px;
   
       filter:
           drop-shadow(0 0 8px rgba(255, 255, 255, 0.25));
   }
   
   
   /* ============================================================
      Navigation
      ============================================================ */
   
   nav {
       min-width: 0;
   }
   
   .nav-links {
       list-style: none;
   
       display: flex;
       align-items: center;
   
       gap: 0.75rem;
   
       margin: 0;
       padding: 0;
   
       overflow-x: auto;
       scrollbar-width: none;
   }
   
   .nav-links::-webkit-scrollbar {
       display: none;
   }
   
   .nav-links a {
       display: block;
   
       padding: 0.45rem 0.65rem;
   
       color: rgba(255, 255, 255, 0.72);
   
       font-size: 0.9rem;
       white-space: nowrap;
   
       border-radius: 10px;
   }
   
   .nav-links a:hover {
       color: #ffffff;
   
       background:
           rgba(255, 255, 255, 0.06);
   
       text-shadow:
           0 0 10px rgba(255, 255, 255, 0.7);
   }

   .text-large-bold {
        font-weight: bold; /* Makes text bold */
        font-size: 24px;   /* Sets size to 24 pixels */
  }
  
   
   
   /* ============================================================
      Main
      ============================================================ */
   
   main {
       min-height: 70vh;
   }
   
   section {
       padding: 2.5rem 0;
   }
   
   
   /* ============================================================
      Glass Cards
      ============================================================ */
   
   .card {
       position: relative;
   
       margin: 1rem 0;
       padding: clamp(1.25rem, 4vw, 2rem);
   
       background:
           linear-gradient(
               145deg,
               rgba(255, 255, 255, 0.085),
               rgba(255, 255, 255, 0.025)
           );
   
       border:
           1px solid rgba(255, 255, 255, 0.13);
   
       border-radius: 20px;
   
       box-shadow:
           0 12px 50px rgba(0, 0, 0, 0.55),
           inset 0 1px 0 rgba(255, 255, 255, 0.08);
   
       backdrop-filter: blur(18px);
       -webkit-backdrop-filter: blur(18px);
   
       overflow: hidden;
   }
   
   .card::before {
       content: "";
   
       position: absolute;
   
       top: 0;
       left: 10%;
       right: 10%;
   
       height: 1px;
   
       background:
           linear-gradient(
               90deg,
               transparent,
               rgba(255, 255, 255, 0.5),
               transparent
           );
   
       opacity: 0.45;
   }
   
   .card:hover {
       border-color:
           rgba(255, 255, 255, 0.2);
   
       box-shadow:
           0 18px 60px rgba(0, 0, 0, 0.65),
           0 0 30px rgba(255, 255, 255, 0.035),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
   }
   
   
   /* ============================================================
      Grid
      ============================================================ */
   
   .row {
       display: grid;
   
       grid-template-columns:
           repeat(
               auto-fit,
               minmax(
                   min(100%, 280px),
                   1fr
               )
           );
   
       gap: 1rem;
   }
   
   .col {
       min-width: 0;
   }
   
   
   /* ============================================================
      Hero
      ============================================================ */
   
   .hero {
       position: relative;
   
       padding:
           clamp(4rem, 12vw, 9rem)
           0
           clamp(3rem, 8vw, 6rem);
   
       overflow: hidden;
   }
   
   .hero::before {
       content: "";
   
       position: absolute;
   
       width: 420px;
       height: 420px;
   
       top: -180px;
       left: 50%;
   
       transform: translateX(-50%);
   
       background:
           radial-gradient(
               circle,
               rgba(255, 255, 255, 0.09),
               transparent 70%
           );
   
       filter: blur(20px);
   
       pointer-events: none;
   }
   
   .hero .container {
       position: relative;
       z-index: 1;
   }
   
   .hero h1 {
       margin-bottom: 1.25rem;
   }
   
   .hero p {
       max-width: 720px;
       margin-left: auto;
       margin-right: auto;
   }
   
   
   /* ============================================================
      How It Works
      ============================================================ */
   
   .how-it-works {
       padding-top: 2rem;
   }
   
   .steps-grid {
       display: grid;
   
       grid-template-columns:
           repeat(
               auto-fit,
               minmax(
                   min(100%, 220px),
                   1fr
               )
           );
   
       gap: 1rem;
   
       margin-top: 2rem;
   }
   
   .step {
       padding: 1.5rem;
   
       background:
           rgba(255, 255, 255, 0.035);
   
       border:
           1px solid rgba(255, 255, 255, 0.09);
   
       border-radius: 16px;
   
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, 0.05);
   }
   
   
   /* ============================================================
      Buttons
      ============================================================ */
   
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
   
       min-height: 44px;
   
       padding:
           0.7rem
           1.15rem;
   
       margin: 0.3rem;
   
       border:
           1px solid rgba(255, 255, 255, 0.16);
   
       border-radius: 12px;
   
       background:
           rgba(255, 255, 255, 0.06);
   
       color: #ffffff;
   
       font-weight: 600;
   
       cursor: pointer;
   
       transition:
           transform 0.2s ease,
           background 0.2s ease,
           box-shadow 0.2s ease,
           border-color 0.2s ease;
   }
   
   .btn:hover {
       color: #ffffff;
   
       background:
           rgba(255, 255, 255, 0.11);
   
       border-color:
           rgba(255, 255, 255, 0.3);
   
       box-shadow:
           0 0 18px rgba(255, 255, 255, 0.12);
   
       transform: translateY(-1px);
   }
   
   .btn:active {
       transform: translateY(0);
   }
   
   .btn-primary {
       background:
           rgba(255, 255, 255, 0.94);
   
       color: #000000;
   
       border-color:
           rgba(255, 255, 255, 0.95);
   
       box-shadow:
           0 0 18px rgba(255, 255, 255, 0.12);
   }
   
   .btn-primary:hover {
       background: #ffffff;
       color: #000000;
   
       box-shadow:
           0 0 28px rgba(255, 255, 255, 0.3);
   }
   
   .btn-accent {
       background:
           rgba(255, 255, 255, 0.1);
   
       border-color:
           rgba(255, 255, 255, 0.35);
   
       box-shadow:
           0 0 22px rgba(255, 255, 255, 0.08);
   }
   
   .btn-lg {
       min-height: 50px;
   
       padding:
           0.85rem
           1.5rem;
   
       font-size: 1.05rem;
   }
   
   
   /* ============================================================
      Forms
      ============================================================ */
   
   .form-group {
       margin-bottom: 1.25rem;
   }
   
   label {
       display: block;
   
       margin-bottom: 0.5rem;
   
       color: rgba(255, 255, 255, 0.85);
   
       font-weight: 600;
   }
   
   input,
   select,
   textarea {
       width: 100%;
   
       padding:
           0.8rem
           0.9rem;
   
       color: #ffffff;
   
       background:
           rgba(0, 0, 0, 0.45);
   
       border:
           1px solid rgba(255, 255, 255, 0.14);
   
       border-radius: 10px;
   
       outline: none;
   
       transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease,
           background 0.2s ease;
   }
   
   input:focus,
   select:focus,
   textarea:focus {
       border-color:
           rgba(255, 255, 255, 0.5);
   
       background:
           rgba(255, 255, 255, 0.045);
   
       box-shadow:
           0 0 0 3px rgba(255, 255, 255, 0.06),
           0 0 18px rgba(255, 255, 255, 0.05);
   }
   
   input::placeholder,
   textarea::placeholder {
       color:
           rgba(255, 255, 255, 0.35);
   }
   
   select option {
       background: #111111;
       color: #ffffff;
   }
   
   input[type="checkbox"] {
       width: auto;
   
       margin-right: 0.45rem;
   
       accent-color: #ffffff;
   }
   
   
   /* ============================================================
      Product Images
      ============================================================ */
   
   .card img {
       border-radius: 14px;
   
       margin-bottom: 1.25rem;
   
       border:
           1px solid rgba(255, 255, 255, 0.08);
   
       box-shadow:
           0 10px 35px rgba(0, 0, 0, 0.4);
   }
   
   
   /* ============================================================
      Horizontal Rule
      ============================================================ */
   
   hr {
       height: 1px;
   
       margin: 1.5rem 0;
   
       border: 0;
   
       background:
           linear-gradient(
               90deg,
               transparent,
               rgba(255, 255, 255, 0.14),
               transparent
           );
   }
   
   
   /* ============================================================
      CTA
      ============================================================ */
   
   .cta {
       position: relative;
   
       margin-top: 2rem;
   
       padding:
           clamp(3rem, 8vw, 6rem)
           0;
   
       background:
           radial-gradient(
               circle at center,
               rgba(255, 255, 255, 0.07),
               transparent 65%
           );
   }
   
   .cta h2 {
       margin-bottom: 1rem;
   }
   
   .cta p {
       max-width: 650px;
   
       margin:
           0 auto 1.5rem;
   
       color:
           rgba(255, 255, 255, 0.65);
   }
   
   
   /* ============================================================
      Footer
      ============================================================ */
   
   .site-footer {
       margin-top: 4rem;
       padding: 3rem 0 1.5rem;
   
       border-top:
           1px solid rgba(255, 255, 255, 0.08);
   
       background:
           rgba(0, 0, 0, 0.5);
   
       color:
           rgba(255, 255, 255, 0.65);
   }
   
   .footer-grid {
       display: grid;
   
       grid-template-columns:
           repeat(
               auto-fit,
               minmax(
                   min(100%, 220px),
                   1fr
               )
           );
   
       gap: 2rem;
   }
   
   .site-footer h4 {
       margin-bottom: 0.75rem;
   }
   
   .site-footer ul {
       list-style: none;
   
       margin: 0;
       padding: 0;
   }
   
   .site-footer li {
       margin-bottom: 0.5rem;
   }
   
   .site-footer a {
       color:
           rgba(255, 255, 255, 0.7);
   }
   
   .copyright {
       margin-top: 2.5rem;
   
       padding-top: 1.5rem;
   
       border-top:
           1px solid rgba(255, 255, 255, 0.07);
   
       text-align: center;
   
       font-size: 0.85rem;
   
       color:
           rgba(255, 255, 255, 0.42);
   }
   
   
   /* ============================================================
      Tables / Data
      ============================================================ */
   
   table {
       width: 100%;
   
       border-collapse: collapse;
   
       background:
           rgba(255, 255, 255, 0.025);
   
       border-radius: 12px;
   
       overflow: hidden;
   }
   
   th,
   td {
       padding: 0.75rem;
   
       text-align: left;
   
       border-bottom:
           1px solid rgba(255, 255, 255, 0.08);
   }
   
   th {
       color: #ffffff;
   }
   
   
   /* ============================================================
      Accessibility
      ============================================================ */
   
   :focus-visible {
       outline:
           2px solid rgba(255, 255, 255, 0.8);
   
       outline-offset: 3px;
   }
   
   
   /* ============================================================
      Mobile
      ============================================================ */
   
   @media (max-width: 700px) {
   
       .container {
           width: min(
               100% - 1.25rem,
               1120px
           );
       }
   
       .site-header .container {
           min-height: auto;
   
           padding:
               0.75rem 0;
   
           align-items: flex-start;
   
           flex-direction: column;
       }
   
       .site-header nav {
           width: 100%;
       }
   
       .nav-links {
           width: 100%;
   
           padding-bottom: 0.15rem;
       }
   
       .nav-links a {
           padding:
               0.45rem 0.55rem;
   
           font-size: 0.85rem;
       }
   
       section {
           padding: 1.75rem 0;
       }
   
       .hero {
           padding:
               3.5rem 0
               3rem;
       }
   
       .card {
           padding: 1.15rem;
   
           border-radius: 16px;
       }
   
       .flex-between {
           align-items: flex-start;
           flex-direction: column;
       }
   
       .btn {
           width: 100%;
   
           margin:
               0.3rem 0;
       }
   
       .btn + .btn {
           margin-top: 0.45rem;
       }
   
       .card .flex-between .btn {
           width: 100%;
       }
   
       h1 {
           word-break: break-word;
       }
   }
   
   
   /* ============================================================
      Small Phones
      ============================================================ */
   
   @media (max-width: 400px) {
   
       body {
           font-size: 15px;
       }
   
       .container {
           width: calc(100% - 1rem);
       }
   
       .hero h1 {
           font-size: 2.2rem;
       }
   
       .card {
           padding: 1rem;
       }
   
       .site-header .logo img {
           height: 34px;
       }
   }
   
   
   /* ============================================================
      Reduced Motion
      ============================================================ */
   
   @media (prefers-reduced-motion: reduce) {
   
       html {
           scroll-behavior: auto;
       }
   
       *,
       *::before,
       *::after {
           transition-duration: 0.01ms !important;
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
       }
   }