/* EUC Nerds - Section-based backgrounds like Nerdio */
/* Brand color system */
:root{
  --bg:#0f1220;              /* Primary dark background */
  --bg-alt:#14182a;          /* Alternate darker background */
  --bg-light:#1a1f35;        /* Lighter section background */
  --gray-1:#2a2d3a;          /* Light gray */
  --gray-2:#242833;          /* Medium gray */
  --gray-3:#1e212b;          /* Dark gray */
  --gray-4:#181b24;          /* Darker gray */
  --card:#1c2240;
  --ink:#e9eefb;
  --muted:#b8c2e6;
  --brand:#12214e;           /* deep blue */
  --brand-2:#6382c1;         /* accent blue */
  --accent:#00d1c1;          /* teal */
  --line:#28305a;
  --line-light:#2a3258;      /* lighter border for light sections */
}

*{box-sizing:border-box}

/* Body with subtle teal accents in background */
html,body{
  margin:0;
  padding:0;
  color:var(--ink);
  font-family: Verdana;
  line-height:1.6;
  font-size: 0.95rem;
  scroll-padding-top: 60px;
  background: var(--bg);
  background-image:
    radial-gradient(circle at top right, rgba(0,209,193,0.08), transparent 60%),
    radial-gradient(circle at bottom left, rgba(0,209,193,0.05), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(1120px, 92vw);
  margin:0 auto;
}

/* Navigation - solid dark header */
.nav{
  position:sticky; 
  top:0; 
  z-index:100;
  background: var(--bg);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand img{height: clamp(22px, 4vw, 30px)}
.brand-name{font-weight:700; letter-spacing:0.5px}

.menu{display:flex; gap:20px; align-items:center}
.menu a{color:var(--ink); opacity:0.9; font-weight:500}

/* Default CTA buttons - solid blue */
.cta-btn{
  display:inline-block; 
  padding:10px 18px; 
  border-radius:8px;
  background: var(--brand-2); /* solid accent blue */
  color:white; 
  font-weight:600; 
  border:none;
}
.cta-btn:hover{
  filter:brightness(1.08);
  text-decoration:none;
}

/* Keep LinkedIn button in nav bar gradient */
.nav .cta-btn{
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
}
.nav .cta-btn:hover{
  filter:brightness(1.05);
}

/* Request a Call button - teal */
.menu a[href="#contact"].cta-btn{
  background: var(--accent); /* solid teal */
  color:white;
}
.menu a[href="#contact"].cta-btn:hover{
  filter: brightness(1.1);
}

/* HERO SECTION - Dark with gradient accents and teal depth */
.hero-section{
  background: var(--bg);
  background-image:
    radial-gradient(1400px 800px at 80% -10%, rgba(0,209,193,0.25), transparent 60%),
    radial-gradient(1000px 500px at -10% 0%, rgba(0,209,193,0.12), transparent 60%);
  padding:88px 0 56px;
}
.hero-section h1{
  font-size: clamp(28px, 4vw, 48px);
  line-height:1.1;
  margin:0 0 16px;
  background: linear-gradient(90deg,#9db7ff, #ffffff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-section p{max-width:820px; color:var(--muted); font-size: clamp(14px, 2vw, 16px)}
.hero-actions{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}

/* PARTNERS SECTION - Light background */
.partners-section{
  background: var(--bg-light);
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  padding:28px 0;
}
.partner-grid{
  display:flex; flex-wrap:wrap; gap:22px;
  align-items:center; justify-content:center;
}

/* Logo styling (original, no teal border) */
.logo-item{
  width: 200px;
  height: 72px;
  display:flex; align-items:center; justify-content:center;
  padding: 6px 10px;
  background: rgba(15,18,32,0.6);
  border: 1px solid var(--line-light);
  border-radius:10px;
  box-shadow: 0 0 3px rgba(0,209,193,0.35); /* subtle teal glow */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.logo-item img{
  max-height: 44px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
  image-rendering: auto;
}

/* Logo scaling adjustments */
.logo-item.nutanix img { transform: scale(2.30); }
.logo-item.vmware  img { transform: scale(2.40); }
.logo-item.citrix  img { transform: scale(1.00); }
.logo-item.azure   img { transform: scale(1.00); }

/* SERVICES SECTION - Dark background */
.services-section {
  background: var(--bg);
  padding: 64px 0;
}

/* WHY SECTION - Light background */
.why-section {
  background: var(--bg-light);
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  padding: 64px 0;
}

/* CONTACT SECTION - Dark background */
.contact-section{
  background: var(--bg);
  padding:64px 0;
}

/* FOOTER SECTION - Darkest background with subtle teal overlay */
.footer-section{
  background: linear-gradient(180deg, rgba(0,209,193,0.06) 0%, var(--bg-alt) 100%);
  border-top:1px solid var(--line);
  padding:32px 0; 
  color:#cdd6f6; 
  font-size:14px;
}

/* Section styling */
.section h2{
  font-size: clamp(25px, 3.5vw, 38px);
  margin:0 0 4px;
  font-style: italic;
}
.section .lead{color:var(--muted); margin:0 0 28px}

/* Cards */
.cards{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.card{
  background: linear-gradient(180deg, var(--card), #192042);
  border:1px solid var(--line);
  border-radius:14px; padding:18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ 
  transform: translateY(-3px); 
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.card h3{margin:8px 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted)}

/* Cards in light sections get darker backgrounds */
.why-section .card {
  background: linear-gradient(180deg, #161d3f, #131a3a);
  border-color: #2a3258;
}

/* Value props */
.value-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
.value{
  background: rgba(15,18,32,0.8);
  border:1px solid var(--line);
  border-radius:12px; padding:20px;
  backdrop-filter: blur(4px);
  transition: transform .2s ease;
}
.value:hover{
  transform: translateY(-2px);
}
.value h4{margin:0 0 8px; font-size: 1.1rem; font-weight: 600;}
.value p{margin:0; color:var(--muted)}

/* CTA banner */
.cta-band{
  margin-top:36px; 
  padding:24px;
  background: linear-gradient(90deg, rgba(18,33,78,0.35), rgba(0,209,193,0.2));
  border:1px solid rgba(0,209,193,0.5);
  border-radius:12px; 
  display:flex; 
  flex-wrap:wrap; 
  gap:14px; 
  align-items:center; 
  justify-content:space-between;
}

/* Contact form */
.form-wrap{
  max-width:560px; margin:0 auto;
  background: rgba(28,34,64,0.78);
  border:1px solid #32407a;
  border-radius:16px;
  padding:22px;
  box-shadow: 0 0 15px rgba(66,101,175,0.45), 0 12px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}
.form-wrap h3{margin:0 0 8px}
.form-wrap p{color:var(--muted)}
.input{
  width:100%; padding:12px 14px; border-radius:10px;
  background:#20264a; color:var(--ink); border:1px solid #33407a;
  outline:none;
}
.input:focus{
  border-color:var(--accent);
  box-shadow: 0 0 0 2px rgba(0,209,193,0.2);
}
.input::placeholder{color:#8ea0d6}
label{display:block; font-weight:600; margin:14px 0 6px}
button.submit{
  width:100%; padding:12px 16px; margin-top:14px; border:none; border-radius:10px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2)); 
  color:#fff; font-weight:700;
  cursor:pointer;
}
button.submit:hover{filter:brightness(1.06)}

/* Form typography */
form,
form label,
form input,
form textarea,
form button {
  font-family: Verdana;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
}

/* Footer grid */
.footer-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
.footer-section a{color:#cdd6f6; opacity:0.9}
.small{opacity:0.7; font-size:13px}

/* Responsive design */
@media (max-width: 980px){
  .cards{grid-template-columns: 1fr 1fr}
  .value-grid{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
}

@media (max-width: 640px){
  .menu{display:none}
  .cards{grid-template-columns: 1fr}
  .logo-item{ width: 46%; min-width: 150px; }
  
  /* Adjust section padding on mobile */
  .hero-section { padding: 60px 0 40px; }
  .services-section, .why-section { padding: 48px 0; }
  .contact-section { padding: 48px 0; }
}

/* Mobile navigation */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:8px;
  margin-left:auto;
  cursor:pointer;
}
.nav-toggle .bar{
  display:block;
  width:24px; height:2px;
  background:#e9eefb;
  margin:5px 0;
  transition:transform .2s ease, opacity .2s ease;
}

/* Keyframes for dropdown (very subtle) */
@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 850px) {
  .nav-toggle {
    display: block;
    cursor: pointer;
    z-index: 1001;
  }

  .menu {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: rgba(15, 18, 32, 0.95);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
    will-change: opacity, transform;
  }

  .menu a {
    display: block;
    padding: 12px 16px;
    text-align: center;
    border-radius: 4px;
    transition: background 0.2s ease;
  }

  .menu a:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  /* OPEN STATE — subtle animation */
  .menu.open {
    display: flex;
    animation: dropdownFade 0.25s ease-out forwards;
  }

  .nav-toggle.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open .bar:nth-child(2) { opacity: 0; }
  .nav-toggle.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .menu.open { animation: none !important; }
}


/* Utility classes */
.visually-hidden {
  position:absolute!important; 
  width:1px;height:1px; padding:0;margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.btn-center {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.center-page {
  display: block;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}