/* Base */
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(135deg,#0a0b0f 0%,#0d1117 50%,#161b22 100%);
  color:#e6e7eb;
  position:relative;
  min-height:100vh;
}
body::before{
  content:'';position:fixed;inset:0;
  background:radial-gradient(circle at 20% 50%,rgba(255,138,0,.03) 0%,transparent 50%),
             radial-gradient(circle at 80% 20%,rgba(194,42,209,.03) 0%,transparent 50%);
  animation:gradientShift 20s ease-in-out infinite alternate;z-index:0
}
@keyframes gradientShift{0%{opacity:.3;transform:scale(1) rotate(0)}100%{opacity:.6;transform:scale(1.1) rotate(2deg)}}
.float-layer{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.sprite{position:absolute;opacity:.25;filter:drop-shadow(0 4px 16px rgba(255,138,0,.1)) drop-shadow(0 0 8px rgba(194,42,209,.1));will-change:transform}
.wrap{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;padding-bottom:24px}

/* Nav */
nav{position:relative;z-index:10;display:flex;justify-content:center;padding:20px 16px;background:rgba(0,0,0,.2);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-menu{display:flex;gap:40px;align-items:center;list-style:none;margin:0;padding:0}
.nav-link{font-size:14px;font-weight:600;text-decoration:none;color:#b4bac7;transition:all .3s;position:relative;display:inline-block;letter-spacing:.02em;padding:8px 0}
.nav-link::before{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(120deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);transition:width .3s}
.nav-link:hover{background:linear-gradient(120deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(-1px)}
.nav-link:hover::before{width:100%}
.nav-link.active{background:linear-gradient(120deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-link.active::before{width:100%}

/* Header (logo = 500px on desktop) */
header{display:flex;justify-content:center;padding:28px 16px 8px;position:relative;flex-shrink:0}
.logo{position:relative;transition:transform .3s}
.logo:hover{transform:translateY(-2px)}
.logo img{height:500px;width:auto;filter:drop-shadow(0 0 20px rgba(255,255,255,.2)) drop-shadow(0 4px 12px rgba(0,0,0,.3))}

/* Card */
.card{
  max-width:720px;
  width:min(92vw,780px);
  padding:56px 40px;
  margin:20px auto 48px;
  border-radius:32px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.02) inset,0 8px 32px rgba(255,138,0,.08);
  text-align:center;position:relative;overflow:hidden;transition:all .3s
}
.card::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,rgba(255,138,0,.3),rgba(194,42,209,.3),rgba(255,138,0,.3));border-radius:34px;z-index:-1;opacity:0;transition:opacity .3s}
.card:hover::before{opacity:1}
h1{font-size:clamp(28px,4.8vw,48px);margin:0 0 14px;font-weight:700;background:linear-gradient(135deg,#fff 0%,#e6e7eb 50%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(255,255,255,.1)}
.tag{color:#b4bac7;margin:0 auto 28px;font-size:clamp(14px,2.2vw,16px);font-weight:400;line-height:1.6;max-width:56ch}

/* CTA button */
.cta{background:linear-gradient(135deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);padding:18px 28px;border-radius:16px;color:#0b0e14;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;display:inline-block;box-shadow:0 16px 40px rgba(255,138,0,.3),0 8px 24px rgba(194,42,209,.2),0 0 0 1px rgba(255,255,255,.1) inset;transition:all .2s;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s}
.cta:hover::before{left:100%}
.cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 50px rgba(255,138,0,.4),0 12px 32px rgba(194,42,209,.25),0 0 0 1px rgba(255,255,255,.15) inset}

/* Badges */
.features{display:flex;justify-content:center;gap:18px;margin-top:24px;margin-bottom:0;flex-wrap:wrap}
.feature-badge{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 16px;font-size:12px;color:#a7adbb;font-weight:500;backdrop-filter:blur(8px);transition:all .2s}
.feature-badge:hover{background:rgba(255,255,255,.08);border-color:rgba(255,138,0,.3);color:#fff;transform:translateY(-1px)}

/* Map container (About page) */
.map-embed{
  margin:16px auto 26px;
  max-width:640px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.map-embed iframe{display:block;width:100%;height:360px;border:0}

/* Services grid */
.services-container{max-width:1400px;width:100%;padding:0 20px 88px;}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px;margin-bottom:64px}
.service-card{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px 32px;text-align:center;position:relative;overflow:hidden;transition:all .3s;box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.02) inset}
.service-card::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,rgba(255,138,0,.3),rgba(194,42,209,.3),rgba(255,138,0,.3));border-radius:26px;z-index:-1;opacity:0;transition:opacity .3s}
.service-card:hover::before{opacity:1}
.service-icon{width:80px;height:80px;margin:0 auto 24px;background:linear-gradient(135deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 8px 24px rgba(255,138,0,.3),0 4px 12px rgba(194,42,209,.2);transition:all .3s}
.service-card:hover .service-icon{transform:scale(1.1) rotate(5deg)}
.service-card h2{font-size:22px;font-weight:700;margin:0 0 16px;color:#fff}
.service-card p{font-size:15px;line-height:1.6;color:#b4bac7;margin:0}
.service-icon svg{width:36px;height:36px;fill:#fff;}

/* CTA sections */
.cta-section, .cta-block{
  max-width:900px;
  margin:32px auto 120px;
  text-align:center;
  padding:0 16px;
}
.cta-section h2, .cta-block h2{
  font-size:24px;
  font-weight:700;
  margin-bottom:8px;
  color:#fff;
}
.cta-section p, .cta-block p{
  color:#b4bac7;
  font-size:15px;
  margin-bottom:18px;
}

/* Gradient text (footer & links) */
.brand{
  font-weight:700;
  background:linear-gradient(120deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* robust gradient link so visited styles/UA defaults never override */
a.brand, a.brand-link, .gradient-link,
a.brand:link, a.brand:visited,
a.brand-link:link, a.brand-link:visited,
.gradient-link:link, .gradient-link:visited{
  text-decoration:none !important;
  background:linear-gradient(120deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  position:relative;
}
.brand-link::after, .gradient-link::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(120deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  border-radius:2px;
}
.brand-link:hover::after, .gradient-link:hover::after{ transform:scaleX(1); }

/* Footer */
footer{
  color:#8b929e;
  text-align:center;
  padding:24px 16px 28px;
  font-size:12px;
  font-weight:400;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.1);
  backdrop-filter:blur(8px);
  flex-shrink:0;
  margin-top:0;
}

/* Mobile menu */
.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;position:relative;z-index:100}
.hamburger{width:24px;height:2px;background:linear-gradient(120deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);position:relative;transition:all .3s}
.hamburger::before,.hamburger::after{content:'';position:absolute;width:24px;height:2px;background:linear-gradient(120deg,#ff8a00 0%,#ff6b35 30%,#c22ad1 100%);transition:all .3s}
.hamburger::before{top:-8px}.hamburger::after{bottom:-8px}
.mobile-menu-toggle.active .hamburger{background:transparent}
.mobile-menu-toggle.active .hamburger::before{transform:rotate(45deg);top:0}
.mobile-menu-toggle.active .hamburger::after{transform:rotate(-45deg);bottom:0}

/* Layout helpers */
main{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex:1;
  padding:32px 16px 140px; /* extra bottom space */
  min-height:0;
}

/* Responsive */
@media (max-width:1024px) and (min-width:769px){
  .nav-menu{gap:32px}
  header{padding:24px 16px 8px}
  .logo img{height:320px}
}
@media (max-width:768px){
  nav{padding:16px}
  .mobile-menu-toggle{display:block}
  .nav-menu{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,11,15,.98);backdrop-filter:blur(20px);flex-direction:column;justify-content:center;gap:32px;transform:translateX(-100%);transition:transform .3s;z-index:99}
  .nav-menu.active{transform:translateX(0)}
  .nav-link{font-size:24px;font-weight:700}
  .card{padding:36px 24px;margin:12px 8px 40px;border-radius:24px}
  header{padding:20px 16px 6px}
  .logo img{height:240px}
  footer{padding:18px 16px 22px;font-size:11px}
}