/* =========================================================
   GLOBAL.CSS
   VINYLED — Website Foundation
   ---------------------------------------------------------
   Global foundation only.
   No section-specific/component styles.
   
   DESIGN:
   • Full-page black foundation
   • Dark navy / blue atmosphere
   • Visible but controlled top-left blue glow
   • Subtle blue depth through the center
   • Content width: 85% desktop
   • 92% tablet
   • 100% mobile with safe side padding
   • Prevent horizontal overflow
   ========================================================= */


/* =========================================================
   1. GLOBAL DESIGN TOKENS
========================================================= */

:root {

  /* -------------------------------------------------------
     BACKGROUND
     ------------------------------------------------------- */

  --site-bg: #020305;
  --site-bg-deep: #010204;
  --site-bg-mid: #050a12;

  /* Blue atmospheric surfaces */
  --site-surface: #0a1d35;
  --site-surface-blue: #0d2a4d;

  /* -------------------------------------------------------
     TEXT
     ------------------------------------------------------- */

  --site-text: #f5f7fa;
  --site-text-muted: #8fa0b8;
  --site-text-soft: #b7c2d1;

  /* -------------------------------------------------------
     BORDERS / ACCENTS
     ------------------------------------------------------- */

  --site-border: rgba(255, 255, 255, 0.08);
  --site-border-soft: rgba(255, 255, 255, 0.05);

  --site-accent: #2e6ef7;
  --site-accent-blue: #378add;

  /* -------------------------------------------------------
     LAYOUT
     ------------------------------------------------------- */

  --site-container: 1400px;
  --site-content-width: 85%;

  /* -------------------------------------------------------
     RADIUS
     ------------------------------------------------------- */

  --site-radius: 8px;

  /* -------------------------------------------------------
     EFFECTS
     ------------------------------------------------------- */

  --site-transition:
    250ms cubic-bezier(.25, 1, .5, 1);
}


/* =========================================================
   2. RESET / BOX SIZING
========================================================= */

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


/* =========================================================
   3. HTML FOUNDATION
========================================================= */

html {
  width: 100%;
  min-height: 100%;

  background-color: var(--site-bg-deep);

  scroll-behavior: smooth;

  overflow-x: hidden;
}


/* =========================================================
   4. BODY
   ---------------------------------------------------------
   Full website background.

   IMPORTANT:
   The background is intentionally:
   • predominantly black
   • dark navy in the upper area
   • blue glow concentrated toward top-left
   • very subtle blue depth toward center
   • black toward the bottom
========================================================= */

body {

  width: 100%;
  min-width: 100%;
  min-height: 100vh;

  margin: 0;

  color: var(--site-text);

  background-color: var(--site-bg);

  background-image:

    /* -----------------------------------------------------
       PRIMARY TOP-LEFT BLUE GLOW
       This is the main visible atmospheric light.
    ----------------------------------------------------- */

    radial-gradient(
      ellipse 760px 560px at 0% 0%,
      rgba(18, 76, 135, 0.58) 0%,
      rgba(13, 55, 100, 0.42) 22%,
      rgba(8, 34, 64, 0.24) 44%,
      rgba(4, 18, 34, 0.10) 60%,
      transparent 76%
    ),

    /* -----------------------------------------------------
       SECONDARY UPPER-CENTER BLUE DEPTH
       Keeps the top from becoming flat black.
    ----------------------------------------------------- */

    radial-gradient(
      ellipse 1050px 680px at 50% 5%,
      rgba(9, 35, 64, 0.24) 0%,
      rgba(7, 26, 48, 0.14) 38%,
      transparent 72%
    ),

    /* -----------------------------------------------------
       SOFT CENTER ATMOSPHERE
       Very subtle — should not make the whole page blue.
    ----------------------------------------------------- */

    radial-gradient(
      ellipse 1200px 900px at 50% 42%,
      rgba(6, 23, 42, 0.16) 0%,
      rgba(4, 14, 27, 0.08) 48%,
      transparent 74%
    ),

    /* -----------------------------------------------------
       BASE VERTICAL BLACK → NAVY → BLACK
    ----------------------------------------------------- */

    linear-gradient(
      180deg,
      #07101d 0%,
      #050b14 25%,
      #03070d 55%,
      #020407 78%,
      #010204 100%
    );

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: center top;

  background-size: 100% 100%;

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;

  overflow-x: hidden;
}


/* =========================================================
   5. MEDIA / REPLACED ELEMENTS
========================================================= */

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   6. LINKS
   ---------------------------------------------------------
   Minimal global rule.
   Individual sections can style links independently.
========================================================= */

a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   7. BUTTON RESET
   ---------------------------------------------------------
   No global visual button styling.
========================================================= */

button,
input,
textarea,
select {
  font-family: inherit;
}


/* =========================================================
   8. GLOBAL CONTAINER
   ---------------------------------------------------------
   DESKTOP:
   85% width — important content rule.

   TABLET:
   92%

   MOBILE:
   Full available width with safe padding.
========================================================= */

.site-container {

  width: 85% !important;

  max-width: var(--site-container);

  margin-inline: auto;
}


/* =========================================================
   9. TABLET CONTAINER
========================================================= */

@media (max-width: 1024px) {

  .site-container {

    width: 92% !important;

    max-width: none;
  }
}


/* =========================================================
   10. MOBILE CONTAINER
========================================================= */

@media (max-width: 640px) {

  .site-container {

    width: 100% !important;

    max-width: none;

    padding-inline: 16px;
  }
}


/* =========================================================
   11. SAFE SECTION WIDTH UTILITY
   ---------------------------------------------------------
   Optional utility for sections that need the same
   85% content rule without depending on Elementor's
   default container width.
========================================================= */

.site-content-width {

  width: 85% !important;

  max-width: var(--site-container);

  margin-inline: auto;
}


@media (max-width: 1024px) {

  .site-content-width {

    width: 92% !important;
  }
}


@media (max-width: 640px) {

  .site-content-width {

    width: 100% !important;

    padding-inline: 16px;
  }
}


/* =========================================================
   12. HORIZONTAL OVERFLOW PROTECTION
   ---------------------------------------------------------
   Prevents animations, oversized decorative elements,
   Elementor widgets, and section effects from creating
   a horizontal scrollbar.
========================================================= */

html,
body {

  overflow-x: hidden;

  max-width: 100%;
}


/* =========================================================
   13. ACCESSIBILITY — FOCUS
========================================================= */

:focus-visible {

  outline: 2px solid var(--site-accent-blue);

  outline-offset: 3px;
}


/* =========================================================
   14. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}


/* =========================================================
   15. SMALL SCREEN BACKGROUND OPTIMIZATION
   ---------------------------------------------------------
   Fixed backgrounds can be expensive on some mobile
   browsers. Keep the same visual direction without forcing
   background-attachment: fixed.
========================================================= */

@media (max-width: 768px) {

  body {

    background-attachment: scroll;

    background-size: auto, auto, auto, 100% 100%;
  }
}

/* VINYLED — GLOBAL MOBILE SCALE PRINCIPLE */

@media (max-width: 600px){

  /* Primary section headings */
  .vny-mobile-heading{
    font-size:clamp(28px,8vw,36px);
    line-height:1.08;
  }

  /* Supporting text */
  .vny-mobile-body{
    font-size:12.5px;
    line-height:1.6;
  }

  /* Primary buttons */
  .vny-mobile-button{
    min-height:44px;
    padding:0 16px;
    font-size:11px;
  }

  /* Main content width */
  .vny-mobile-container{
    width:92%;
    margin-inline:auto;
  }

}