/*
 * ╔══════════════════════════════════════════════════════════╗
 * ║  Varchas Aerospace — Global Shared Stylesheet            ║
 * ║  style.css                                               ║
 * ║                                                          ║
 * ║  Contains: CSS variables, reset, cursor, progress bar,  ║
 * ║  header/nav, page-hero, animations, section utilities,   ║
 * ║  footer, back-to-top button.                             ║
 * ║                                                          ║
 * ║  Page-specific styles remain in each page's <style>.     ║
 * ╚══════════════════════════════════════════════════════════╝
 */

/* ════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   ════════════════════════════════════════════════════════════ */
:root {
  /* ── Existing site palette ── */
  --bg:     #0d1117;
  --bgc:    #121820;
  --bgm:    #1a202c;
  --bgl:    #232b38;
  --bg5:    #2c3748;
  --sage:   #3182ce;
  --sage-l: #63b3ed;
  --sage-d: #2b6cb0;
  --parch:  #e2e8f0;
  --ivory:  #ffffff;
  --cream:  #edf2f7;
  --tan:    #cbd5e0;
  --taupe:  #a0aec0;
  --muted:  #718096;

  /* ── Aliases used in some pages ── */
  --acc:   #3182ce;
  --acc-l: #63b3ed;

  /* ── New design system tokens ── */
  --bg-main:          #EBEDEB;
  --bg-section:       #F5F6F5;
  --text-primary:     #1A1A1A;
  --text-secondary:   #555555;
  --accent-primary:   #455368;
  --accent-secondary: #89867D;
  --border:           #D0D3D1;
}

/* ════════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:    var(--bg);
  color:         var(--parch);
  font-family:   'Barlow', sans-serif;
  overflow-x:    hidden;
}

::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sage), var(--ivory)); border-radius: 10px; }
::selection               { background: rgba(49,130,206,.3); color: #fff; }

/* ════════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ════════════════════════════════════════════════════════════ */
#cur      { position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: screen; }
#cur-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-l); transform: translate(-50%,-50%); position: absolute; transition: width .15s, height .15s; }
#cur-ring { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(49,130,206,.55); transform: translate(-50%,-50%); position: absolute; transition: width .3s, height .3s, border-color .3s, opacity .3s; opacity: .7; }

body.hovering #cur-dot  { width: 14px; height: 14px; background: var(--ivory); }
body.hovering #cur-ring { width: 56px; height: 56px; border-color: rgba(255,255,255,.8); opacity: 1; }
body.clicking #cur-dot  { width: 5px; height: 5px; }
body.clicking #cur-ring { width: 28px; height: 28px; }

/* ════════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ════════════════════════════════════════════════════════════ */
#progress-bar {
  position:   fixed;
  top:        0;
  left:       0;
  height:     2px;
  background: linear-gradient(90deg, var(--sage-d), var(--sage), var(--ivory), var(--sage));
  z-index:    9998;
  width:      0%;
  transition: width .1s;
}

/* ════════════════════════════════════════════════════════════
   BACKGROUND EFFECTS
   ════════════════════════════════════════════════════════════ */
.noise {
  position:         fixed;
  inset:            0;
  pointer-events:   none;
  z-index:          2;
  opacity:          .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size:  128px 128px;
}
#particle-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .32; }

/* ════════════════════════════════════════════════════════════
   MATERIAL SYMBOLS
   ════════════════════════════════════════════════════════════ */
.ms {
  font-family:             'Material Symbols Outlined';
  font-weight:             400;
  font-style:              normal;
  line-height:             1;
  letter-spacing:          normal;
  text-transform:          none;
  display:                 inline-block;
  white-space:             nowrap;
  direction:               ltr;
  -webkit-font-smoothing:  antialiased;
}

/* ════════════════════════════════════════════════════════════
   HEADER & NAVIGATION
   ════════════════════════════════════════════════════════════ */
header {
  background:      rgba(226,232,240,.97);
  backdrop-filter: blur(22px);
  border-bottom:   2px solid rgba(49,130,206,.5);
  position:        sticky;
  top:             0;
  z-index:         100;
  box-shadow:      0 2px 16px rgba(13,17,23,.18), 0 1px 0 rgba(49,130,206,.3);
}
.hinner {
  width:           100%;
  padding:         0 2.5rem;
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  height:          74px;
}

