/* =========================================================
   VRAXON THEME — BASE STYLES
   Shared across every template: variables, reset, buttons,
   the unified WHITE header/nav and WHITE footer, and the
   shared scroll-reveal animation used by every page.
   ========================================================= */

:root{
  --ink:#0b0c14;
  --ink-soft:#5b5e6d;
  --paper:#ffffff;
  --paper-dim:#f3f4f8;
  --line:#e7e7ef;
  --pink:#ff3f8e;
  --violet:#8b5cf6;
  --blue:#3b82f6;
  --cyan:#22d3ee;
  --mint:#0d9c5f;
  --amber:#c9820f;
  --orange:#e0601f;
  --grad-primary: linear-gradient(100deg, var(--pink) 0%, var(--violet) 55%, var(--blue) 100%);
  --shadow-soft: 0 20px 60px -20px rgba(20,10,50,0.18);
  --shadow-card: 0 10px 30px -14px rgba(20,10,50,0.16);
  --radius: 20px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html, body{max-width:100%; overflow-x:hidden;}
@supports (overflow:clip){
  html, body{overflow-x:clip;}
}
body{
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Bricolage Grotesque', sans-serif;
  letter-spacing:-0.02em;
  line-height:1.08;
}
a{text-decoration:none; color:inherit;}
img{display:block; width:100%; height:100%; object-fit:cover;}
ul{list-style:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:20px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--grad-primary);}
.grad-text{
  background:var(--grad-primary);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:100px; font-weight:700; font-size:14.5px;
  border:1px solid transparent; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--grad-primary); color:#fff; box-shadow:0 10px 24px -8px rgba(139,92,246,0.5);}
.btn-primary:hover{box-shadow:0 16px 32px -10px rgba(139,92,246,0.6);}
.btn-ghost{background:var(--ink); color:#fff;}
.btn-outline{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-outline-dark{border:1.5px solid var(--line); color:var(--ink); margin-top:18px;}

/* ---------- SITE HEADER / NAV (white theme, shared everywhere) ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1240px; margin:0 auto; padding:16px 32px;
}
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{
  width:36px; height:36px; border-radius:10px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; font-weight:800;
  position:relative; flex-shrink:0;
}
.logo-mark::after{
  content:""; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%;
  background:var(--mint); border:2px solid #fff;
}
.logo-text b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:17px; letter-spacing:0.01em;}
.logo-text span{display:block; font-size:9.5px; font-weight:800; letter-spacing:0.18em; color:var(--ink-soft);}
.nav-links{display:flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; color:var(--ink-soft);}
.nav-links a{padding:9px 18px; border-radius:100px; transition:background .2s ease, color .2s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{background:var(--ink); color:#fff;}

/* ---------- SITE FOOTER (white theme, shared everywhere) ---------- */
.site-footer{background:var(--paper); border-top:1px solid var(--line); padding:64px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr; gap:30px;}
.foot-grid h5{color:var(--ink); font-size:11.5px; margin-bottom:16px; font-weight:800; letter-spacing:0.1em;}
.foot-grid li{margin-bottom:12px; font-size:14px; color:var(--ink-soft);}
.foot-grid li a:hover{color:var(--ink);}
.foot-logo{margin-bottom:16px;}
.foot-desc{font-size:13.8px; line-height:1.65; max-width:270px; color:var(--ink-soft);}
.foot-office{margin-bottom:14px; font-size:13.5px; color:var(--ink-soft);}
.foot-office b{color:var(--ink); font-size:13.8px;}
.foot-office .coords{display:block; font-size:11px; color:#9a9ca8; margin-top:2px;}
.foot-office .pin{color:var(--violet); margin-right:4px;}
.foot-bottom{
  display:flex; justify-content:space-between; margin-top:56px; padding-top:22px;
  border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft);
}
.foot-bottom .live{display:flex; align-items:center; gap:6px;}
.foot-bottom .live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--mint);}

/* ---------- shared scroll-reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
[data-reveal].in{opacity:1; transform:translateY(0);}

/* ---------- MOBILE NAV / HAMBURGER ---------- */
.nav-toggle{
  display:none; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer;
  width:44px; height:44px; padding:6px; border-radius:8px;
}
.nav-toggle .hamburger{display:inline-block; width:22px; height:18px; position:relative}
.nav-toggle .hamburger span{display:block; height:2px; background:var(--ink); border-radius:2px; position:absolute; left:0; right:0}
.nav-toggle .hamburger span:nth-child(1){top:0}
.nav-toggle .hamburger span:nth-child(2){top:8px}
.nav-toggle .hamburger span:nth-child(3){bottom:0}

.mobile-nav{
  position:fixed; top:0; right:0; height:100vh; width:320px; max-width:86%; background:var(--paper);
  box-shadow: -12px 0 40px rgba(20,10,50,0.12);
  transform:translateX(100%); transition:transform .36s cubic-bezier(.2,.9,.25,1);
  z-index:120; display:none; align-items:center; visibility:hidden; pointer-events:none;
}
.mobile-nav.open{display:flex; transform:translateX(0); visibility:visible; pointer-events:auto;}
.mobile-nav-inner{padding:32px 20px; display:flex; flex-direction:column; gap:20px; width:100%;}
.mobile-nav .mobile-nav-links{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.mobile-nav .mobile-nav-links a{padding:14px 16px; border-radius:10px; font-weight:700; color:var(--ink-soft);}
.mobile-nav .mobile-nav-links a.active{background:var(--ink); color:#fff}
.mobile-nav-close{position:absolute; top:14px; left:12px; background:transparent; border:0; font-size:20px; cursor:pointer}

/* lock body scroll when menu open */
body.mobile-menu-open{overflow:hidden}

/* Responsive breakpoint adjustments */
@media (max-width: 980px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .site-header .btn-ghost{display:none}
  .mobile-nav{display:flex}
  .wrap{padding:0 20px}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 560px){
  .site-header nav{padding-top:12px; padding-bottom:12px;}
  .mobile-nav{width:100%; max-width:360px;}
  .mobile-nav-inner{padding:72px 20px 32px;}
  .mobile-nav .mobile-nav-links a{padding:16px;}
}

@media (min-width: 981px){
  .nav-toggle{display:none !important}
  .mobile-nav{display:none !important; visibility:hidden !important;}
}