/* =========================================================
   GLOBAL STYLES & CSS VARIABLES
   ========================================================= */

/* ---------------------------------------------------------
   Custom Font - Basis Grotesque Arabic Pro
   --------------------------------------------------------- */
@font-face {
  font-family: "Basis Grotesque Arabic Pro";
  src: url("../assets/fonts/BasisGrotesqueArabicPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basis Grotesque Arabic Pro";
  src: url("../assets/fonts/BasisGrotesqueArabicPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basis Grotesque Arabic Pro";
  src: url("../assets/fonts/BasisGrotesqueArabicPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basis Grotesque Arabic Pro";
  src: url("../assets/fonts/BasisGrotesqueArabicPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basis Grotesque Arabic Pro";
  src: url("../assets/fonts/BasisGrotesqueArabicPro-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

   :root {
    /* Brand font */
    --brand-font: "Orbitron", monospace;
  
    /* Colors */
    --tick-green-bg: #a0e92a;
    /* --tick-green-border: #22c55e; */
    --tick-green: #000000;
  
    /* Animation easing */
    --nav-speed: 1.15s;
    --nav-ease: cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  /* Visibility utilities */
  .mobile-only { display: none; }

  /* Reset & Base */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  * {
    margin: 0;
    padding: 0;
  }
  
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
  }

  body {
    font-family: "Basis Grotesque Arabic Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #0a0a0b;
    background: #ffffff;
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  
  /* Links */
  a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  
  a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
  }
  
  /* Buttons */
  button {
    font: inherit;
    cursor: pointer;
  }
  
  button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
  }
  
  /* Images */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  
  /* Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
    font-weight: 500;
  }
  
  p {
    overflow-wrap: break-word;
  }
  
  /* Section spacing */
  .section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .section-inner {
    width: 100%;
    max-width: min(1200px, 100%);
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  .section h3 {
    font-size: clamp(32px, 5vw, 48px);
    text-align: center;
  }
  
  /* Placeholder sections */
  .section-placeholder {
    text-align: center;
    margin-top: 20px;
    color: #666;
  }

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