/* Nav links */
.nav-link {
  font-family:     'Barlow Condensed', sans-serif;
  font-size:       .84rem;
  font-weight:     700;
  letter-spacing:  .15em;
  text-transform:  uppercase;
  color:           #0D1117;
  text-decoration: none;
  position:        relative;
  transition:      color .25s;
  padding-bottom:  2px;
}
.nav-link::after {
  content:    "";
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;
  height:     1px;
  background: linear-gradient(90deg, var(--sage), var(--ivory));
  transition: width .3s;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Gradient CTA button */
.btn-g {
  display:          inline-flex;
  align-items:      center;
  gap:              .45rem;
  font-family:      'Barlow Condensed', sans-serif;
  font-weight:      800;
  font-size:        .78rem;
  letter-spacing:   .18em;
  text-transform:   uppercase;
  color:            #0D1117;
  background:       linear-gradient(135deg, var(--sage-d), var(--sage), var(--sage-l) 55%, var(--sage));
  background-size:  200% 100%;
  border:           none;
  border-radius:    3px;
  padding:          .7rem 1.5rem;
  cursor:           pointer;
  text-decoration:  none;
  position:         relative;
  overflow:         hidden;
  transition:       background-position .4s, transform .2s, box-shadow .3s;
  box-shadow:       0 2px 16px rgba(49,130,206,.3), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-g:hover {
  background-position: 100% 0;
  transform:           translateY(-2px);
  box-shadow:          0 6px 24px rgba(49,130,206,.5);
}

/* Dropdown */
.nav-dropdown                    { position: relative; }
.nav-dropdown > .nav-link        { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown > .nav-link .dd-arrow { font-size: .7rem; transition: transform .25s; }
.nav-dropdown:hover > .nav-link .dd-arrow { transform: rotate(180deg); }

.dropdown-menu {
  position:        absolute;
  top:             calc(100% + 10px);
  left:            50%;
  transform:       translateX(-50%) translateY(8px);
  min-width:       190px;
  background:      rgba(226,232,240,.98);
  backdrop-filter: blur(20px);
  border:          1px solid rgba(49,130,206,.25);
  border-radius:   6px;
  box-shadow:      0 8px 32px rgba(13,17,23,.22), 0 2px 8px rgba(49,130,206,.15);
  padding:         .5rem 0;
  opacity:         0;
  visibility:      hidden;
  transition:      opacity .25s, visibility .25s, transform .25s;
  z-index:         200;
}
.dropdown-menu::before {
  content:      "";
  position:     absolute;
  top:          -8px;
  left:         50%;
  transform:    translateX(-50%);
  border-left:  8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom:8px solid rgba(226,232,240,.98);
}
.nav-dropdown::after {
  content:  "";
  position: absolute;
  top:      100%;
  left:     0;
  width:    100%;
  height:   14px;
}
.nav-dropdown:hover .dropdown-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display:         block;
  padding:         .55rem 1.25rem;
  font-family:     'Barlow Condensed', sans-serif;
  font-size:       .84rem;
  font-weight:     600;
  letter-spacing:  .12em;
  text-transform:  uppercase;
  color:           #0D1117;
  text-decoration: none;
  transition:      background .2s, color .2s, padding-left .2s;
}
.dropdown-menu a:hover { background: rgba(49,130,206,.12); color: var(--sage-d); padding-left: 1.5rem; }

.mobile-dropdown-items         { display: none; padding-left: 1rem; flex-direction: column; gap: .25rem; }
.mobile-dropdown-items.open    { display: flex; }
#mmenu                         { display: none; background: rgba(226,232,240,.97); backdrop-filter: blur(20px); border-bottom: 2px solid rgba(49,130,206,.5); }
#mmenu.open                    { display: block; }

/* ════════════════════════════════════════════════════════════
   PAGE HERO  (sub-pages: about, certifications, awards, contact)
   ════════════════════════════════════════════════════════════ */
.page-hero {
  position:        relative;
  min-height:      340px;    /* override per-page if needed */
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  background:      #0f172a;
}
.page-hero::before {
  content:    "";
  position:   absolute;
  inset:      0;
  background: url('https://images.pexels.com/photos/47044/f-16-falcon-fighter-jet-aircraft-military-47044.jpeg?auto=compress&cs=tinysrgb&w=1920') center 40%/cover no-repeat;
  opacity:    .12;
}
.page-hero::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, rgba(13,17,23,.65) 0%, rgba(13,17,23,.4) 50%, rgba(13,17,23,.95) 100%);
}

