:root{
  --bg:#0a0b22;
  --panel:#11143a;
  --ink:#eef1ff;
  --muted:#b9bfe3;
  --accent:#8d7bff;
  --accent-2:#6f59ff;
  --ring: rgba(141,123,255,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}



body.ready{opacity:1; transform:none}
body.fade-out{opacity:0; transform: translateY(6px)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(4px);
  background:linear-gradient(180deg, rgba(10,11,34,.9), rgba(10,11,34,.75)); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{max-width:1200px; margin:auto; display:flex; align-items:center; gap:18px; padding:14px 20px}
.brand{font-weight:900; letter-spacing:.08em; text-transform:uppercase}
.navlinks{display:flex; gap:14px; margin-left:auto; flex-wrap:wrap}
.nav a{padding:8px 12px; border-radius:10px; border:1px solid transparent}
.nav a:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08)}
.nav a.active{background:rgba(255,255,255,.06)}
.main{max-width:1150px; margin:auto; padding:40px 22px 90px}
.lede{color:var(--muted)}
.btn{appearance:none; border-radius:10px; padding:12px 16px; border:1px solid transparent; font-weight:800; display:inline-flex; align-items:center; gap:8px; justify-content:center}
.btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:white; box-shadow:0 10px 22px rgba(120,105,255,.25)}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,.18)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:0 2px 0 rgba(0,0,0,.35); padding:20px}
.grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:960px){ .grid.cols-2{grid-template-columns:1fr 1fr} .grid.cols-3{grid-template-columns:repeat(3,1fr)} }
.footer{max-width:1200px; margin:0 auto; padding:28px 20px; border-top:1px solid rgba(255,255,255,.08); color:var(--muted)}
h1{font-size:clamp(28px,3.5vw + 12px,56px); margin:0 0 16px; font-weight:900; letter-spacing:.4px}
h2{font-size:clamp(22px,2.2vw + 10px,32px); margin:0 0 12px; font-weight:800}
h3{font-size:20px; margin:0 0 8px; font-weight:800}
hr.rule{height:1px; border:0; background:linear-gradient(90deg, var(--accent), transparent 90%); opacity:.8; margin:16px 0}
.hero{display:grid; grid-template-columns:1fr; min-height:60vh}
@media(min-width:1024px){ .hero{grid-template-columns:minmax(0,1fr) 48vw} }
.hero .left{display:flex; align-items:center}
.hero .content{max-width:760px; padding:56px 28px 72px; margin-inline:auto}
.hero .right{position:relative; min-height:42vh}
.hero .img{position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat}
.hero .img::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--bg) 0%, rgba(11,15,42,.6) 26%, rgba(0,0,0,0) 48%), radial-gradient(140% 100% at 100% 0%, rgba(130,110,255,.35), rgba(0,0,0,0) 55%)}

    .my-background-office-div {
        background-image: url('assets/InteriorOffice.jpg'); /* Replace with the actual path to your image */
        background-size: cover; /* Adjusts the image to cover the entire div */
        background-position: center; /* Centers the background image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        height: 300px; /* Example height, adjust as needed */
        width: 100%; /* Example width, adjust as needed */
    }

/* ========== HERO (single-layer background version) ========== */

.hero.hero--bg{
  position: relative;
  min-height: clamp(56vh, 70vh, 88vh);
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px) 22px;
  isolation: isolate; /* keep overlays contained */
  overflow: hidden;
}

/* Background image (scales with viewport) */
.hero.hero--bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02); /* tiny overscan to avoid edges on zoom */
  z-index: -2;
}

/* Readability overlay (subtle left-to-right fade + tint) */
.hero.hero--bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,11,34,.85) 0%, rgba(10,11,34,.55) 38%, rgba(10,11,34,.20) 68%, rgba(10,11,34,0) 100%),
    radial-gradient(140% 100% at 100% 0%, rgba(130,110,255,.20), rgba(0,0,0,0) 55%);
  z-index: -1;
}

/* Content block on top of image */
.hero__inner{
  width: min(960px, 100%);
  margin-inline: auto;
  padding: clamp(8px, 1vw, 12px);
}

.hero__inner h1{
  margin-bottom: 12px;
}

.hero__inner .actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero.hero--bg::before{ transform: none; }
}

/* OPTIONAL: tighten header over hero so it looks connected */
.header{
  backdrop-filter: saturate(120%) blur(4px);
  background: linear-gradient(180deg, rgba(10,11,34,.85), rgba(10,11,34,.65));
}

/* ------- Disable the old two-column hero rules ------- */
.hero{ grid-template-columns: 1fr !important; }         /* neutralize previous grid split */
.hero .left, .hero .right, .hero .img{ all: unset; }   /* remove old layout pieces */

/*=================================================*/

#menuToggle
{
  display: block;
  /* You can also use relative/absolute here if you want to stay on the top */
  position: fixed;
  top: 50px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  max-width: 400px;
  width: 100vw;
  max-height: 100vh;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  box-sizing: border-box;
  overflow-y: auto;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menu li label
{
  cursor: pointer;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

/* Show hamburger on mobile/tablet, hide desktop links */
.nav .navlinks { display: none; }    /* default: small screens */
#menuToggle { display: block; }      /* show burger on small screens */

/* Optional: keep brand from overlapping the burger on small screens */
@media (max-width: 1023.98px){
  .brand { margin-left: 56px; }      /* space for the burger button */
}

/* On desktop (>=1024px): show links, hide hamburger */
@media (min-width: 1024px){
  .nav .navlinks { display: flex; }
  #menuToggle { display: none; }

  /* Safety: ensure slideout is shut on desktop even if checkbox was on */
  #menu { display: none !important; transform: none !important; }
  #menuToggle input { display: none; }
}