/* Verna Hi-Tech — premium scroll bands (NO boxes), fixed background */

:root{
  --bg: #070a12;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --line: rgba(255,255,255,0.12);

  /* Professional accents */
  --a1: #a855f7; /* violet */
  --a2: #06b6d4; /* cyan */
  --a3: #22c55e; /* green */

  --container: min(1120px, 92vw);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

.container{ width: var(--container); margin: 0 auto; }

/* ===== Fixed background: image stays while content scrolls ===== */
.bg-fixed{
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(120deg, rgba(7,10,18,0.82), rgba(7,10,18,0.52)),
    url("./assets/WEBSITE_BG.png") center/cover no-repeat;
  transform: translateZ(0);
}
.bg-glow{
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 560px at 18% 18%, rgba(168,85,247,0.24), transparent 55%),
    radial-gradient(900px 560px at 82% 16%, rgba(6,182,212,0.22), transparent 55%),
    radial-gradient(900px 560px at 70% 88%, rgba(34,197,94,0.16), transparent 55%);
  pointer-events:none;
}

/* ===== Header / tabs ===== */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,10,18,0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--text);
}
.brand img{
  width: 42px; height: 42px;
  border-radius: 14px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
.brand .name{
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 1.06rem;
  line-height: 1.1;
}
.brand .tagline{
  display:block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 650;
  font-size: 0.86rem;
}

.tabs{
  display:flex;
  align-items:center;
  gap: 18px;
  box-shadow: 0 8px 20px rgba(168,85,247,0.2);

}
.tabs a{
  text-decoration:none;
  color: rgba(255,255,255,0.78);
  font-weight: 850;
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.tabs a:hover{
  color: var(--text);
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.tabs a.active{
  color: #070a12;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 18px 44px rgba(6,182,212,0.14);
}

/* Mobile menu */
.menu-btn{
  display:none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
}
@media (max-width: 820px){
  .tabs{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; gap:10px; }
  .tabs.mobile-open{
    display:flex;
    position:absolute;
    right: 4vw;
    top: 74px;
    flex-direction:column;
    align-items:stretch;
    width: min(320px, 92vw);
    background: rgba(7,10,18,0.92);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 10px;
    gap: 6px;
  }
}

/* ===== Hero / top intro ===== */
.hero{
  padding: 86px 0 52px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.82);
  font-weight: 850;
  font-size: 0.88rem;
}
.dot{
  width:10px; height:10px; border-radius: 99px;
  background: linear-gradient(135deg, var(--a3), var(--a2));
  box-shadow: 0 0 0 6px rgba(34,197,94,0.12);
}
h1{
  margin: 16px 0 10px;
  font-size: clamp(2.35rem, 3.6vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.lead{
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 1.06rem;
  line-height: 1.8;
  max-width: 100%;  
  margin-bottom: 16px;
  text-align: justify;          /* ✅ key fix */
  text-justify: inter-word; /* 🔥 allow full width */
}

.cta{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 18px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  text-decoration:none;
  font-weight: 950;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{
  color: #070a12;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 18px 44px rgba(168,85,247,0.14);
}
.btn.secondary{
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

/* ===== Scroll bands (no cards/boxes) ===== */
.band{
  padding: 64px 0;
  border-top: 1px solid var(--line);
  background: rgba(7,10,18,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.band.alt{
  background: rgba(7,10,18,0.42);
}
.band-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 16px;
  margin-bottom: 18px;
}
.band-head h2{
  margin:0;
  font-size: 1.55rem;
  letter-spacing: -0.2px;
}
.band-head p{
  margin:0;
  color: var(--muted);
  line-height: 1.7;
  max-width: 60ch;
}

/* Split content like Accenture scroll sections */
.split{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  align-items:start;
}
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}

/* “No-box” items — clean list blocks */
.items{
  margin: 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 14px;
}
.item{
  padding: 0;
  border: none;                 /* IMPORTANT: no box */
  background: transparent;      /* IMPORTANT: no box */
}
.item .title{
  font-weight: 950;
  font-size: 1.08rem;
  letter-spacing: -0.1px;
  margin: 0 0 6px;
}
.item .desc{
  margin: 0;
  color: rgba(255,255,255,0.74);
  line-height: 1.75;
}

/* Subtle accent line (looks premium, not boxy) */
.rule{
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, #a855f7, #06b6d4);
  border-radius: 999px;
  margin: 18px 0 28px;
}


/* Contact form — clean (no surrounding box) */
.form{
  display:grid;
  gap: 12px;
  margin-top: 10px;
}
.label{
  font-weight: 900;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
}
.input, textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  outline:none;
}
.input:focus, textarea:focus{
  border-color: rgba(6,182,212,0.55);
  box-shadow: 0 0 0 4px rgba(6,182,212,0.14);
}
textarea{ min-height: 120px; resize: vertical; }

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  background: rgba(7,10,18,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.footer .row{
  padding: 22px 0;
  display:flex;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  color: rgba(255,255,255,0.65);
}
.footer a{
  color: rgba(255,255,255,0.82);
  text-decoration:none;
}
.footer a:hover{ text-decoration: underline; }


.fade-up{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.show{
  opacity: 1;
  transform: translateY(0);
}