.hero-grid {
  position:         absolute;
  inset:            0;
  background-image: linear-gradient(rgba(49,130,206,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:  52px 52px;
  pointer-events:   none;
}
.scan {
  position:   absolute;
  left:       0;
  right:      0;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(43,108,176,.55) 25%, rgba(255,255,255,.95) 50%, rgba(43,108,176,.55) 75%, transparent);
  animation:  scandown 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scandown {
  0%   { top: 10%;  opacity: 0; }
  8%   { opacity: .8; }
  92%  { opacity: .8; }
  100% { top: 95%;  opacity: 0; }
}
.brk     { position: absolute; width: 36px; height: 36px; border-color: rgba(49,130,206,.5); border-style: solid; }
.brk.tl  { top: 20px;    left: 20px;   border-width: 2px 0 0 2px; }
.brk.tr  { top: 20px;    right: 20px;  border-width: 2px 2px 0 0; }
.brk.bl  { bottom: 20px; left: 20px;   border-width: 0 0 2px 2px; }
.brk.br  { bottom: 20px; right: 20px;  border-width: 0 2px 2px 0; }

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════ */
@keyframes fadeup {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.a1 { opacity: 0; animation: fadeup .8s  .1s cubic-bezier(.4,0,.2,1) forwards; }
.a2 { opacity: 0; animation: fadeup .8s  .3s cubic-bezier(.4,0,.2,1) forwards; }
.a3 { opacity: 0; animation: fadeup .8s  .5s cubic-bezier(.4,0,.2,1) forwards; }

@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }
.ripple-effect {
  position:       absolute;
  border-radius:  50%;
  background:     rgba(49,130,206,.3);
  animation:      ripple-anim .6s linear;
  pointer-events: none;
  transform:      scale(0);
}

/* ════════════════════════════════════════════════════════════
   SECTION UTILITIES
   ════════════════════════════════════════════════════════════ */
.slbl {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color:          var(--sage-l);
}
.slbl::before {
  content:    "";
  display:    block;
  width:      22px;
  height:     1px;
  background: linear-gradient(90deg, var(--sage), var(--ivory));
}

main {
  max-width:      1340px;
  margin:         0 auto;
  padding:        5rem 2rem 6rem;
  display:        flex;
  flex-direction: column;
  gap:            4rem;
}

.isec {
  background:  linear-gradient(135deg, rgba(18,24,32,.95), rgba(26,32,44,.9));
  border:      1px solid rgba(49,130,206,.14);
  border-radius: 16px;
  padding:     3rem;
  position:    relative;
  overflow:    hidden;
  box-shadow:  inset 0 1px 0 rgba(255,255,255,.07), 0 20px 48px rgba(10,15,24,.6);
}
.isec::before {
  content:          "";
  position:         absolute;
  inset:            0;
  border-radius:    inherit;
  background-image: repeating-linear-gradient(45deg,  rgba(49,130,206,.025) 0px, rgba(49,130,206,.025) 1px, transparent 1px, transparent 10px),
                    repeating-linear-gradient(-45deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 10px);
  pointer-events:   none;
}
.isec > * { position: relative; z-index: 1; }

.reveal                      { opacity: 1; transform: translateY(0); transition: opacity .65s ease, transform .65s ease; }
.reveal.hidden-before        { opacity: 0; transform: translateY(22px); }
.reveal.hidden-before.visible{ opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
footer {
  background:    #0a0f18;
  border-top:    1px solid rgba(49,130,206,.12);
  padding:       3.5rem 0 2rem;
  position:      relative;
  overflow:      hidden;
}
footer::before {
  content:        "";
  position:       absolute;
  inset:          0;
  background:     url('https://images.pexels.com/photos/2159/flight-sky-earth-space.jpg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat;
  opacity:        .05;
  pointer-events: none;
}
footer::after {
  content:        "";
  position:       absolute;
  inset:          0;
  background:     linear-gradient(180deg, rgba(10,15,24,.98), rgba(15,23,42,.98));
  pointer-events: none;
}
footer > * { position: relative; z-index: 2; }

.socbtn {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      rgba(49,130,206,.08);
  border:          1px solid rgba(49,130,206,.18);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  color:           var(--muted);
  cursor:          pointer;
  text-decoration: none;
  transition:      all .22s;
}
.socbtn:hover { background: rgba(49,130,206,.2); border-color: rgba(49,130,206,.5); color: var(--sage-l); }

/* ════════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ════════════════════════════════════════════════════════════ */
#btt {
  position:       fixed;
  bottom:         30px;
  right:          30px;
  width:          44px;
  height:         44px;
  border-radius:  50%;
  background:     rgba(49,130,206,.9);
  color:          #fff;
  border:         1px solid rgba(255,255,255,.2);
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content:center;
  box-shadow:     0 4px 16px rgba(49,130,206,.4);
  z-index:        99;
  opacity:        0;
  pointer-events: none;
  transition:     all .3s;
  transform:      translateY(15px);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .isec { padding: 2rem 1.5rem; }
}