/* ==========================================================================
   VANILLA THUNDER — Design System
   Concept: "Blueprint & Steel" — deep navy + construction orange,
   angled V-cut section dividers echoing the logo mark, blueprint-grid
   texture, riveted steel-beam rules.
   ========================================================================== */

:root{
  /* -- Brand tokens -- */
  --vt-navy:        #0B1E33;
  --vt-navy-2:       #123258;
  --vt-navy-3:       #1B4272;
  --vt-orange:       #F2811D;
  --vt-orange-2:     #FFA64D;
  --vt-blue:         #1E5FA8;
  --vt-ink:          #05080C;
  --vt-paper:        #F5F6F8;
  --vt-paper-2:      #FFFFFF;
  --vt-steel:        #8CA0B3;
  --vt-steel-line:   rgba(140,160,179,.28);

  /* -- Semantic (theme-aware, redefined under [data-theme]) -- */
  --bg:              var(--vt-paper);
  --bg-elevated:     var(--vt-paper-2);
  --bg-inverse:      var(--vt-navy);
  --text:            #101820;
  --text-soft:       #4B5A67;
  --text-inverse:    #EAF0F6;
  --border:          rgba(11,30,51,.12);
  --accent:          var(--vt-orange);

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.22,.68,.32,1);
}

[data-theme="dark"]{
  --bg:            var(--vt-ink);
  --bg-elevated:   #0E1620;
  --bg-inverse:    #EAF0F6;
  --text:          #EAF0F6;
  --text-soft:     #9FB0BE;
  --text-inverse:  var(--vt-navy);
  --border:        rgba(234,240,246,.12);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  transition:background .35s var(--ease), color .35s var(--ease);
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{ font-family:var(--font-display); letter-spacing:.01em; }
.font-mono{ font-family:var(--font-mono); }

::selection{ background:var(--vt-orange); color:#fff; }

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--vt-orange);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Blueprint grid texture
   ========================================================================== */
.blueprint-grid{
  background-image:
    linear-gradient(var(--vt-steel-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vt-steel-line) 1px, transparent 1px);
  background-size: 42px 42px;
}
.blueprint-grid-lg{
  background-image:
    linear-gradient(var(--vt-steel-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vt-steel-line) 1px, transparent 1px);
  background-size: 84px 84px;
}

/* Riveted steel-beam divider */
.rivet-rule{
  position:relative;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--vt-orange) 12%, var(--vt-orange) 88%, transparent);
}
.rivet-rule::before, .rivet-rule::after{
  content:'';
  position:absolute; top:50%; width:6px; height:6px; border-radius:50%;
  background:var(--vt-orange); transform:translateY(-50%);
}
.rivet-rule::before{ left:0; }
.rivet-rule::after{ right:0; }

/* Angled V-cut section divider (echoes the T-mark chevron) */
.v-cut-top{
  clip-path: polygon(0 0, 50% 4.5%, 100% 0, 100% 100%, 0 100%);
}
.v-cut-bottom{
  clip-path: polygon(0 0, 100% 0, 100% 95.5%, 50% 100%, 0 95.5%);
}
.v-notch{
  position:relative;
}
.v-notch::after{
  content:'';
  position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:0; height:0;
  border-left:22px solid transparent;
  border-right:22px solid transparent;
  border-top:14px solid var(--vt-orange);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom:1px solid var(--border);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .4s var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 8px 24px rgba(5,8,12,.16); }
.nav-link{
  position:relative;
  font-family:var(--font-display);
  font-size:.92rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--vt-orange);
  transition:width .3s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

.mega-drop{
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.group\/nav:hover .mega-drop, .mega-drop:hover{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.hero-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.hero-slide .slide-media{
  transform:scale(1.08);
  transition:transform 7s linear;
}
.hero-slide.is-active .slide-media{ transform:scale(1); }

.hero-dot{
  width:34px; height:3px; background:rgba(255,255,255,.35);
  transition:background .3s var(--ease);
}
.hero-dot.is-active{ background:var(--vt-orange); }

/* Marquee strip */
.marquee-track{
  display:flex; width:max-content;
  animation:marquee 26s linear infinite;
}
.marquee-track:hover{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal="scale"].in-view{ transform:scale(1); }
[data-reveal="left"]{ transform:translateX(-36px); }
[data-reveal="left"].in-view{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(36px); }
[data-reveal="right"].in-view{ transform:translateX(0); }

.stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* ==========================================================================
   Cards / components
   ========================================================================== */
.concern-card{
  position:relative;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.concern-card::before{
  content:'';
  position:absolute; left:0; top:0; height:4px; width:100%;
  background:linear-gradient(90deg, var(--vt-orange), var(--vt-blue));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.concern-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(5,8,12,.18); }
.concern-card:hover::before{ transform:scaleX(1); }
.concern-card .icon-wrap{
  transition:transform .5s var(--ease), background .35s var(--ease);
}
.concern-card:hover .icon-wrap{ transform:rotate(-8deg) scale(1.08); background:var(--vt-orange); }

.stat-count{ font-variant-numeric:tabular-nums; }

.btn-primary{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--vt-orange);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(242,129,29,.35); }
.btn-primary::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--vt-navy-3);
  transform:translateX(-101%);
  transition:transform .35s var(--ease);
}
.btn-primary:hover::before{ transform:translateX(0); }

