html {
  scroll-behavior: smooth;
}
:root{
  --bg:#050312;
  --bg2:#16142b;
  --text:#e9ecff;
  --muted:#8b8fbd;
  --accent:#d100ff;
  --accent2:#008dff;
  --danger:#ff1fb2;
  --radius:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --space-md:18px;
  --space-lg:18px;
  --header-height:56px;
  --icon-size:36px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 16px/1.6 var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
a{color:var(--accent2);}
section{padding:var(--header-height) var(--space-md);max-width:960px;margin:0 auto;}
h1{font-size:clamp(2.4rem,6vw,3.2rem);line-height:1.1;color:var(--accent);margin-bottom:.5rem;}
h2{margin-bottom:.75rem;font-size:1.8rem;color:var(--accent2);letter-spacing:0.01em;}
p,li{max-width:720px}
#hero {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100dvh; /* Dynamic viewport height */
  overflow: hidden; /* Prevent content from causing layout shifts */
  padding: 0 var(--space-md); /* Add horizontal padding for proper centering */
  position: relative; /* Prevent layout shifts */
  scroll-margin-top: var(--header-height); /* Adjust for sticky header */
}
#hero .hero-inner {
  padding-top: 60px;
  max-width: 960px; /* Constrain content width */
  margin: 0 auto;
  overflow: hidden; /* Prevent overflow */
}
.hero-inner{width:100%}
.subtitle{font-size:1.05rem;margin:var(--space-md) 0;color:var(--muted);}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.button {
  padding:12px 22px;
  border:2px solid var(--accent2);
  border-radius:var(--radius);
  font-weight:600;
  background:var(--accent2);
  color:var(--bg);
  transition:.18s, box-shadow .18s;
  text-decoration:none;
  box-shadow:0 4px 12px -2px #000a;
}
.button:hover, .button:focus {
  background:transparent;
  color:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 8px 2px var(--accent), 0 0 16px 4px var(--accent2);
  text-decoration: none;
}
.strip{display:flex;flex-wrap:wrap;gap:28px;margin-top:var(--space-lg);font-size:.9rem;color:var(--muted);}
.services{display:grid;gap:var(--space-md);margin-top:28px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.card{background:var(--bg2);padding:var(--space-md);border-radius:var(--radius);border:1px solid #24272b;}
.card h3{font-size:1rem;margin-bottom:6px;color:var(--accent)}
.grid-3{display:grid;gap:20px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
blockquote{border-left:3px solid var(--accent2);padding:8px 14px;font-style:italic;margin:22px 0;background:#121416;border-radius:4px;}
form{display:grid;gap:14px;margin-top:14px;}
input,textarea,button{font:inherit}
input,textarea{background:#141619;border:1px solid #272b30;color:var(--text);padding:12px 14px;border-radius:var(--radius);}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0}
textarea{min-height:140px;resize:vertical}
button{background:var(--accent2);color:#181a2d;padding:14px 22px;font-weight:600;border:none;border-radius:var(--radius);cursor:pointer;transition:.25s}
button:hover{filter:brightness(1.1)}
footer{padding:var(--space-lg) var(--space-md);text-align:center;font-size:.8rem;color:var(--muted);}
.hidden-lang{position:absolute;left:-9999px;height:0;overflow:hidden}
.scroll-arrow {
  position: absolute;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  font-size: 2.5rem;
  color: var(--accent);
  opacity: 0; /* Start hidden */
  animation: bounce 1.2s infinite;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.5s, filter 0.18s;
  text-shadow: 0 0 4px var(--accent2),
              0 0 2px var(--accent2),
              0 0 1px var(--accent);
}
.scroll-arrow.visible {
  opacity: 0.8;
}
.scroll-arrow.hide {
  opacity: 0;
  pointer-events: none;
}
.scroll-arrow:focus,
.scroll-arrow:hover {
      text-shadow:
    0 0 7px var(--accent2),
    0 0 10px var(--accent2),
    0 0 32px var(--accent);
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(12px); }
}
.hamburger {
  width: 28px; /* Smaller width */
  height: 28px; /* Smaller height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 300;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s, filter 0.18s;
}
.hamburger div {
  height: 3px; /* Thinner lines */
  background: var(--accent);
  border-radius: 2px;
  transition: .4s;
  box-shadow: 0 0 2px var(--accent2),
              0 0 1px var(--accent2),
              0 0 1px var(--accent); /* dimmer neon */
}
.hamburger:hover div,
.hamburger:focus div {
  filter: brightness(1.08);
  box-shadow:
    0 0 4px var(--accent2),
    0 0 6px var(--accent2),
    0 0 12px var(--accent); /* dimmer on hover */
}
.hamburger.active { animation: spin .5s; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.hamburger.active div:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active div:nth-child(2) { opacity: 0; }
.hamburger.active div:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.hamburger.visible {
  opacity: 1;
  pointer-events: auto;
}

.hero-img-wrap {
  position: relative;
  width: 180px;
  margin: 0 auto var(--space-md) auto;
}
.hero-img-wrap .main-pic {
  width: 100%;
  border-radius: 50%;
  display: block;
}
.img-overlay-title {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  color: var(--accent); /* Use accent variable */
  font-size: clamp(2.8rem, 6vw, 4rem); /* Increase font size */
  line-height: 1.1;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); /* Subtle shadow */
  letter-spacing: 0.02em;
  font-family: inherit;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg2);
  box-shadow: 0 2px 6px #0004;
  height: var(--header-height); /* Reserve header height */
}

/* Ensure main content is not hidden under fixed header */
body > section,
#hero {
  margin-top: var(--header-height);
}
.logo {
  font-weight: bold;
  color: var(--accent);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: none;
}
.main-nav {
  display: flex;
  gap: var(--space-lg);
  position: static; /* Desktop: normal flow */
  padding-right: var(--space-md);
}
.main-nav a {
  color: var(--accent2);
  font-size: 1.05rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a:focus {
  color: var(--accent);
}
.hamburger {
  display: none;

}
@media (max-width: 700px) {
  .main-nav {
    display: none;
    position: fixed; /* Mobile: overlay */
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--bg2);
    flex-direction: column;
    gap: 0;
    box-shadow: 0 4px 24px #000a;
    z-index: 99;
  }
  .main-nav.open {
    display: flex;
  }
  .main-nav a {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid #2224;
  }
  .hamburger {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s, filter 0.18s;
  }
}
#services, #highlights, #testimonials, #contact {
  scroll-margin-top: 20px; /* Adjust to your header height */
}
#form-message.success {
  color: var(--accent); /* Bright purple like h1 */
  font-style: italic;
  margin-top: 10px;
}