.btn-outline{
  border:1.5px solid var(--vt-orange);
  color:var(--vt-orange);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.btn-outline:hover{ background:var(--vt-orange); color:#fff; }

/* Chairman/MD portrait frame */
.beam-frame{ position:relative; }
.beam-frame::before{
  content:''; position:absolute; inset:-14px -14px auto auto;
  width:70%; height:70%;
  border:3px solid var(--vt-orange);
  z-index:-1;
}

/* Business arena map */
.map-pin{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--vt-orange); box-shadow:0 0 0 0 rgba(242,129,29,.6);
  animation:pulse-pin 2.4s var(--ease) infinite;
}
@keyframes pulse-pin{
  0%{ box-shadow:0 0 0 0 rgba(242,129,29,.55); }
  70%{ box-shadow:0 0 0 14px rgba(242,129,29,0); }
  100%{ box-shadow:0 0 0 0 rgba(242,129,29,0); }
}

/* News / blog cards */
.media-card img{ transition:transform .6s var(--ease); }
.media-card:hover img{ transform:scale(1.06); }

/* Footer */
.footer-brand-line{ background:linear-gradient(90deg, var(--vt-orange), var(--vt-blue), transparent); height:2px; }

/* ==========================================================================
   Floating utilities: theme switch + quick chat
   ========================================================================== */
.fab-stack{ position:fixed; right:22px; bottom:22px; z-index:70; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.fab{
  width:52px; height:52px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(5,8,12,.28);
  transition:transform .3s var(--ease);
}
.fab:hover{ transform:translateY(-3px) scale(1.05); }
.fab-menu{
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  opacity:0; transform:translateY(10px) scale(.9); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.fab-menu.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.theme-toggle{
  width:52px; height:28px; border-radius:9999px;
  background:var(--vt-navy); position:relative; cursor:pointer;
  border:1px solid var(--border);
}
.theme-toggle .knob{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--vt-orange); transition:transform .35s var(--ease);
}
[data-theme="dark"] .theme-toggle .knob{ transform:translateX(24px); }

/* Mobile menu panel */
.mobile-panel{
  transform:translateX(100%);
  transition:transform .45s var(--ease);
}
.mobile-panel.is-open{ transform:translateX(0); }

/* ==========================================================================
   Modal (job application)
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(5,8,12,.72);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal-panel{
  transform:translateY(20px) scale(.97);
  transition:transform .35s var(--ease);
}
.modal-overlay.is-open .modal-panel{ transform:translateY(0) scale(1); }

/* Loader */
#pageLoader{ transition:opacity .5s var(--ease), visibility .5s; }
#pageLoader.is-hidden{ opacity:0; visibility:hidden; }

.loader-icon-wrap{
  position:relative; width:76px; height:76px;
  display:flex; align-items:center; justify-content:center;
}
.loader-icon-wrap::before, .loader-icon-wrap::after{
  content:''; position:absolute; inset:0; border-radius:9999px;
  border:2px solid var(--vt-orange);
  opacity:0;
  animation: loader-ring 1.8s ease-out infinite;
}
.loader-icon-wrap::after{ animation-delay:.5s; }
.loader-icon{
  width:64px; height:auto; position:relative; z-index:1;
  filter: drop-shadow(0 0 16px rgba(242,129,29,.5));
  animation: loader-pop 1.6s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes loader-pop{
  0%{ transform:scale(.55) rotate(-10deg); opacity:.3; }
  32%{ transform:scale(1.1) rotate(5deg); opacity:1; }
  55%{ transform:scale(.95) rotate(-3deg); }
  75%{ transform:scale(1.03) rotate(1deg); }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
@keyframes loader-ring{
  0%{ transform:scale(.6); opacity:.8; border-width:3px; }
  100%{ transform:scale(1.7); opacity:0; border-width:1px; }
}
.loader-text{ animation:loader-fade 1.6s ease-in-out infinite; }
@keyframes loader-fade{
  0%,100%{ opacity:.45; } 50%{ opacity:1; }
}

/* Utility: angled ribbon eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--vt-orange);
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--vt-orange); }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--vt-steel); border-radius:6px; }